Fix and improve "ordered items" page

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__":

app/models/order.py

@@ -64,7 +64,6 @@ 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]
             group[item.dish_name] = dish
 

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;

app/templates/order_items.html

@@ -22,17 +22,18 @@ 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>
+            <h1 class="text-center">Ordered dishes: {{ order.items.count() }}</h1>
             {% 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>
+                <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>