alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-07 05:53:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhance layout and translations for better user experience

Browse Source
This commit is contained in:
vista-man
2025-02-21 11:33:05 +01:00
parent 2cf2ae1d00
commit 42c4f80111
3 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/script.js
View File

@@ -298,6 +298,7 @@ const translations = {
"Soepen": "Soups", "Soepen": "Soups",
"Salades": "Salads", "Salades": "Salads",
"Sausjes": "Sauces", "Sausjes": "Sauces",
"Snoep": "Candy",
"Winkelmandje": "Shopping Cart", "Winkelmandje": "Shopping Cart",
"Prijs": "Price", "Prijs": "Price",
"Toevoegen aan winkelmandje": "Add to cart", "Toevoegen aan winkelmandje": "Add to cart",
@@ -338,6 +339,7 @@ const translations = {
"Soups": "Soepen", "Soups": "Soepen",
"Salads": "Salades", "Salads": "Salades",
"Sauces": "Sausjes", "Sauces": "Sausjes",
"Candy": "Snoep",
"Shopping Cart": "Winkelmandje", "Shopping Cart": "Winkelmandje",
"Price": "Prijs", "Price": "Prijs",
"Add to cart": "Toevoegen aan winkelmandje", "Add to cart": "Toevoegen aan winkelmandje",

31
website/style.css
View File

@@ -211,11 +211,30 @@ body {
@media (max-width: 768px) { @media (max-width: 768px) {
.menu-bar { .menu-bar {
flex-wrap: wrap; /* Allow wrapping of menu items */ flex-wrap: wrap; /* Allow wrapping of menu items */
width: 100%; /* Use full width for menu bar */
top: 0; /* Fix the menu bar to the top */
left: 0;
transform: translate(0, 0);
justify-content: space-around; /* Spread the menu items */
flex-wrap: wrap; /* Ensure all items are in a single row */
padding: 10px; /* Add padding for better spacing */
}
.menu-item {
flex: 1 1 48%; /* Make each menu item take half width */
margin: 5px 1%; /* Add margin between items */
font-size: 1em; /* Adjust font size for better readability */
} }
.product-display { .product-display {
width: 100%; /* Use full width for product display */ width: 100%; /* Use full width for product display */
margin-top: 120px; /* Increase margin to accommodate wrapped menu bar */ margin-top: 120px; /* Increase margin to accommodate wrapped menu bar */
padding: 10px; /* Add padding for better spacing */
}
.product-box {
width: calc(50% - 20px); /* Two items per row */
margin: 10px; /* Add margin between items */
} }
.cart { .cart {
@@ -223,6 +242,18 @@ body {
top: auto; /* Remove fixed position */ top: auto; /* Remove fixed position */
bottom: 0; /* Position at the bottom */ bottom: 0; /* Position at the bottom */
height: auto; /* Adjust height */ height: auto; /* Adjust height */
max-height: 50vh; /* Set a maximum height for the cart */
overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
}
.cart-icon {
top: 20px; /* Adjust position */
right: 20px; /* Adjust position */
}
.language-switcher {
bottom: 20px; /* Position at the bottom */
left: 20px; /* Position at the left */
} }
} }