From 8ed38f178c81e62ee60b50e628e24c4d577cdba0 Mon Sep 17 00:00:00 2001
From: Midgard <midgard@zeus.ugent.be>
Date: Mon, 27 Jan 2020 03:01:49 +0100
Subject: [PATCH] Fix and improve "ordered items" page

---
 app/app.py                     |  2 ++
 app/models/order.py            |  3 +--
 app/static/css/main.css        | 30 ++++++++++++++++++++++++------
 app/templates/order_items.html | 27 ++++++++++++++-------------
 4 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/app/app.py b/app/app.py
index 573bdde..a760064 100755
--- a/app/app.py
+++ b/app/app.py
@@ -171,6 +171,8 @@ def add_template_filters(app: Flask) -> None:
         "A function which converts a value to its euro_string"
         return euro_string(value)
 
+    app.template_filter("any")(any)
+
 
 # For usage when you directly call the script with python
 if __name__ == "__main__":
diff --git a/app/models/order.py b/app/models/order.py
index 4cdb185..4e9f2bf 100644
--- a/app/models/order.py
+++ b/app/models/order.py
@@ -64,8 +64,7 @@ class Order(db.Model):
         for item in self.items:
             dish = group.get(item.dish_name, dict())
             dish["count"] = dish.get("count", 0) + 1
-            if item.comment:
-                dish["comments"] = dish.get("comments", []) + [item.comment]
+            dish["comments"] = dish.get("comments", []) + [item.comment]
             group[item.dish_name] = dish
 
         return group
diff --git a/app/static/css/main.css b/app/static/css/main.css
index bd93cde..03e8c6b 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -63,8 +63,30 @@ body {
     width: 100%;
 }
 
-.product .extras {
-    padding-left: 20px;
+.showcase {
+    font-size: 16px;
+    line-height: 1.2;
+}
+
+.showcase h1 {
+    font-size: 150%;
+    font-weight: bold;
+}
+.showcase h2 {
+    font-size: 110%;
+    font-weight: bold;
+    margin-bottom: 0;
+}
+
+.showcase .quantity {
+    font-size: 110%;
+}
+
+.showcase .comments {
+    padding-left: 2em;
+}
+.showcase .comments li {
+    margin: 0.7em 0 0.3em;
 }
 
 .order_row {
@@ -90,10 +112,6 @@ body {
     }
 }
 
-.showcase .product {
-    font-size: 16px;
-}
-
 /* Add clickable box */
 div.box:hover {
     cursor: hand;
diff --git a/app/templates/order_items.html b/app/templates/order_items.html
index 4b94ba5..942a05f 100644
--- a/app/templates/order_items.html
+++ b/app/templates/order_items.html
@@ -22,21 +22,22 @@ Haldis - Order {{ order.id }}
 
     <div class="row">
         <div class="col-sm-6 col-sm-offset-3 darker showcase" id="items-ordered">
-            <h3 class="text-center">Ordered dishes: {{ order.items.count() }}</h3>
-        {% for key, value in order.group_by_dish().items() -%}
-            <div class="product text-center">
-                <p>
-                    {{ key }}: {{ value["count"] }}
-                    {% if value["extras"] -%}
-                        <div class="extras">
-                        {% for extra in value["extras"] -%}
-                            <div>- {{ extra }}</div>
+            <h1 class="text-center">Ordered dishes: {{ order.items.count() }}</h1>
+            {% for key, value in order.group_by_dish().items() -%}
+                <div class="dish">
+                    <h2><span class="quantity">{{ value["count"] }}</span> × {{ key }}</h2>
+                    {% if value["comments"]|any -%}
+                        <ul class="comments">
+                        {% for comment in value["comments"] -%}
+                           <li>{% if comment %}{{ comment }}
+                           {% else %}<i>No comment</i>
+                           {% endif %}</li>
                         {% endfor %}
-                        </div>
+                        </ul>
                     {%- endif %}
-                </p>
-            </div>
-        {%- endfor %}
+                    </p>
+                </div>
+            {%- endfor %}
         </div>
     </div>