- migliorata grafica prodotti

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 {
@@ -61,4 +66,34 @@
 
 .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%;
+}
+

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,
+
     }
   }
 })

src/components/CProductCard/CProductCard.vue

@@ -12,93 +12,301 @@
       v-if="!!myproduct && endload && !!myproduct.productInfo"
       bordered
     >
-      <q-img
+      <q-card-section horizontal>
-        :src="`` + myproduct.productInfo.img"
+        <q-img
-        :alt="myproduct.productInfo.name"
+          :src="`` + myproduct.productInfo.img"
-        :class="getclimgproduct()"
+          :alt="myproduct.productInfo.name"
-      ></q-img>
+          class="col-7 cursor-pointer"
+          @click="toggleFullScreen"
+        ></q-img>
+        <q-btn
+          v-if="!complete"
+          fab
+          color="primary"
+          icon="fas fa-info"
+          class="absolute semi-transparent"
+          style="top: 0; right: 12px; transform: translateY(-90%)"
+          :to="`/product/` + myproduct._id + '/' + cosa"
+        />
 
-      <q-list>
+        <q-card-section>
-        <q-item>
+          <q-list>
-          <q-btn
+            <q-item>
-            v-if="!complete"
+              <q-item-section avatar>
-            fab
+                <q-icon
-            color="primary"
+                  color="moneygreen"
-            icon="fas fa-info"
+                  name="fas fa-euro-sign"
-            class="absolute semi-transparent"
+                  class="icone_prod"
-            style="top: 0; right: 12px; transform: translateY(-90%)"
+                />
-            :to="`/product/` + myproduct._id + '/' + cosa"
+              </q-item-section>
-          />
 
-          <div class="row items-center centeritems">
+              <q-item-section>
-            <div class="text-h7 boldhigh">
+                <q-item-label>
-              {{ myproduct.productInfo.name }}
+                  <span class="prod_price" v-if="!!myproduct.price">{{
-            </div>
+                    myproduct.price ? myproduct.price.toFixed(2) : 0
-            <div class="product_code">
+                  }}</span>
-              &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
+                  <span v-if="!!myproduct.after_price">{{
-            </div>
+                    myproduct.after_price
+                  }}</span>
+                </q-item-label>
+                <q-item-label
+                  v-if="
+                    myproduct.scontisticas && myproduct.scontisticas.length > 0
+                  "
+                >
+                  <div
+                    class="prod_sconti"
+                    v-for="(sconti, index) of myproduct.scontisticas"
+                    :key="index"
+                  >
+                    {{ sconti.description }}
+                  </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" class="icone_prod" />
+              </q-item-section>
+              <q-item-section v-if="myproduct.productInfo.weight">
+                <q-item-label>
+                  <span
+                    class="text-black q-ml-xs text-h8"
+                    v-if="myproduct.productInfo.unit"
+                  >
+                    {{ myproduct.productInfo.weight }}
+                    {{
+                      tools.getUnitsMeasure(myproduct.productInfo.unit, true)
+                    }}</span
+                  >
+                </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>
-        </q-item>
+          <div class="product_code">
-        <q-item v-if="complete && myproduct.productInfo.description">
+            &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
-          <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>
+        </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="moneygreen" name="fas fa-euro-sign" />
+            <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('products.price') }}
+              {{ t('ecomm.preorders') }}
             </q-item-label>
             <q-item-label>
-              <span class="prod_price" v-if="!!myproduct.price">{{
+              <span class="prod_preorder">
-                myproduct.price ? myproduct.price.toFixed(2) : 0
+                {{ products.getQtyBookableAvailable(myproduct) }}
-              }}</span>
+              </span>
-              <span v-if="!!myproduct.after_price">{{
+              <div class="prod_qtywarn">
-                myproduct.after_price
+                <div
-              }}</span>
+                  v-if="
-            </q-item-label>
+                    tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
-            <q-item-label
+                  "
-              v-if="myproduct.scontisticas && myproduct.scontisticas.length > 0"
+                >
-            >
+                  {{
-              <div
+                    t('ecomm.qta_prenotate_in_attesa', {
-                class="prod_sconti"
+                      qty: myproduct.QuantitaPrenotateInAttesa,
-                v-for="(sconti, index) of myproduct.scontisticas"
+                    })
-                :key="index"
+                  }}
-              >
+                </div>
-                {{ sconti.description }}
               </div>
             </q-item-label>
           </q-item-section>
-          <q-item-section avatar v-if="myproduct.productInfo.weight">
+          <q-item-section
-            <q-icon
+            v-if="
-              name="fas fa-balance-scale"
+              tools.isManager() &&
-              style="padding-right: 16px !important"
+              products.getQtyBloccataBookableAvailable(myproduct) > 0
-            />
+            "
-          </q-item-section>
+          >
-          <q-item-section v-if="myproduct.productInfo.weight">
+            <q-item-section avatar>
-            <q-item-label>
+              <q-icon
-              {{ t('products.weight') }}
+                name="fas fa-store"
-            </q-item-label>
+                style="padding-right: 16px !important"
-            <q-item-label>
+              />
-              <span
+            </q-item-section>
-                class="text-black q-ml-xs text-h8"
+            <q-item-section>
-                v-if="myproduct.productInfo.unit"
+              <q-item-label class="subtit_prod">
-              >
+                {{ t('ecomm.bloccati') }}:
-                {{ myproduct.productInfo.weight }}
+              </q-item-label>
-                {{
+              <q-item-label>
-                  tools.getUnitsMeasure(myproduct.productInfo.unit, true)
+                <span class="text-black q-ml-xs text-h8">
-                }}</span
+                  {{
-              >
+                    products.getQtyBloccataBookableAvailable(myproduct)
-            </q-item-label>
+                  }}</span
+                >
+              </q-item-label>
+            </q-item-section>
           </q-item-section>
         </q-item>
         <q-item v-if="myproduct.gasordines && myproduct.gasordines.length >= 1">
@@ -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
+          v-if="
+            tools.isManager() && products.getQtyBloccataAvailable(myproduct) > 0
+          "
+        >
           <q-item-section>
-            <q-item-label class="">
-              <span v-html="myproduct.note"></span>
-            </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"
@@ -292,202 +491,12 @@
             </q-item-label>
           </q-item-section>
         </q-item>
-      </q-list>
+      </q-card-section>
-      <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-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->
+      <q-separator />
 
-      <div>
+      <q-card-section>
-        <q-list>
+        <div class="row justify-evenly">
-          <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-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>
-          <!--
+        </div>
-      <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
+      </q-card-section>
-      </q-btn>
-      -->
-        </q-card-actions>
-      </div>
     </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
+                  <strong>{{
-                    >{{ ordcart.user.name }} {{ ordcart.user.surname }}</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>
 

src/css/app.scss

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

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})',

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"
           >