From c37288c2856c215069fdb77e1a9e92dfbb48300d Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sat, 21 Dec 2024 20:38:09 +0100
Subject: [PATCH] Display nice product cards on counter click interface

---
 core/static/core/style.scss                   |  6 ++++
 counter/templates/counter/counter_click.jinja | 33 +++++++++++--------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 61eb71e0..d413b656 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -208,6 +208,7 @@ body {
   a.btn {
     display: inline-block;
   }
+
   .btn {
     font-size: 15px;
     font-weight: normal;
@@ -431,12 +432,17 @@ body {
     flex-wrap: wrap;
 
     $col-gap: 1rem;
+    $row-gap: 0.5rem;
+
     &.gap {
       column-gap: var($col-gap);
+      row-gap: var($row-gap);
     }
+
     @for $i from 2 through 5 {
       &.gap-#{$i}x {
         column-gap: $i * $col-gap;
+        row-gap: $i * $row-gap;
       }
     }
   }
diff --git a/counter/templates/counter/counter_click.jinja b/counter/templates/counter/counter_click.jinja
index b535952e..96a4b0e2 100644
--- a/counter/templates/counter/counter_click.jinja
+++ b/counter/templates/counter/counter_click.jinja
@@ -8,6 +8,7 @@
 {% block additional_css %}
   <link rel="stylesheet" type="text/css" href="{{ static('bundled/core/components/ajax-select-index.css') }}" defer></link>
   <link rel="stylesheet" type="text/css" href="{{ static('core/components/ajax-select.scss') }}" defer></link>
+  <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
 {% endblock %}
 
 {% block additional_js %}
@@ -104,7 +105,7 @@
             </ul>
           </template>
 
-          <p>
+          <p class="margin-bottom">
             <strong>Total: </strong>
             <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
             <strong> €</strong>
@@ -153,18 +154,24 @@
       </ul>
       {% for category in categories.keys() -%}
         <div id="cat_{{ category|slugify }}">
-          <h5>{{ category }}</h5>
-          {% for product in categories[category] -%}
-            <button @click="addToBasket('{{ product.id }}', 1)">
-              <strong>{{ product.name }}</strong>
-              {% if product.icon %}
-                <img src="{{ product.icon.url }}" alt="image de {{ product.name }}"/>
-              {% else %}
-                <img src="{{ static('core/img/na.gif') }}" alt="image de {{ product.name }}"/>
-              {% endif %}
-              <span>{{ product.price }} €<br>{{ product.code }}</span>
-            </button>
-          {%- endfor %}
+          <h5 class="margin-bottom">{{ category }}</h5>
+          <div class="row gap-2x">
+            {% for product in categories[category] -%}
+              <button class="card shadow" @click="addToBasket('{{ product.id }}', 1)">
+                <strong class="card-title">{{ product.name }}</strong>
+                <img
+                  class="card-image"
+                  alt="image de {{ product.name }}"
+                  {% if product.icon %}
+                    src="{{ product.icon.url }}"
+                  {% else %}
+                    src="{{ static('core/img/na.gif') }}"
+                  {% endif %}
+                />
+                <span class="card-content">{{ product.price }} €<br>{{ product.code }}</span>
+              </button>
+            {%- endfor %}
+          </div>
         </div>
       {%- endfor %}
     </div>