From 8ccc508747e33542bc505cf944cecc7007f83f26 Mon Sep 17 00:00:00 2001 From: Midgard Date: Fri, 21 Aug 2020 15:17:10 +0200 Subject: [PATCH] Tweak layout --- app/static/css/main.css | 16 +- app/templates/order.html | 543 ++++++++++++++++++--------------------- app/views/order.py | 6 +- 3 files changed, 255 insertions(+), 310 deletions(-) diff --git a/app/static/css/main.css b/app/static/css/main.css index 149f0f8..8d17488 100644 --- a/app/static/css/main.css +++ b/app/static/css/main.css @@ -287,22 +287,18 @@ h1, h2, h3, h4, h5, h6{ color: var(--gray2); } -#dish_choices { - margin: 0.5em 1em 1.5em; - transition: opacity 0.2s; -} -#dish_choices.loading { - opacity: 0.2; -} - .dish-choices summary { font-style: italic; +} + +details summary { cursor: pointer; } -.dish-choices summary:before { +details summary:before { font-style: normal; content: "⯈"; + padding-right: 0.4em; } -.dish-choices[open] summary:before { +details[open] summary:before { content: "⯆"; } diff --git a/app/templates/order.html b/app/templates/order.html index 0faeb15..b525864 100644 --- a/app/templates/order.html +++ b/app/templates/order.html @@ -23,212 +23,222 @@
-
-

Order information

-
-
Location
-
- {% if order.location %} - {{ order.location_name }} - {% else %} - {{ order.location_name }} - {% endif %} -
- -
Delivery at
-
- Zeuskelder TODO -
- -
Courier
-
- {% if order.courier == None %} - {% if not current_user.is_anonymous() %} -
- -
- {% else %}No-one{% endif %} - {% else %} - {{ order.courier.username }} - {% endif %} -
- -
Opens
-
{{ order.starttime.strftime("%Y-%m-%d, %H:%M") }}
- -
Closes
-
- {% if order.stoptime %} - {% set stoptimefmt = ( - "%H:%M" if order.stoptime.date() == order.starttime.date() - else "%Y-%m-%d, %H:%M" - ) %} - {{ order.stoptime.strftime(stoptimefmt) }} ({{ order.stoptime|countdown }}) - {% else %} - Never - {% endif %} -
-
- -
- {% if order.can_close(current_user.id) -%} -
- -
- {% endif %} - {% if courier_or_admin %} - Edit - {%- endif %} -
-
{% if form %}
-

Add item to order

- -
- {{ form.csrf_token }} - - -
- {{ form.dish_id.label }}
- {{ form.dish_id(class='form-control select') }} - {{ util.render_form_field_errors(form.dish_id) }} -
- -
- {% if dish and dish.choices %} - {% for (choice_type, choice) in dish.choices %} -
-
- -
- {% endfor %} - {% endif %} -
- -
- {{ form.comment.label }}
- {{ form.comment(class='form-control', placeholder='Fill in comment, when applicable') }} - {{ util.render_form_field_errors(form.comment) }} -
- - {% if current_user.is_anonymous() %} -
- {{ form.user_name.label(class='control-label') }} - {{ form.user_name(class='form-control', placeholder='Fill in your name...') }} - {{ util.render_form_field_errors(form.user_name) }} -
- {% endif %} -
- Random - - {{ form.submit_button(class='btn btn-primary') }} - {% if not dish %} -
If the chosen dish has options, they will be shown when you press submit, before adding the item to the order.
- {% endif %} -
-
-
-

Add from favourites

-
    -
  • Todo
    • -
-
{% endif %}
-

My items

- {% if my_items %} -
    - {% for item in my_items %} -
  • - {% if item.can_delete(order.id, current_user.id, session.get('anon_name', '')) -%} -
    - -
    - {%- endif %} - {{ item.price|euro }} {{ item.dish_name }}{% if item.comment %}; {{ item.comment }}{% endif %} -
    • - {% endfor %} -
- {% else %} -
(None)
- {% endif %} -
-
- -
-
-

Ordered dishes

- {% for dish_name, dish_order_items in order.group_by_dish() -%} - {% set has_comments = dish_order_items | map(attribute="comment") | any -%} -
-

