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

Enhance cart functionality and layout; add item quantity input and update styles for better responsiveness

Browse Source
This commit is contained in:
vista-man
2025-02-18 09:22:29 +01:00
parent 1f418f9c85
commit ac41af07fd
4 changed files with 175 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
website/Cart/cart.css
View File

@@ -1,18 +1,36 @@
/* Winkelmandje sectie */
.cart {
width: 15%;
background-color: #fff; /* Change background color to white */
width: 15%; /* Make the cart a bit smaller */
padding: 20px;
height: 100vh;
overflow-y: auto;
order: 3; /* Ensure the cart is on the right */
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 80px; /* Increase margin to ensure it starts below the categories bar */
position: fixed; /* Fix the cart to the right side */
right: 0; /* Align the cart to the right */
top: 0; /* Align the cart to the top */
top: 60px; /* Ensure it starts below the categories bar */
display: flex;
flex-direction: column; /* Ensure the content is arranged in a column */
}
.cart ul {
list-style-type: none;
padding: 0;
}
.cart li {
margin-bottom: 10px;
}
.cart-item button {
background-color: #d32f2f;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
.cart-item {
display: flex;
justify-content: space-between;
@@ -50,3 +68,26 @@
#order-button:hover {
background-color: #45a049;
}
.cart-item button:hover {
background-color: #b71c1c;
}
#order-button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
width: 100%;
text-align: center;
margin-top: 20px;
display: none; /* Hide the button by default */
align-self: flex-end; /* Ensure the button is at the bottom */
}
#order-button:hover {
background-color: #45a049;
}