From aab093200b51217598640eabbe193f29fe07cd9d Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Sat, 14 Dec 2024 00:36:12 +0100
Subject: [PATCH] slightly improve style

---
 core/static/core/style.scss                  | 14 ++++++++
 core/templates/core/macros.jinja             |  2 +-
 counter/templates/counter/product_list.jinja | 35 ++++++++++----------
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 88bb6cd2..e094e215 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -19,6 +19,13 @@ body {
   --loading-stroke: 5px;
   --loading-duration: 1s;
   position: relative;
+
+  &.aria-busy-grow {
+    // Make sure the element take enough place to hold the loading wheel
+    min-height: calc((var(--loading-size)) * 1.5);
+    min-width: calc((var(--loading-size)) * 1.5);
+    overflow: hidden;
+  }
 }
 
 [aria-busy]:after {
@@ -255,6 +262,13 @@ body {
     }
   }
 
+  /**
+  * A spacer below an element. Somewhat cleaner than putting <br/> everywhere.
+  */
+  .margin-bottom {
+    margin-bottom: 1.5rem;
+  }
+
   /*--------------------------------CONTENT------------------------------*/
   #quick_notif {
     width: 100%;
diff --git a/core/templates/core/macros.jinja b/core/templates/core/macros.jinja
index 6ab52cad..e624e87a 100644
--- a/core/templates/core/macros.jinja
+++ b/core/templates/core/macros.jinja
@@ -140,7 +140,7 @@
         nb_page (str): call to a javascript function or variable returning
             the maximum number of pages to paginate
     #}
-  <nav class="pagination" x-show="{{ nb_pages }} > 1">
+  <nav class="pagination" x-show="{{ nb_pages }} > 1" x-cloak>
       {# Adding the prevent here is important, because otherwise,
       clicking on the pagination buttons could submit the picture management form
       and reload the page #}
diff --git a/counter/templates/counter/product_list.jinja b/counter/templates/counter/product_list.jinja
index 5b2074e8..b713693c 100644
--- a/counter/templates/counter/product_list.jinja
+++ b/counter/templates/counter/product_list.jinja
@@ -11,8 +11,8 @@
 
 {% block content %}
   <main x-data="productList">
-    <form id="search-form">
-      <h4>{% trans %}Filter products{% endtrans %}</h4>
+    <form id="search-form" class="margin-bottom">
+      <h4 class="margin-bottom">{% trans %}Filter products{% endtrans %}</h4>
       <fieldset>
         <label for="search-input">{% trans %}Product name{% endtrans %}</label>
         <input
@@ -37,9 +37,11 @@
         </div>
       </fieldset>
     </form>
-    <h3 @click="console.log(totalCount, nbPages())">{% trans %}Product list{% endtrans %}</h3>
+    <h3 @click="console.log(totalCount, nbPages())" class="margin-bottom">
+      {% trans %}Product list{% endtrans %}
+    </h3>
 
-    <div class="row">
+    <div class="row margin-bottom">
       <a href="{{ url('counter:new_product') }}" class="btn btn-blue">
         {% trans %}New product{% endtrans %} <i class="fa fa-plus"></i>
       </a>
@@ -52,20 +54,19 @@
         {% trans %}Download as cvs{% endtrans %} <i class="fa fa-file-arrow-down"></i>
       </button>
     </div>
-    <template x-if="loading">
-      <section :aria-busy="loading"></section>
-    </template>
 
-    <template x-for="[category, cat_products] of Object.entries(products)" :key="category">
-      <section>
-        <h4 x-text="category"></h4>
-        <ul>
-          <template x-for="p in cat_products" :key="p.id">
-            <li><a :href="p.url" x-text="`${p.name} (${p.code})`"></a></li>
-          </template>
-        </ul>
-      </section>
-    </template>
+    <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>
+            <template x-for="p in cat_products" :key="p.id">
+              <li><a :href="p.url" x-text="`${p.name} (${p.code})`"></a></li>
+            </template>
+          </ul>
+        </section>
+      </template>
       {{ paginate_alpine("page", "nbPages") }}
+    </div>
   </main>
 {% endblock %}