diff --git a/shop/static/shop/css/shop.css b/shop/static/shop/css/shop.css index 7d49698..6518b81 100644 --- a/shop/static/shop/css/shop.css +++ b/shop/static/shop/css/shop.css @@ -1,8 +1,7 @@ /* Product Display */ .options-container { display: grid; - grid-template-columns: 1fr 0.35fr 0.35fr; - column-gap: 8px; + grid-template-columns: 1fr 30%; align-content: center; } @@ -12,6 +11,7 @@ width: 100%; object-fit: contain; /* This will maintain the aspect ratio of the image */ background-color: black; + border-radius: 12px; } .no-image { @@ -31,44 +31,52 @@ /* Grid Layout */ .option-element { align-content: center; + height: 39px; + background-color: white !important; } - -.option-element:nth-child(1) { - grid-column: 1; +.option-element.product-title { + grid-column: 1 / span 2; grid-row: 1; - height: 64px; + background-color: blue; } -.option-element:nth-child(2) { - grid-column: 2 / span 3; - grid-row: 1; - text-align: right; +.option-element.product-price { + grid-column: 2; + grid-row: 2; + text-align: center; + background-color: green; } -.option-element:nth-child(3) { +.option-element.color-label { grid-column: 1; grid-row: 2; + font-size: 12px; + background-color: yellow; } -.option-element:nth-child(4) { - grid-column: 2; - grid-row: 2; +.option-element.color-selector { + grid-column: 1; + grid-row: 3; + background-color: red; } -.option-element:nth-child(5) { - grid-column: 3; - grid-row: 2; +.option-element.size-selector { + grid-column: 2; + grid-row: 3; + font-size: 12px; + text-align: center; + background-color: purple; } -.option-element:nth-child(6) { +.option-element.quantity-selector { grid-column: 1; - grid-row: 3; + grid-row: 4; } -.option-element:nth-child(7) { - grid-column: 2 / span 3; - grid-row: 3; - text-align: right; +.option-element.total-price { + grid-column: 2; + grid-row: 4; + text-align: center; } /* Buttons */ @@ -173,7 +181,7 @@ .quantity-controls { display: flex; align-items: center; - justify-content: center; + justify-content: left; } .quantity-form { @@ -193,7 +201,6 @@ align-items: center; justify-content: center; padding: 0; - margin: 0 3px; font-size: 16px; transition: background-color 0.3s ease; } @@ -210,8 +217,7 @@ } .quantity-value { - margin: 0 5px; - min-width: 20px; + width: 44px; text-align: center; font-weight: bold; font-size: 14px; @@ -311,14 +317,13 @@ .color-samples { display: flex; - margin-bottom: 12px; gap: 0px 8px; vertical-align: middle; align-items: center; } .color-sample { - width: 32px; + width: 28px; aspect-ratio: 1; border-radius: 50%; cursor: pointer; @@ -353,3 +358,121 @@ color: white; border-color: #f39200; } + +v .cart-table { + display: block; + width: 100%; +} + +.cart-table thead { + display: none; /* Hide header on small screens */ +} + +.cart-table tbody, +.cart-table tr, +.cart-table tfoot { + display: block; + width: 100%; +} + +.cart-table tbody tr { + /* margin-bottom: 15px; + padding: 10px; + border-radius: 8px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); */ +} + +.cart-table td { + display: flex; + /* padding: 8px 5px; + text-align: right; + justify-content: space-between; + align-items: center; */ +} + +.cart-table .price-column, +.cart-table .text-left { + /* text-align: right !important; */ +} + +.cart-table td.product-name { + grid-column: 1 / span 2; + grid-row: 1; + font-weight: bold; + font-size: 1.1em; +} + +.cart-table td.product-color { + grid-column: 1 / span 2; + grid-row: 2; +} + +/* .cart-table td.product-size { + grid-column: 2; + grid-row: 2; +} */ + +.cart-table td.product-quantity { + grid-column: 1; + grid-row: 3; +} + +.cart-table td.product-price { + grid-column: 3; + grid-row: 3; + justify-content: right; +} + +.cart-table td.product-actions { + grid-column: 3; + grid-row: 1; + justify-content: right; +} + +/* Make each product a grid container */ +.cart-table tbody tr { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +/* Cart summary buttons */ +.cart-summary { + flex-direction: column; + gap: 10px; +} + +.checkout-button { + width: 100%; + text-align: center; + height: 44px; /* Fixed height */ + line-height: 24px; /* Vertically center text */ + display: flex; + align-items: center; + justify-content: center; +} + +.cart-table tfoot tr { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.cart-table tfoot td { + display: block; + width: 100%; +} + +.cart-table tfoot td.total-quantity { + grid-column: 1; + grid-row: 1; + text-align: left; +} + +.cart-table tfoot td.total-price { + grid-column: 3; + grid-row: 1; + text-align: right; +} + +.cart-table tfoot td:empty { + display: none; +} diff --git a/shop/templates/shop/cart.html b/shop/templates/shop/cart.html index 92aa4ee..8923a3e 100644 --- a/shop/templates/shop/cart.html +++ b/shop/templates/shop/cart.html @@ -5,124 +5,6 @@ {% block second_title %}Plein de goodies !{% endblock %} {% block content %} - -