add extra order items screen, clickable div with shadow

app/static/css/main.css

@@ -21,4 +21,35 @@ body {
 
 .product .extras {
     padding-left: 20px;
+}
+
+.showcase .product {
+    font-size: 16px;
+}
+
+/* Add clickable box */
+div.box:hover {
+    cursor: hand;
+    cursor: pointer;
+    opacity: .9;
+    /*border-bottom: #f44346 1px solid !important;*/
+    box-shadow: -5px 5px 5px #888888;
+}
+
+a.divLink {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    text-decoration: none;
+    /* Makes sure the link doesn't get underlined */
+    z-index: 10;
+    /* raises anchor tag above everything else in div */
+    background-color: white;
+    /*workaround to make clickable in IE */
+    opacity: 0;
+    /*workaround to make clickable in IE */
+    filter: alpha(opacity=0);
+    /*workaround to make clickable in IE */
 }

app/templates/order.html

@@ -83,8 +83,9 @@
             </tbody>
         </table>
     </div>
-    <div class="col-md-push-2 col-md-4 darker" id="items-ordered">
+    <div class="col-md-push-2 col-md-4 darker box" id="items-ordered">
         <h3>Ordered products: {{ order.items.count() }}</h3>
+        <a class="divLink" href="{{ url_for('.items_showcase', id=order.id) }}"></a>
         {% for key, value in order.group_by_product().items() -%}
             <div class="product">
                 {{ key }}: {{ value["count"] }}

app/templates/order_items.html

@@ -0,0 +1,42 @@
+{% extends "bootstrap/base.html" %}
+{% import "bootstrap/utils.html" as utils %}
+
+{% block title %}
+Haldis - Order {{ order.id }}
+{% endblock %}
+
+{% block styles %}
+    {{ super() }}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
+{% endblock %}
+
+{% block scripts %}
+    {{ super() }}
+    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
+{% endblock %}
+
+{% block content -%}
+    {{ utils.flashed_messages(container=True) }}
+
+    <div class="row">
+        <div class="col-sm-6 col-sm-offset-3 darker showcase" id="items-ordered">
+            <h3 class="text-center">Ordered products: {{ order.items.count() }}</h3>
+        {% for key, value in order.group_by_product().items() -%}
+            <div class="product text-center">
+                <p>
+                    {{ key }}: {{ value["count"] }}
+                    {% if value["extras"] -%}
+                        <div class="extras">
+                        {% for extra in value["extras"] -%}
+                            <div>{{ extra }}</div>
+                        {% endfor %}
+                        </div>
+                    {%- endif %}
+                </p>
+            </div>
+        {%- endfor %}
+        </div>
+    </div>
+
+{%- endblock %}

app/views/order.py

@@ -53,6 +53,15 @@ def order(id, form=None):
     debts = sum([o.product.price for o in order.items if not o.paid])
     return render_template('order.html', order=order, form=form, total_price=total_price, debts=debts)
 
+@order_bp.route('/<id>/items')
+def items_showcase(id, form=None):
+    order = Order.query.filter(Order.id == id).first()
+    if order is None:
+        abort(404)
+    if current_user.is_anonymous() and not order.public:
+        flash('Please login to see this order.', 'info')
+        abort(401)
+    return render_template('order_items.html', order=order)
 
 @order_bp.route('/<id>/edit', methods=['GET', 'POST'])
 @login_required