From 8f8eef41079f8e9e5f0a8756979dd284bf6b81b2 Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Sat, 14 Dec 2024 02:45:11 +0100
Subject: [PATCH] display products as cards

---
 counter/static/counter/css/admin.scss        | 11 +++++++++
 counter/templates/counter/product_list.jinja | 25 ++++++++++++++++----
 2 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 counter/static/counter/css/admin.scss

diff --git a/counter/static/counter/css/admin.scss b/counter/static/counter/css/admin.scss
new file mode 100644
index 00000000..b5022819
--- /dev/null
+++ b/counter/static/counter/css/admin.scss
@@ -0,0 +1,11 @@
+.product-group {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 30px;
+
+  @media screen and (min-width: 768px) {
+    max-width: 50%;
+  }
+}
+
diff --git a/counter/templates/counter/product_list.jinja b/counter/templates/counter/product_list.jinja
index b713693c..99ab4cf2 100644
--- a/counter/templates/counter/product_list.jinja
+++ b/counter/templates/counter/product_list.jinja
@@ -9,6 +9,11 @@
   <script type="module" src="{{ static("bundled/counter/product-list-index.ts") }}"></script>
 {% endblock %}
 
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static("core/components/card.scss") }}">
+  <link rel="stylesheet" href="{{ static("counter/css/admin.scss") }}">
+{% endblock %}
+
 {% block content %}
   <main x-data="productList">
     <form id="search-form" class="margin-bottom">
@@ -58,12 +63,24 @@
     <div class="aria-busy-grow" :aria-busy="loading">
       <template x-for="[category, cat_products] of Object.entries(products)" :key="category">
         <section>
-          <h4 x-text="category"></h4>
-          <ul>
+          <h4 x-text="category" class="margin-bottom"></h4>
+          <div  class="product-group">
+
             <template x-for="p in cat_products" :key="p.id">
-              <li><a :href="p.url" x-text="`${p.name} (${p.code})`"></a></li>
+              <a class="card card-row shadow clickable" :href="p.url">
+                <template x-if="p.icon">
+                  <img class="card-image" :src="p.icon" :alt="`icon ${p.name}`">
+                </template>
+                <template x-if="!p.icon">
+                  <i class="fa-regular fa-image fa-2x card-image"></i>
+                </template>
+                <span class="card-content">
+                  <strong class="card-title" x-text="`${p.name} (${p.code})`"></strong>
+                  <p x-text="`${p.selling_price} €`"></p>
+                </span>
+              </a>
             </template>
-          </ul>
+          </div>
         </section>
       </template>
       {{ paginate_alpine("page", "nbPages") }}