From d20ce9803e76da6db928b66fd609fe69851be065 Mon Sep 17 00:00:00 2001 From: Midgard Date: Mon, 21 Jun 2021 00:46:29 +0200 Subject: [PATCH] Improve design Remove main CSS from shop view page. Make it theme independent and maximize contrast. Improve spacing in "add item" list. Refactor old term "showcase" to "shop_view" in code. --- app/static/css/main.css | 55 -------------------- app/static/css/shop_view.css | 93 ++++++++++++++++++++++++++++++++++ app/templates/order.html | 23 +++++---- app/templates/order_items.html | 6 +-- app/views/order.py | 2 +- 5 files changed, 108 insertions(+), 71 deletions(-) create mode 100644 app/static/css/shop_view.css diff --git a/app/static/css/main.css b/app/static/css/main.css index 504882a..6dba497 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -60,61 +60,6 @@ body { width: 100%; } -.showcase { - font-size: 16px; - line-height: 1.2; - padding: 0; - max-width: 500px; - margin: 0 auto 70px; -} - -.showcase h1 { - font-size: 200%; - margin: 0 ; - padding: 0.4em 0 0.2em; - border-bottom: 1px dashed var(--gray1); - text-align: center; -} -.showcase h2 { - font-size: 110%; - font-weight: bold; - margin-bottom: 0.6em; -} - -.showcase .open-order-warning { - font-size: 150%; - text-align: center; - padding: 1em 0.5em; - background-color: rgba(255, 0, 0, 0.1); -} - -.showcase .dish { - padding: 0 0.5em; -} -@media (min-width: 500px) { - .showcase .dish { - padding: 0 1em; - } -} - -.showcase .quantity { - font-size: 110%; -} - -.showcase .comments { - padding-left: 2em; -} -.showcase .comments li { - margin: 0.5em 0 0; -} - -.showcase .total { - border-top: 1px dashed var(--gray1); - text-align: center; - padding: 0.5em 0; - margin-top: 1.3em; -} - .time_data{ display: flex; justify-content: space-between; diff --git a/app/static/css/shop_view.css b/app/static/css/shop_view.css new file mode 100644 index 0000000..ed75a75 --- /dev/null +++ b/app/static/css/shop_view.css @@ -0,0 +1,93 @@ +:root { + --bg: #eee; + --ticketBg: #fff; + --fg: #000; + --dashes: 1px dashed #444; + --fontFamily: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif; + --fontSize: 16px; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + background: var(--bg); + color: var(--fg); + font-family: var(--fontFamily); + font-size: var(--fontSize); + line-height: 1.2; +} + +.ticket { + background: var(--ticketBg); + font-size: 16px; + padding: 0; + max-width: 500px; + margin: 25px auto; + margin: 7vh auto; + box-shadow: 0 0.15em 0.3em rgba(0, 0, 0, 0.2); +} + +@media (max-width: 500px) { + body { + background: var(--ticketBg); + } + .ticket { + margin: 0; + box-shadow: none; + } +} + +h1 { + font-size: 200%; + margin: 0 ; + padding: 0.3em 0 0.3em; + border-bottom: var(--dashes); + text-align: center; +} +h2 { + font-size: 110%; + font-weight: bold; + margin-bottom: 0.6em; +} + +.open-order-warning { + font-size: 150%; + text-align: center; + padding: 1em 0.5em; + background-color: rgba(255, 0, 0, 0.1); +} + +.dish { + padding: 0 0.5em; +} +@media (min-width: 500px) { + .dish { + padding: 0 1em; + } +} + +.quantity { + font-size: 110%; +} + +.comments { + padding-left: 2em; +} +.comments li { + margin: 0.5em 0 0; +} + +.total { + border-top: var(--dashes); + text-align: center; + padding: 0.5em 0; + margin-top: 1.3em; +} + +.time_data{ + display: flex; + justify-content: space-between; +} diff --git a/app/templates/order.html b/app/templates/order.html index 4f75ed1..eecef70 100644 --- a/app/templates/order.html +++ b/app/templates/order.html @@ -256,7 +256,7 @@
Total {{ order.items.count() }} items — {{ total_price|euro }}   - Shop view + Shop view
@@ -313,9 +313,7 @@
On selected: - - - Request payment for selected: +
@@ -472,7 +470,8 @@ li { summary { line-height: 1.2; - margin: 0.6em 0; + margin: 0 -10px; + padding: 4px 10px; } summary .dish_name, summary:before { align-self: flex-start; @@ -480,14 +479,16 @@ summary .dish_name, summary:before { details[open] summary .dish_name { font-weight: bold; } +details { + margin: 0 -10px; + padding: 0 10px; +} details[open] { background-color: var(--gray5); - margin-left: -10px; - margin-right: -10px; - margin-bottom: 5px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 10px; + padding-bottom: 5px; +} +details:not([open]) summary:hover { + background-color: var(--gray5); } .select2-container--default .select2-selection--multiple .select2-selection__rendered { diff --git a/app/templates/order_items.html b/app/templates/order_items.html index 6d73795..6d633fb 100644 --- a/app/templates/order_items.html +++ b/app/templates/order_items.html @@ -7,9 +7,7 @@ Haldis - Order {{ order.id }} {% block styles %} {{ super() }} - - - + {% endblock %} {% block scripts %} @@ -23,7 +21,7 @@ Haldis - Order {{ order.id }} {% block content -%} {{ utils.flashed_messages(container=True) }} -
+

Haldis order {{ order.id }}

{% if not order.is_closed() %} diff --git a/app/views/order.py b/app/views/order.py index a8646b6..177c195 100644 --- a/app/views/order.py +++ b/app/views/order.py @@ -88,7 +88,7 @@ def order_from_id(order_id: int, form: OrderForm = None, dish_id=None) -> str: @order_bp.route("//items") -def items_showcase(order_id: int) -> str: +def items_shop_view(order_id: int) -> str: "Generate order items view from id" order = Order.query.filter(Order.id == order_id).first() if order is None: