Pimp the counter click view

core/static/core/style.css

@@ -160,6 +160,15 @@ tbody>tr:hover {
     float: right;
     padding: 10px;
 }
+#products {
+    width: 90%;
+    margin: 0px auto;
+    overflow: auto;
+}
+#bar_ui {
+    float: left;
+    min-width: 57%;
+}
 #user_info_container {
 }
 #user_info {
@@ -277,3 +286,19 @@ label {
 #user_edit img {
     width: 100px;
 }
+.form_button {
+    width: 150px;
+    height: 100px;
+    padding: 2px;
+    display: inline-block;
+    font-size: 0.8em;
+}
+.form_button strong {
+    font-weight: bold;
+    font-size: 1.2em;
+}
+.form_button button {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+}

counter/templates/counter/counter_click.jinja

@@ -3,15 +3,15 @@
 
 
 {% macro add_product(id, content) %}
-<form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}" class="inline" style="display:inline">
+<form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}" class="form_button">
     {% csrf_token %}
     <input type="hidden" name="action" value="add_product">
-    <button type="submit" name="product_id" value="{{ id }}"> {{ content }} </button>
+    <button type="submit" name="product_id" value="{{ id }}"> {{ content|safe }} </button>
 </form>
 {% endmacro %}
 
 {% macro del_product(id, content) %}
-<form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}" class="inline" style="display:inline">
+<form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}" class="form_button">
     {% csrf_token %}
     <input type="hidden" name="action" value="del_product">
     <button type="submit" name="product_id" value="{{ id }}"> {{ content }} </button>
@@ -30,19 +30,9 @@
     {{ user_mini_profile(customer.user) }}
     <p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
 </div>
-{% if counter.type == 'BAR' %}
+<div id="bar_ui">
-<div>
-    <h5>{% trans %}Refilling{% endtrans %}</h5>
-    <form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
-        {% csrf_token %}
-        {{ refill_form.as_p() }}
-        <input type="hidden" name="action" value="refill">
-        <input type="submit" value="{% trans %}Go{% endtrans %}" />
-    </form>
-</div>
-{% endif %}
-<div>
     <h5>{% trans %}Selling{% endtrans %}</h5>
+    <div>
         {% if request.session['too_young'] %}
         <p><strong>{% trans %}Too young for that product{% endtrans %}</strong></p>
         {% endif %}
@@ -82,16 +72,30 @@
             <input type="hidden" name="action" value="cancel">
             <input type="submit" value="{% trans %}Cancel{% endtrans %}" />
         </form>
-    <div><strong>{% trans %}Products: {% endtrans %}</strong>
-    {% for t in categories %}
-    {% if counter.products.filter(product_type=t).exists() %}
-        <h5>{{ t }}</h5>
-        {% for p in counter.products.filter(product_type=t).all() %}
-        {{ add_product(p.id, p.name) }}
-        {% endfor %}
-    {% endif %}
-    {% endfor %}
     </div>
+    {% if counter.type == 'BAR' %}
+    <h5>{% trans %}Refilling{% endtrans %}</h5>
+    <div>
+        <form method="post" action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
+            {% csrf_token %}
+            {{ refill_form.as_p() }}
+            <input type="hidden" name="action" value="refill">
+            <input type="submit" value="{% trans %}Go{% endtrans %}" />
+        </form>
+    </div>
+    {% endif %}
+</div>
+<div id="products">
+    {% for t in categories -%}
+    {%- if counter.products.filter(product_type=t).exists() -%}
+    <h5>{{ t }}</h5>
+    <div id="cat_{{ t }}">
+        {% for p in counter.products.filter(product_type=t).all() -%}
+            {{ add_product(p.id, "<strong>%s</strong><hr>%s €<br>%s" % (p.name, p.selling_price, p.code)) }}
+        {%- endfor %}
+    </div>
+    {%- endif -%}
+    {%- endfor %}
 </div>
 
 {% endblock %}
@@ -101,13 +105,13 @@
 <script>
 $( function() {
     var products = [
-    {% for p in counter.products.all() %}
+    {% for p in counter.products.all() -%}
         {
             value: "{{ p.code }}",
             label: "{{ p.name }}",
             tags: "{{ p.code }} {{ p.name }}",
         },
-    {% endfor %}
+    {%- endfor %}
     ];
     var quantity = "";
     var search = "";
@@ -133,6 +137,14 @@ $( function() {
         },
     });
 });
+$( function() {
+    $("#bar_ui").accordion({
+        heightStyle: "content",
+        });
+    $("#products").accordion({
+        heightStyle: "content",
+        });
+});
 </script>
 {% endblock %}