- migliorie grafiche

src/views/ecommerce/productsList/productsList.vue

@@ -1,15 +1,18 @@
 <template>
   <q-page>
-    <q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
+    <div class="text-center">
+      <q-spinner v-if="!loadpage" color="primary" size="3em" :thickness="2" />
+    </div>
     <div v-if="loadpage" class="panel">
       <div>
-        <div class="q-gutter-md text-center q-mb-md">
+        <div class="text-center">
           <q-btn-toggle
             v-model="cosa"
             push
-            :size="cosa === 0 ? 'lg' : 'md'"
+            size="0.75rem"
             rounded
             glossy
+            dense
             toggle-color="purple"
             :options="[
               { value: shared_consts.PROD.BOTTEGA, slot: 'bottega' },
@@ -21,7 +24,11 @@
                 <div class="text-center">
                   {{ t('gas.ordina_sul_gas') }}
                   <br />
-                  {{ t('gas.x_prodotti_gas', { qta: productStore.getNumQtaGas() }) }}
+                  {{
+                    t('gas.x_prodotti_gas', {
+                      qta: productStore.getNumQtaGas(),
+                    })
+                  }}
                 </div>
                 <q-icon right name="fas fa-user-friends" />
               </div>
@@ -33,7 +40,9 @@
                   {{ t('gas.bottega') }}
                   <br />
                   {{
-                    t('gas.x_prodotti_bottega', { qta: productStore.getNumQtaBottega() })
+                    t('gas.x_prodotti_bottega', {
+                      qta: productStore.getNumQtaBottega(),
+                    })
                   }}
                 </div>
                 <q-icon right name="fas fa-store" />
@@ -44,11 +53,11 @@
       </div>
       <div class="container">
         <div
-          class="q-gutter-y-md column text-center q-mx-auto q-py-sm"
+          class="q-gutter-y-md column text-center q-mx-auto q-py-sm q-mb-sm"
           style="width: 350px; max-width: 100%"
         >
           <q-input
-            filledd
+            filled
             stack-label
             :label="t('ecomm.code_o_text_search')"
             v-model="search"
@@ -59,16 +68,16 @@
             </template>
           </q-input>
         </div>
-        <div class="row q-gutter-sm justify-evenly q-mx-auto">
+        <div class="row q-gutter-xs justify-center q-mx-auto">
           <div v-for="(reccat, index) in getCatProds()" :key="index">
             <q-btn
               :push="cat === reccat.value"
-              :dense="cat !== reccat.value"
+              dense
+              size="0.70rem"
               :icon="reccat.icon"
               :color="reccat.color ? reccat.color : undefined"
               :text-color="cat === reccat.value ? 'blue' : 'black'"
               rounded
-              glossy
               :label="reccat.label"
               @click="cat = reccat.value"
             >