- {{ dish_order_items | length }} × - {{ dish_name }} -

- - {% if has_comments -%} -
    - {% for item in dish_order_items -%} -
  • {% if item["comment"] %}{{ item["comment"] }} - {% else %}No comment - {% endif %} for {{ item.for_name }}
    • - {% endfor %} -
- {% else %} - for {{ dish_order_items | map(attribute="for_name") | join(", ") }} - {%- endif %} - -

-
- {%- endfor %} -
- Total {{ order.items.count() }} items — {{ total_price|euro }} - Shop view -
-
-

Ordering at {{ order.location_name }}

-
- {% if order.location.telephone %} -
Telephone
-
{{ order.location.telephone }}
- {% endif %} - - {% if order.location.website %} -
Website
-
{{ order.location.website }}
- {% endif %} - - {% if order.location.address or order.location.osm %} +
+
+

Order information

+
Location
- {% if order.location.osm %} - {{ order.location.address or "View on OSM" }} + {% if order.location %} + {{ order.location_name }} {% else %} - {{ order.location.address }} + {{ order.location_name }} {% endif %}
+ +
Delivery at
+
+ Zeuskelder TODO +
+ +
Courier
+
+ {% if order.courier == None %} + {% if not current_user.is_anonymous() %} +
+ +
+ {% else %}No-one{% endif %} + {% else %} + {{ order.courier.username }} + {% endif %} +
+ +
Opens
+
{{ order.starttime.strftime("%Y-%m-%d, %H:%M") }}
+ +
Closes
+
+ {% if order.stoptime %} + {% set stoptimefmt = ( + "%H:%M" if order.stoptime.date() == order.starttime.date() + else "%Y-%m-%d, %H:%M" + ) %} + {{ order.stoptime.strftime(stoptimefmt) }} ({{ order.stoptime|countdown }}) + {% else %} + Never + {% endif %} +
+
+ +
+ {% if order.can_close(current_user.id) -%} +
+ +
+ {% endif %} + {% if courier_or_admin %} + Edit + {%- endif %} +
+
+ + + {% if form %} + +
+

Add from favourites

+
    +
  • Todo
    • +
+
+ +
+

Add item to order

+ + {% for dish in order.location.dishes %} +
+ {{ form.csrf_token }} + + + {% if form.dish_id.errors %} +
+ {{ util.render_form_field_errors(form.dish_id) }} +
+ {% endif %} + +
+ {{ dish.name }} {{ dish.tags | join(", ") }}{{ dish.price_range() | price_range }} + {% for (choice_type, choice) in dish.choices %} +
+
+ +
+ {% endfor %} + +
+ {{ form.comment.label }}
+ {{ form.comment(class='form-control', placeholder='Fill in comment, when applicable') }} + {{ util.render_form_field_errors(form.comment) }} +
+ + {% if current_user.is_anonymous() %} +
+ {{ form.user_name.label(class='control-label') }} + {{ form.user_name(class='form-control', placeholder='Fill in your name...') }} + {{ util.render_form_field_errors(form.user_name) }} +
+ {% endif %} +
+ {{ form.submit_button(class='btn btn-primary') }} +
+
+
+ {% endfor %} +
+ + {% endif %} + + {% if form %} +
+ +
+ {% endif %} + + +
+

My items

+ {% if my_items %} +
    + {% for item in my_items %} +
  • + {% if item.can_delete(order.id, current_user.id, session.get('anon_name', '')) -%} +
    + +
    + {%- endif %} + {{ item.dish_name }}{% if item.comment %}; {{ item.comment }}{% endif %} {{ item.price | euro }} +
    • + {% endfor %} +
+ {% else %} +
(None)
{% endif %} -
- TODO Only show options that allow you to order +
+ +
+

Ordering at {{ order.location_name }}

+
+ {% if order.location.telephone %} +
Telephone
+
{{ order.location.telephone }}
+ {% endif %} + + {% if order.location.website %} +
Website
+
{{ order.location.website }}
+ {% endif %} + + {% if order.location.address or order.location.osm %} +
Location
+
+ {% if order.location.osm %} + {{ order.location.address or "View on OSM" }} + {% else %} + {{ order.location.address }} + {% endif %} +
+ {% endif %} +
+ TODO Only show options that allow you to order +
+ + {% if not form %} + + +
+ {% endif %} + +
+

