Refactor counter-click css

core/static/core/style.scss

@@ -1249,63 +1249,6 @@ u,
   text-decoration: underline;
 }
 
-#bar-ui {
-  padding: 0.4em;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row-reverse;
-
-  .quantity {
-    display: inline-block;
-    min-width: 1.2em;
-    text-align: center;
-  }
-
-  .remove-item {
-    float: right;
-  }
-
-  .basket-error-container {
-    position: relative;
-    display: block
-  }
-
-  .basket-error {
-    z-index: 10; // to get on top of tomselect
-    text-align: center;
-    position: absolute;
-  }
-
-
-  #products {
-    flex-basis: 100%;
-    margin: 0.2em;
-    overflow: auto;
-  }
-
-  #click_form {
-    flex: auto;
-    margin: 0.2em;
-    width: 20%;
-  }
-
-  #user_info {
-    flex: auto;
-    padding: 0.5em;
-    margin: 0.2em;
-    height: 100%;
-    background: $secondary-neutral-light-color;
-
-    img {
-      max-width: 70%;
-    }
-
-    input {
-      background: white;
-    }
-  }
-}
-
 /*-----------------------------USER PROFILE----------------------------*/
 
 .user_mini_profile {

counter/static/bundled/counter/counter-click-index.ts

@@ -146,7 +146,7 @@ exportToHtml("loadCounter", (config: CounterConfig) => {
 $(() => {
   /* Accordion UI between basket and refills */
   // biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
-  ($("#click_form") as any).accordion({
+  ($("#click-form") as any).accordion({
     heightStyle: "content",
     activate: () => $(".focus").focus(),
   });

counter/static/counter/css/counter-click.scss

@@ -0,0 +1,62 @@
+@import "core/static/core/colors";
+
+.quantity {
+  display: inline-block;
+  min-width: 1.2em;
+  text-align: center;
+}
+
+.remove-item {
+  float: right;
+}
+
+.basket-error-container {
+  position: relative;
+  display: block
+}
+
+.basket-error {
+  z-index: 10; // to get on top of tomselect
+  text-align: center;
+  position: absolute;
+}
+
+
+#bar-ui {
+  padding: 0.4em;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+}
+
+#products {
+  flex-basis: 100%;
+  margin: 0.2em;
+  overflow: auto;
+}
+
+#click-form {
+  flex: auto;
+  margin: 0.2em;
+  width: 20%;
+
+  ul {
+    list-style-type: none;
+  }
+}
+
+#user_info {
+  flex: auto;
+  padding: 0.5em;
+  margin: 0.2em;
+  height: 100%;
+  background: $secondary-neutral-light-color;
+
+  img {
+    max-width: 70%;
+  }
+
+  input {
+    background: white;
+  }
+}

counter/templates/counter/counter_click.jinja

@@ -6,6 +6,7 @@
 {% endblock %}
 
 {% block additional_css %}
+  <link rel="stylesheet" type="text/css" href="{{ static('counter/css/counter-click.scss') }}" defer></link>
   <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") }}">
@@ -24,7 +25,7 @@
 {% endblock %}
 
 {% block content %}
-  <h4 id="click_interface">{{ counter }}</h4>
+  <h4>{{ counter }}</h4>
 
   <div id="bar-ui" x-data="counter">
     <noscript>
@@ -43,7 +44,7 @@
       </p>
     </div>
 
-    <div id="click_form">
+    <div id="click-form">
       <h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5>
       <div>
         {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
@@ -92,28 +93,47 @@
           <div x-ref="basketManagementForm">
             {{ form.management_form }}
           </div>
-          <ul x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</ul>
+          <ul>
-          <template x-for="(item, index) in Object.values(basket)">
+            <li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
-            <ul>
+            <template x-for="(item, index) in Object.values(basket)">
-              <template x-for="error in item.errors">
+              <li>
-                <div class="alert alert-red" x-text="error">
+                <template x-for="error in item.errors">
-                </div>
+                  <div class="alert alert-red" x-text="error">
-              </template>
+                  </div>
+                </template>
 
-              <button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
+                <button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
-              <span class="quantity" x-text="item.quantity"></span>
+                <span class="quantity" x-text="item.quantity"></span>
-              <button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
+                <button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
 
-              <span x-text="item.product.name"></span> :
+                <span x-text="item.product.name"></span> :
-              <span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
+                <span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
-              <span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
+                <span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
 
-              <button class="remove-item" @click.prevent="removeFromBasket(item.product.id)"><i class="fa fa-trash-can delete-action"></i></button>
+                <button
+                  class="remove-item"
+                  @click.prevent="removeFromBasket(item.product.id)"
+                ><i class="fa fa-trash-can delete-action"></i></button>
 
-              <input type="hidden" :value="item.quantity" :id="`id_form-${index}-quantity`" :name="`form-${index}-quantity`" required readonly>
+                <input
-              <input type="hidden" :value="item.product.id" :id="`id_form-${index}-id`" :name="`form-${index}-id`" required readonly>
+                  type="hidden"
-            </ul>
+                  :value="item.quantity"
-          </template>
+                  :id="`id_form-${index}-quantity`"
+                  :name="`form-${index}-quantity`"
+                  required
+                  readonly
+                >
+                <input
+                  type="hidden"
+                  :value="item.product.id"
+                  :id="`id_form-${index}-id`"
+                  :name="`form-${index}-id`"
+                  required
+                  readonly
+                >
+              </li>
+            </template>
+          </ul>
 
           <p class="margin-bottom">
             <strong>Total: </strong>
@@ -122,8 +142,18 @@
           </p>
 
           <div class="row">
-            <input class="btn btn-blue" type="submit" @click.prevent="finish" :disabled="getBasketSize() == 0" value="{% trans %}Finish{% endtrans %}"/>
+            <input
-            <input class="btn btn-grey" type="submit" @click.prevent="cancel" value="{% trans %}Cancel{% endtrans %}"/>
+              class="btn btn-blue"
+              type="submit"
+              @click.prevent="finish"
+              :disabled="getBasketSize() === 0"
+              value="{% trans %}Finish{% endtrans %}"
+            />
+            <input
+              class="btn btn-grey"
+              type="submit" @click.prevent="cancel"
+              value="{% trans %}Cancel{% endtrans %}"
+            />
           </div>
         </form>
       </div>