- migliorata grafica prodotti

2023-12-31 14:34:11 +01:00
parent f88ee3f485
commit 29e18ca293
6 changed files with 429 additions and 306 deletions
--- a/src/components/CProductCard/CProductCard.scss
+++ b/src/components/CProductCard/CProductCard.scss
@@ -12,20 +12,25 @@

 .prod_price {
  font-size: 1.25rem;
+  @media (max-width: 718px) {
+    font-size: 1rem;
  }
+}
+

 .prod_disp {
  font-size: 1.2rem;
-  font-size: 1.2rem;
+  @media (max-width: 718px) {
+    font-size: 1rem;
+  }
 }


 .prod_preorder{
  font-size: 1.2rem;
+  @media (max-width: 718px) {
+    font-size: 1rem;
  }
-
-.prod_preorder{
-  font-size: 1.2rem;
 }

 .prod_qtywarn {
@@ -62,3 +67,33 @@
 .subtit_prod {
  font-style: italic;
 }
+
+.icone_prod{
+  font-size: 1.25rem;
+  @media (max-width: 718px) {
+    font-size: 1rem;
+  }
+}
+
+.thumbnail {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.fullscreen-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fullscreen-image {
+  max-width: 100%;
+  max-height: 100%;
+}
+
--- a/src/components/CProductCard/CProductCard.ts
+++ b/src/components/CProductCard/CProductCard.ts
@@ -53,6 +53,8 @@ export default defineComponent({

    const site = ref(globalStore.site)

+    const fullscreenImage = ref(<any>null)
+
    let myorder = reactive(<IOrder>{
      idapp: process.env.APP_ID,
      quantity: 0,
@@ -77,6 +79,12 @@ export default defineComponent({
    const endload = ref(false)
    const myproduct = ref(<IProduct>{})

+    const isFullScreen = ref(false)
+    const imageSrc = ref('URL_DEL_TUO_FILE_IMMAGINE')
+    const startX = ref(0)
+    const startY = ref(0)
+    const scale = ref(1)
+
    const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean) => {
      // console.log('valoriopt', item.table)
      return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
@@ -363,6 +371,41 @@ export default defineComponent({
        return 0
    }

+    function toggleFullScreen() {
+      isFullScreen.value = !isFullScreen.value;
+      scale.value = 1;
+    }
+
+    function onTouchStart(e: any) {
+      startX.value = e.touches[0].pageX;
+      startY.value = e.touches[0].pageY;
+    }
+
+    function onTouchMove(e: any) {
+      const deltaX = e.touches[0].pageX - startX.value;
+      const deltaY = e.touches[0].pageY - startY.value;
+
+      // Calcola la distanza percorsa
+      const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
+
+      // Imposta il fattore di scala in base alla distanza percorsa
+      scale.value = Math.min(Math.max(1, scale.value + distance / 100), 3);
+
+      // Salva le nuove coordinate di partenza
+      startX.value = e.touches[0].pageX;
+      startY.value = e.touches[0].pageY;
+
+      // Applica la trasformazione
+      if (fullscreenImage.value)
+        fullscreenImage.value.style.transform = `scale(${scale.value})`;
+    }
+
+    function onTouchEnd() {
+      // Ripristina la trasformazione quando l'utente solleva il dito
+      if (fullscreenImage.value)
+        fullscreenImage.value.fullscreenImage.style.transform = 'scale(1)';
+    }
+
    onMounted(mounted)
    onBeforeUnmount(beforeDestroy)

@@ -402,6 +445,12 @@ export default defineComponent({
      labelDataArrivoMerce,
      getpercqtaraggiunta,
      isOrdGas,
+      isFullScreen,
+      toggleFullScreen,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+
    }
  }
 })
--- a/src/components/CProductCard/CProductCard.vue
+++ b/src/components/CProductCard/CProductCard.vue
@@ -12,14 +12,13 @@
      v-if="!!myproduct && endload && !!myproduct.productInfo"
      bordered
    >
+      <q-card-section horizontal>
        <q-img
          :src="`` + myproduct.productInfo.img"
          :alt="myproduct.productInfo.name"
-        :class="getclimgproduct()"
+          class="col-7 cursor-pointer"
+          @click="toggleFullScreen"
        ></q-img>
-
-      <q-list>
-        <q-item>
        <q-btn
          v-if="!complete"
          fab
@@ -30,34 +29,18 @@
          :to="`/product/` + myproduct._id + '/' + cosa"
        />

-          <div class="row items-center centeritems">
-            <div class="text-h7 boldhigh">
-              {{ myproduct.productInfo.name }}
-            </div>
-            <div class="product_code">
-              &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
-            </div>
-          </div>
-        </q-item>
-        <q-item v-if="complete && myproduct.productInfo.description">
-          <div class="row items-center">
-            <div class="text-title text-grey-9">
-              <span
-                class="text-grey-7"
-                v-html="myproduct.productInfo.description"
-              ></span>
-            </div>
-          </div>
-        </q-item>
+        <q-card-section>
+          <q-list>
            <q-item>
              <q-item-section avatar>
-            <q-icon color="moneygreen" name="fas fa-euro-sign" />
+                <q-icon
+                  color="moneygreen"
+                  name="fas fa-euro-sign"
+                  class="icone_prod"
+                />
              </q-item-section>

              <q-item-section>
-            <q-item-label class="subtit_prod">
-              {{ t('products.price') }}
-            </q-item-label>
                <q-item-label>
                  <span class="prod_price" v-if="!!myproduct.price">{{
                    myproduct.price ? myproduct.price.toFixed(2) : 0
@@ -67,7 +50,9 @@
                  }}</span>
                </q-item-label>
                <q-item-label
-              v-if="myproduct.scontisticas && myproduct.scontisticas.length > 0"
+                  v-if="
+                    myproduct.scontisticas && myproduct.scontisticas.length > 0
+                  "
                >
                  <div
                    class="prod_sconti"
@@ -78,16 +63,12 @@
                  </div>
                </q-item-label>
              </q-item-section>
+            </q-item>
+            <q-item>
              <q-item-section avatar v-if="myproduct.productInfo.weight">
-            <q-icon
-              name="fas fa-balance-scale"
-              style="padding-right: 16px !important"
-            />
+                <q-icon name="fas fa-balance-scale" class="icone_prod" />
              </q-item-section>
              <q-item-section v-if="myproduct.productInfo.weight">
-            <q-item-label>
-              {{ t('products.weight') }}
-            </q-item-label>
                <q-item-label>
                  <span
                    class="text-black q-ml-xs text-h8"
@@ -101,6 +82,233 @@
                </q-item-label>
              </q-item-section>
            </q-item>
+            <q-item
+              v-if="
+                cosa === shared_consts.PROD.BOTTEGA ||
+                (cosa === shared_consts.PROD.GAS &&
+                  products.getQtyAvailable(myproduct) > 0)
+              "
+              :clickable="tools.isManager()"
+              @click="
+                tools.isManager() &&
+                myproduct.QuantitaOrdinateInAttesa &&
+                myproduct.QuantitaOrdinateInAttesa > 0
+                  ? visuListDisponibili()
+                  : null
+              "
+            >
+              <q-item-section avatar>
+                <q-icon color="green" name="fas fa-store" class="icone_prod" />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label class="subtit_prod">
+                  {{ t('ecomm.available') }}
+                </q-item-label>
+                <q-item-label>
+                  <span class="prod_disp">
+                    {{ products.getQtyAvailable(myproduct) }}
+                  </span>
+                  <div class="prod_qtywarn">
+                    <div
+                      v-if="
+                        tools.isManager() &&
+                        !!myproduct.QuantitaOrdinateInAttesa
+                      "
+                    >
+                      {{
+                        t('ecomm.qta_in_attesa', {
+                          qty: myproduct.QuantitaOrdinateInAttesa,
+                        })
+                      }}
+                    </div>
+                  </div>
+                </q-item-label>
+              </q-item-section>
+              <q-item-section
+                v-if="
+                  tools.isManager() &&
+                  products.getQtyBloccataAvailable(myproduct) > 0
+                "
+              >
+                <q-item-section avatar>
+                  <q-icon
+                    name="fas fa-store"
+                    style="padding-right: 16px !important"
+                  />
+                </q-item-section>
+                <q-item-section
+                  v-if="
+                    tools.isManager() &&
+                    products.getQtyBloccataAvailable(myproduct) > 0
+                  "
+                >
+                  <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
+                  <q-item-label>
+                    <span class="text-black q-ml-xs text-h8">
+                      {{ products.getQtyBloccataAvailable(myproduct) }}</span
+                    >
+                  </q-item-label>
+                </q-item-section>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+      </q-card-section>
+      <q-card-section>
+        <div class="column items-center centeritems">
+          <div class="text-h7 boldhigh">
+            {{ myproduct.productInfo.name }}
+          </div>
+          <div class="product_code">
+            &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-section v-if="complete && myproduct.productInfo.description">
+        <div class="row items-center">
+          <div class="text-title text-grey-9">
+            <span
+              class="text-grey-7"
+              v-html="myproduct.productInfo.description"
+            ></span>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-section v-if="complete || getnumstore() > 1">
+        <div class="text-blue text-title row items-center q-mr-md centeritems">
+          <q-icon size="sm" name="fas fa-people-carry" class="q-mr-sm" />
+          {{ t('products.ritiro_presso') }}:
+        </div>
+        <div
+          class="text-green-6 text-title row items-center q-my-sm centeritems"
+        >
+          <div v-if="getnumstore() > 1">
+            <q-select
+              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
+              outlined
+              v-model="storeSelected"
+              :options="getStorehouses()"
+              :label="t('products.magazzino') + `:`"
+              emit-value
+              map-options
+            >
+            </q-select>
+          </div>
+          <div v-else>
+            <span class="text-title text-center">{{
+              getSingleStorehouse()
+            }}</span>
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-section
+        v-if="complete && myproduct.producer && myproduct.producer.city"
+      >
+        <div>
+          <div class="text-grey text-title row items-center q-mt-sm">
+            <q-icon name="map" class="q-mr-xs" />
+            {{ t('products.origine') }}:
+            <span class="text-blue q-ml-xs text-h8">
+              {{ myproduct.producer.city }} ({{
+                myproduct.producer.region
+              }})</span
+            >
+          </div>
+        </div>
+        <div
+          v-if="complete && myproduct.producer && myproduct.producer.name"
+          class="text-grey text-title row items-center"
+        >
+          <q-icon name="place" class="q-mr-xs" />
+          {{ t('products.producer') }}:
+          <span class="text-black q-ml-xs text-h8">
+            {{ myproduct.producer.name }}</span
+          >
+        </div>
+      </q-card-section>
+
+      <q-card-section v-if="myproduct.note">
+        <q-item>
+          <q-item-section avatar>
+            <q-icon color="black" name="fas fa-book" />
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label class="">
+              <span v-html="myproduct.note"></span>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-card-section>
+      <q-card-section v-if="isOrdGas()">
+        <q-item
+          v-if="
+            products.getQtyBookableAvailable(myproduct) > 0 ||
+            myproduct.maxbookableGASQty > 0
+          "
+          :clickable="tools.isManager()"
+          @click="
+            tools.isManager() &&
+            myproduct.QuantitaPrenotateInAttesa &&
+            myproduct.QuantitaPrenotateInAttesa > 0
+              ? visuListBookable()
+              : null
+          "
+        >
+          <q-item-section avatar>
+            <q-icon color="blue" name="fas fa-edit" />
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label class="subtit_prod">
+              {{ t('ecomm.preorders') }}
+            </q-item-label>
+            <q-item-label>
+              <span class="prod_preorder">
+                {{ products.getQtyBookableAvailable(myproduct) }}
+              </span>
+              <div class="prod_qtywarn">
+                <div
+                  v-if="
+                    tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
+                  "
+                >
+                  {{
+                    t('ecomm.qta_prenotate_in_attesa', {
+                      qty: myproduct.QuantitaPrenotateInAttesa,
+                    })
+                  }}
+                </div>
+              </div>
+            </q-item-label>
+          </q-item-section>
+          <q-item-section
+            v-if="
+              tools.isManager() &&
+              products.getQtyBloccataBookableAvailable(myproduct) > 0
+            "
+          >
+            <q-item-section avatar>
+              <q-icon
+                name="fas fa-store"
+                style="padding-right: 16px !important"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="subtit_prod">
+                {{ t('ecomm.bloccati') }}:
+              </q-item-label>
+              <q-item-label>
+                <span class="text-black q-ml-xs text-h8">
+                  {{
+                    products.getQtyBloccataBookableAvailable(myproduct)
+                  }}</span
+                >
+              </q-item-label>
+            </q-item-section>
+          </q-item-section>
+        </q-item>
        <q-item v-if="myproduct.gasordines && myproduct.gasordines.length >= 1">
          <q-item-section avatar>
            <q-icon color="blue" name="fas fa-shipping-fast" />
@@ -136,22 +344,13 @@
            </q-item-label>
          </q-item-section>
        </q-item>
-        <q-item v-if="myproduct.note">
-          <q-item-section avatar>
-            <q-icon color="black" name="fas fa-book" />
-          </q-item-section>

-          <q-item-section>
-            <q-item-label class="">
-              <span v-html="myproduct.note"></span>
-            </q-item-label>
-          </q-item-section>
-          <q-item-section
+        <q-item
          v-if="
-              tools.isManager() &&
-              products.getQtyBloccataAvailable(myproduct) > 0
+            tools.isManager() && products.getQtyBloccataAvailable(myproduct) > 0
          "
        >
+          <q-item-section>
            <q-item-section avatar>
              <q-icon
                name="fas fa-store"
@@ -292,202 +491,12 @@
            </q-item-label>
          </q-item-section>
        </q-item>
-      </q-list>
-      <div v-if="true">
-        <div v-if="complete && myproduct.producer && myproduct.producer.city">
-          <div class="text-grey text-title row items-center q-mt-sm">
-            <q-icon name="map" class="q-mr-xs" />
-            {{ t('products.origine') }}:
-            <span class="text-blue q-ml-xs text-h8">
-              {{ myproduct.producer.city }} ({{
-                myproduct.producer.region
-              }})</span
-            >
-          </div>
-        </div>
-        <div
-          v-if="complete && myproduct.producer && myproduct.producer.name"
-          class="text-grey text-title row items-center"
-        >
-          <q-icon name="place" class="q-mr-xs" />
-          {{ t('products.producer') }}:
-          <span class="text-black q-ml-xs text-h8">
-            {{ myproduct.producer.name }}</span
-          >
-        </div>
-      </div>
+      </q-card-section>

-      <!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->
+      <q-separator />

-      <div>
-        <q-list>
-          <q-item
-            v-if="
-              cosa === shared_consts.PROD.BOTTEGA ||
-              (cosa === shared_consts.PROD.GAS &&
-                products.getQtyAvailable(myproduct) > 0)
-            "
-            :clickable="tools.isManager()"
-            @click="
-              tools.isManager() &&
-              myproduct.QuantitaOrdinateInAttesa &&
-              myproduct.QuantitaOrdinateInAttesa > 0
-                ? visuListDisponibili()
-                : null
-            "
-          >
-            <q-item-section avatar>
-              <q-icon color="green" name="fas fa-store" />
-            </q-item-section>
-
-            <q-item-section>
-              <q-item-label class="subtit_prod">
-                {{ t('ecomm.available') }}
-              </q-item-label>
-              <q-item-label>
-                <span class="prod_disp">
-                  {{ products.getQtyAvailable(myproduct) }}
-                </span>
-                <div class="prod_qtywarn">
-                  <div
-                    v-if="
-                      tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
-                    "
-                  >
-                    {{
-                      t('ecomm.qta_in_attesa', {
-                        qty: myproduct.QuantitaOrdinateInAttesa,
-                      })
-                    }}
-                  </div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-            <q-item-section
-              v-if="
-                tools.isManager() &&
-                products.getQtyBloccataAvailable(myproduct) > 0
-              "
-            >
-              <q-item-section avatar>
-                <q-icon
-                  name="fas fa-store"
-                  style="padding-right: 16px !important"
-                />
-              </q-item-section>
-              <q-item-section
-                v-if="
-                  tools.isManager() &&
-                  products.getQtyBloccataAvailable(myproduct) > 0
-                "
-              >
-                <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
-                <q-item-label>
-                  <span class="text-black q-ml-xs text-h8">
-                    {{ products.getQtyBloccataAvailable(myproduct) }}</span
-                  >
-                </q-item-label>
-              </q-item-section>
-            </q-item-section>
-          </q-item>
-          <q-item
-            v-if="
-              products.getQtyBookableAvailable(myproduct) > 0 ||
-              myproduct.maxbookableGASQty > 0
-            "
-            :clickable="tools.isManager()"
-            @click="
-              tools.isManager() &&
-              myproduct.QuantitaPrenotateInAttesa &&
-              myproduct.QuantitaPrenotateInAttesa > 0
-                ? visuListBookable()
-                : null
-            "
-          >
-            <q-item-section avatar>
-              <q-icon color="blue" name="fas fa-edit" />
-            </q-item-section>
-
-            <q-item-section>
-              <q-item-label class="subtit_prod">
-                {{ t('ecomm.preorders') }}
-              </q-item-label>
-              <q-item-label>
-                <span class="prod_preorder">
-                  {{ products.getQtyBookableAvailable(myproduct) }}
-                </span>
-                <div class="prod_qtywarn">
-                  <div
-                    v-if="
-                      tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
-                    "
-                  >
-                    {{
-                      t('ecomm.qta_prenotate_in_attesa', {
-                        qty: myproduct.QuantitaPrenotateInAttesa,
-                      })
-                    }}
-                  </div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-            <q-item-section
-              v-if="
-                tools.isManager() &&
-                products.getQtyBloccataBookableAvailable(myproduct) > 0
-              "
-            >
-              <q-item-section avatar>
-                <q-icon
-                  name="fas fa-store"
-                  style="padding-right: 16px !important"
-                />
-              </q-item-section>
-              <q-item-section>
-                <q-item-label class="subtit_prod">
-                  {{ t('ecomm.bloccati') }}:
-                </q-item-label>
-                <q-item-label>
-                  <span class="text-black q-ml-xs text-h8">
-                    {{
-                      products.getQtyBloccataBookableAvailable(myproduct)
-                    }}</span
-                  >
-                </q-item-label>
-              </q-item-section>
-            </q-item-section>
-          </q-item>
-        </q-list>
-        <div v-if="complete || getnumstore() > 1">
-          <div
-            class="text-blue text-title row items-center q-mr-md centeritems"
-          >
-            <q-icon size="sm" name="fas fa-people-carry" class="q-mr-sm" />
-            {{ t('products.ritiro_presso') }}:
-          </div>
-          <div
-            class="text-green-6 text-title row items-center q-my-sm centeritems"
-          >
-            <div v-if="getnumstore() > 1">
-              <q-select
-                :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
-                outlined
-                v-model="storeSelected"
-                :options="getStorehouses()"
-                :label="t('products.magazzino') + `:`"
-                emit-value
-                map-options
-              >
-              </q-select>
-            </div>
-            <div v-else>
-              <span class="text-title text-center">{{
-                getSingleStorehouse()
-              }}</span>
-            </div>
-          </div>
-        </div>
-        <div class="row q-mb-sm no-wrap items-center centeritems">
+      <q-card-section>
+        <div class="row justify-evenly">
          <q-btn
            icon="fas fa-cart-arrow-down"
            :color="products.enableSubQty(myorder) ? 'negative' : 'grey'"
@@ -527,25 +536,19 @@
            @click="addtoCart(true)"
          >
          </q-btn>
-        </div>
-
-        <q-card-actions vertical align="center">
          <q-btn
            v-if="myorder.quantity + myorder.quantitypreordered > 0"
            rounded
            icon="fas fa-shopping-cart"
            color="primary"
            :label="t('ecomm.btn_cassa')"
-            class="q-mb-sm"
+            class="q-mb-xs q-mt-md"
            to="/checkout"
          ></q-btn>
-          <!--
-      <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
-      </q-btn>
-      -->
-        </q-card-actions>
        </div>
+      </q-card-section>
    </q-card>
+
    <q-dialog v-model="openlistorders">
      <q-card class="dialog_card">
        <q-toolbar class="bg-primary text-white">
@@ -581,9 +584,9 @@
                  </div>
                </td>
                <td class="text-center">
-                  <strong
-                    >{{ ordcart.user.name }} {{ ordcart.user.surname }}</strong
-                  >
+                  <strong>{{
+                    tools.getNomeUtenteEUsernameByRecUser(ordcart.user)
+                  }}</strong>
                </td>
                <td class="text-center">
                  <strong>{{
@@ -628,6 +631,41 @@
        </q-card-section>
      </q-card>
    </q-dialog>
+
+    <q-dialog
+      v-model="isFullScreen"
+      position="top"
+      :maximized="true"
+      class="q-pt-none"
+    >
+      <div
+        v-if="isFullScreen"
+        class="fullscreen-container"
+        @touchmove.prevent
+        @click="toggleFullScreen"
+      >
+        <img
+          :src="`` + myproduct.productInfo.img"
+          :alt="myproduct.productInfo.name"
+          class="fullscreen-image"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+          ref="fullscreenImage"
+        />
+        <br />
+      </div>
+      <div class="text-center">
+        <q-btn
+          class="q-ma-md"
+          @click="isFullScreen = false"
+          label="Chiudi"
+          rounded
+          color="primary"
+          icon="close"
+        ></q-btn>
+      </div>
+    </q-dialog>
  </div>
 </template>

--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -355,9 +355,9 @@ h3 {

 .myimgproduct{
  max-width: 100%;
-  height: 500px;
-  @media (max-width: 718px) {
  height: 300px;
+  @media (max-width: 718px) {
+    height: 250px;
  }
 }

--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -1674,7 +1674,7 @@ const msg_it = {
      ord_not_confirmed: 'E\' avvenuto un errore. Ordine non Confermato. Ricaricare la pagina e riprovare.',
      btn_cassa: 'Procedi all\'Ordine',
      btn_ordini: 'I tuoi Ordini',
-      available: 'Disponibili',
+      available: 'Disponib.',
      preorders: 'Quantità Massima Pre-Ordinabili',
      preord: 'Pre-Ordinate',
      di_cui_x_in_carrello: '(nel tuo carrello: {qty})',
--- a/src/views/ecommerce/productsList/productsList.vue
+++ b/src/views/ecommerce/productsList/productsList.vue
@@ -9,7 +9,7 @@
          <q-btn-toggle
            v-model="cosa"
            push
-            size="0.75rem"
+            :size="tools.isMobile() ? '0.75rem' : '1rem'"
            rounded
            glossy
            dense
@@ -59,6 +59,7 @@
          <q-input
            filled
            stack-label
+            :dense="tools.isMobile() ? true : false"
            :label="t('ecomm.code_o_text_search')"
            v-model="search"
            class="q-ml-md"
@@ -73,7 +74,7 @@
            <q-btn
              :push="cat === reccat.value"
              dense
-              size="0.70rem"
+              :size="tools.isMobile() ? '0.70rem' : '1rem'"
              :icon="reccat.icon"
              :color="reccat.color ? reccat.color : undefined"
              :text-color="cat === reccat.value ? 'blue' : 'black'"
@@ -92,9 +93,9 @@
            })
          }}{{}}
        </div>
-        <div class="row">
+        <div class="row justify-around">
          <div
-            class="q-pa-md row items-start q-gutter-md"
+            class="q-pa-md row items-start"
            v-for="(product, index) in getArrProducts"
            :key="index"
          >