Ordered dishes

+ {% for dish_name, dish_order_items in order.group_by_dish() -%} + {% set has_comments = dish_order_items | map(attribute="comment") | any -%} +
+

+ {{ dish_order_items | length }} × + {{ dish_name }} +

+ + {% if has_comments -%} +
    + {% for item in dish_order_items -%} +
  • {% if item["comment"] %}{{ item["comment"] }} + {% else %}No comment + {% endif %} for {{ item.for_name }}
    • + {% endfor %} +
+ {% else %} + for {{ dish_order_items | map(attribute="for_name") | join(", ") }} + {%- endif %} + +

+
+ {%- endfor %} +
+ Total {{ order.items.count() }} items — {{ total_price|euro }} + Shop view +
+
@@ -307,11 +317,13 @@ table { overflow-wrap: break-word; } section { - column-count: 2; - column-gap: 50px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0 30px; + align-items: start; } section.single_column { - column-count: unset; + grid-template-columns: unset; } header { margin-bottom: 25px; @@ -321,20 +333,20 @@ h2 { } h3 { margin-top: 0; + font-size: 150%; + font-weight: 500; } .location { - font-size: 125%; + font-size: 150%; font-weight: 500; - margin-left: 2px; + margin-left: 3px; margin-top: -5px; } .box { - display: inline-block; - vertical-align: top; width: 100%; border: 2px solid var(--gray0); padding: 10px; - margin-bottom: 50px; + margin-bottom: 30px; } #order_info dl { @@ -358,6 +370,30 @@ dl { margin-bottom: 0.6em; } +.spacecake { + display: flex; + align-items: flex-end; +} +.spacecake .spacer { + content: ' '; + flex-grow: 1; + min-width: 10px; + border-bottom: 1px solid var(--gray3); + margin: 0.3em 0.5em; +} + +li { + line-height: 1.5; + margin: 0.5em 0; +} + +#my_items li form { + align-self: flex-start; +} + +#per_dish .comments li { +} + #per_dish .dish.no_comments { display: flex; align-items: flex-end; @@ -366,19 +402,6 @@ dl { margin-bottom: 0; line-height: inherit; } -#per_dish .comments li { - display: flex; - align-items: flex-end; - line-height: 1.5; - margin: 0.3em 0; -} -#per_dish .spacer { - content: ' '; - flex-grow: 1; - min-width: 10px; - border-bottom: 1px solid var(--gray3); - margin: 0.3em 0.5em; -} #per_dish .item_for { color: var(--gray2); text-align: right; @@ -387,7 +410,7 @@ dl { #per_person li { white-space: nowrap; - margin: 0; + margin-top: 0.15em; vertical-align: top; } #per_person li > * { @@ -420,81 +443,7 @@ dl { {% endblock %} diff --git a/app/views/order.py b/app/views/order.py index 6528038..a8646b6 100644 --- a/app/views/order.py +++ b/app/views/order.py @@ -83,7 +83,7 @@ def order_from_id(order_id: int, form: OrderForm = None, dish_id=None) -> str: form=form, total_price=total_price, debts=debts, - dish=dish, + selected_dish=dish, ) @@ -138,7 +138,7 @@ def order_item_create(order_id: int) -> typing.Any: abort(404) form = AnonOrderItemForm() if current_user.is_anonymous() else OrderItemForm() - dish_id = form.dish_id.data if form.is_submitted() else request.args.get("dish") + dish_id = request.form["dish_id"] if form.is_submitted() else request.args.get("dish") if dish_id and not location.dish_by_id(dish_id): abort(404) if not form.is_submitted(): @@ -146,7 +146,7 @@ def order_item_create(order_id: int) -> typing.Any: form.populate(current_order.location) if form.is_submitted(): - form_for_dish = request.form["form_for_dish"] + form_for_dish = request.form["dish_id"] dish_was_changed = form_for_dish != "" and form_for_dish != dish_id # The form's validation tests that dish_id is valid and gives a friendly error if it's not