- Card

_ALL_SITES/riso.app/db/lang/ws_it.js

@@ -127,6 +127,7 @@ const msg_website_it = {
     keywords: 'Parole Chiave',
     desctiption: 'Descrizione',
     heightimg: 'Altezza Immagine',
+    heightcarousel: 'Altezza Carosello',
   },
   msg: {
     myAppName: 'Riso',

src/common/shared_vuejs.ts

@@ -1671,7 +1671,7 @@ export const shared_consts = {
     },
     {
       value: 400,
-      label: 'Griglia Tabelle',
+      label: 'Visualizzatore Tabelle',
     },
   ],
 

src/components/CGridOriz/CGridOriz.ts

@@ -51,6 +51,11 @@ export default defineComponent({
       required: false,
       default: true,
     },
+    heightcarousel: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   components: {
     CMyFieldDb, CGridTableRec, CTitlePage,

src/components/CGridOriz/CGridOriz.vue

@@ -33,6 +33,7 @@
       labelBtnAddExtra=""
       :extraparams="tools.extraparams(table, { myrecfiltertoggle })"
       :prop_showMap="showMap"
+      :heightcarousel="heightcarousel"
       @clickButtBar="clickButtBar"
     >
     </CGridTableRec>

src/components/CGridTableRec/CGridTableRec.scss

@@ -78,6 +78,5 @@
 }
 
 .carousel-scroll-container {
-  height: 300px; /* Imposta un'altezza per permettere lo scorrimento */
   overflow-y: auto; /* Permette lo scrolling verticale */
 }

src/components/CGridTableRec/CGridTableRec.ts

@@ -243,6 +243,10 @@ export default defineComponent({
       required: false,
       default: 0,
     },
+    heightcarousel: {
+      required: false,
+      default: 0,
+    },
     prop_pagination: {
       type: Object as PropType<IPagination>,
       required: false,
@@ -1687,7 +1691,7 @@ export default defineComponent({
     }
 
     const checkScrollPosition = () => {
-      console.log('checkScrollPosition')
+      // console.log('checkScrollPosition')
       const container = carouselTabRef.value
       if (!container ) return
 
@@ -2412,7 +2416,7 @@ export default defineComponent({
     }
 
     function onLoadScroll(index: number, done: any) {
-      console.log('onLoadScroll', index)
+      // console.log('onLoadScroll', index)
 
       if (index > 1) {
         // console.log('onLoadScroll', index, 'RECLOAD', numRecLoaded.value, 'ROWS: ', pagination.value.rowsNumber, 'PAGE: ', pagination.value.page)

src/components/CGridTableRec/CGridTableRec.vue

@@ -379,13 +379,11 @@
     </div>
 
     <div v-if="!showMap">
-      page: {{ pagination.page }} numRecLoaded: {{ numRecLoaded }} rows:
-      {{ pagination.rowsNumber }}
-
       <div
         v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ"
         id="carousel-scroll-target"
         class="carousel-scroll-container"
+        :style="heightcarousel ? `height: ${heightcarousel}` : ''"
       >
         <q-carousel
           swipeable
@@ -393,23 +391,21 @@
           :autoplay="autoplay"
           v-model="slideGridOriz"
           navigation
-          navigation-icon="radio_button_unchecked"
-          control-color="blue-4"
           control-text-color="white"
           ref="carousel"
           transition-next="slide-left"
           transition-prev="slide-right"
-          height="500px"
+          :height="heightcarousel"
           width="100%"
-          control-type="push"
+          control-type="flat"
-          class="bg-grey-2 shadow-2 rounded-borders"
+          class="bg-primary shadow-2 rounded-borders"
           @mouseenter="autoplay = false"
           @mouseleave="autoplay = true"
           @transition="handleTransition"
         >
           <template v-slot:control>
             <q-carousel-control
-              position="top-left"
+              position="left"
               :offset="[-10, -10]"
               class="q-gutter-xs"
               style="opacity: 0.7"
@@ -460,6 +456,7 @@
           :initial-index="0"
           @load="loadMore"
           :offset="350"
+          style="display: none"
         >
         </q-infinite-scroll>
       </div>
@@ -475,7 +472,7 @@
         @load="onLoadScroll"
         :offset="350"
         debounce="300"
-        scroll-target="#carousel-scroll-target"
+        scroll-target=".carousel-scroll-container"
       >
         <div v-if="showHeaderCol">
           <div
@@ -491,66 +488,10 @@
           </div>
         </div>
 
-        <div v-if="myvertical === costanti.VISUTABLE_GRID_ORIZ">
+        <div
-          <q-btn
+          :style="heightcarousel ? `height: ${heightcarousel}` : ''"
-            label="pag"
+          :class="{ 'carousel-scroll-container': !!heightcarousel }"
-            @click="
+        >          
-              pagination.page++;
-              onUpdateData(
-                0,
-                {
-                  pagination,
-                },
-                false
-              );
-            "
-          ></q-btn>
-
-          <div v-if="false">
-            <div class="card-carousel-container">
-              <div class="card-carousel" ref="carouselTabRef">
-                <q-card
-                  v-for="(rec, indexrow) in serverData"
-                  :key="indexrow"
-                  :class="`my-card-elem center_img bordered ` + ' titolo_card'"
-                  :style="`height: auto; !important; width: 350px !important;`"
-                >
-                  <CMyRecCard
-                    :table="tablesel"
-                    :prop_myrec="rec"
-                    @cmdext="cmdExt"
-                    :editOn="editOn"
-                    :margin_right="margin_right"
-                  >
-                  </CMyRecCard>
-                </q-card>
-              </div>
-              <div
-                class="swipe-indicator left"
-                v-if="!isAtStart"
-                @click="scroll(-1)"
-              >
-                <q-icon name="chevron_left" size="2rem" color="white" />
-              </div>
-              <div
-                class="swipe-indicator right"
-                v-if="!isAtEnd"
-                @click="scroll(1)"
-              >
-                <q-icon name="chevron_right" size="2rem" color="white" />
-              </div>
-              <div class="scroll-indicator">
-                <div
-                  v-for="(_, index) in serverData"
-                  :key="index"
-                  :class="['dot', { active: index === activeIndex }]"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-else>
           <div v-for="(row, indexrow) in serverData" :key="indexrow">
             <div
               v-if="

src/components/CMyEditElem/CMyEditElem.vue

@@ -187,6 +187,21 @@
               @new-value="updateSizeHeight"
               style="width: 150px"
             />
+            <q-select
+              label="Altezza Carosello:"
+              v-if="(myel.type === shared_consts.ELEMTYPE.CARD) || (myel.type === shared_consts.ELEMTYPE.GRID_ORIZ)"
+              v-model="myel.heightcarousel"
+              emit-value
+              map-options
+              :options="generateSizeOptions()"
+              use-input
+              use-chips
+              @input="saveElem"
+              filled
+              dense
+              @new-value="updateSizeHeight"
+              style="width: 150px"
+            />
           </div>
         </q-expansion-item>
 
@@ -338,6 +353,21 @@
           v-else-if="myel.type === shared_consts.ELEMTYPE.CARD"
           :class="myel.span ? '' : ''"
         >
+          <q-select
+            v-model="myel.num2"
+            :options="[
+              { label: '1', value: 1 },
+              { label: '2', value: 2 },
+              { label: '3', value: 3 },
+              { label: '4', value: 4 },
+            ]"
+            label="Cards per Slide"
+            emit-value
+            map-options
+            style="min-width: 120px"
+            @input="saveElem"
+          >
+          </q-select>
           <q-expansion-item
             dense
             dense-toggle

src/components/CMyElem/CMyElem.ts

@@ -125,6 +125,24 @@ export default defineComponent({
 
     const isAppRunning = computed(() => globalStore.isAppRunning)
 
+    const currentCardsPerSlide = computed(() => {
+      if ($q.screen.lt.sm) return 1
+      if ($q.screen.lt.md) return 2
+      return myel.value.num2 ? myel.value.num2 : 2! // cardsPerSlide
+    })
+
+    // Raggruppa le card in base al numero di card per slide
+    const cardGroups = computed(() => {
+      const cards = myel.value.listcards || []
+      const groups = []
+      
+      for (let i = 0; i < cards.length; i += currentCardsPerSlide.value) {
+        groups.push(cards.slice(i, i + currentCardsPerSlide.value))
+      }
+
+      return groups
+    })
+
     const coordaddr = ref(<ICoordGPS>{ address: '', coordinates: [0, 0] })
 
     const carouselRef = ref(<any>null)
@@ -259,6 +277,12 @@ export default defineComponent({
 
     }
 
+    // Classe per le colonne delle card
+    function cardColumnClass() {
+      const width = 12 / currentCardsPerSlide.value
+      return `col-xs-12 col-sm-6 col-md-${width}`
+    }
+
     onMounted(mounted)
 
     return {
@@ -296,6 +320,9 @@ export default defineComponent({
       isAtEnd,
       activeIndex,
       carouselRef,
+      cardColumnClass,
+      cardGroups,
+      currentCardsPerSlide,
     }
   },
 

src/components/CMyElem/CMyElem.vue

@@ -33,70 +33,117 @@
         v-if="myel.type === shared_consts.ELEMTYPE.CARD"
         class="card-carousel-container"
       >
-        <div
+        <q-carousel
-          :class="myel.class + (editOn ? ` clEdit` : ``) + getClass()"
+          swipeable
-          @click="clickOnElem"
+          animated
-          class="card-carousel"
+          v-model="slide"
-          ref="carouselRef"
+          navigation
+          control-text-color="white"
+          ref="carousel"
+          transition-next="slide-left"
+          transition-prev="slide-right"
+          :height="myel.heightcarousel"
+          width="100%"
+          control-type="flat"
+          class="bg-primary shadow-2 rounded-borders"
+          @mouseenter="animare = false"
+          @mouseleave="animare = true"
+          @transition="handleTransition"
         >
-          <q-card
+          <template v-slot:control>
-            v-for="(rec, ind) in myel.listcards"
+            <q-carousel-control
-            :key="ind"
+              position="top-left"
-            :class="
+              :offset="[-10, -10]"
-              `my-card-elem center_img bordered ` +
+              class="q-gutter-xs"
-              myel.class3 +
+              style="opacity: 0.7"
-              (rec.link ? ' titolo_card' : '')
-            "
-            :style="
-              rec.style +
-              `; height: ${myel.heightimg || `300px`} !important; width: ${
-                myel.widthimg || `300px`
-              } !important;`
-            "
-            @click="rec.link ? tools.openUrl(rec.link) : undefined"
-          >
-            <div
-              class="img-container"
-              :style="`height: ${
-                myel.heightimg.replace('px', '') * 0.7
-              }px; overflow: hidden;`"
             >
-              <q-img
+              <q-btn
-                :class="tools.getClassAnim(myel.anim2) + ` ` + myel.class4"
+                push
-                :src="tools.getImgFileByElem(myel, rec)"
+                round
-              />
+                :color="$q.dark.isActive ? `black` : `white`"
-            </div>
+                :text-color="$q.dark.isActive ? `white` : `black`"
-            <q-card-section>
+                icon="keyboard_arrow_left"
-              <div :class="rec.size" :style="`color: ` + rec.color">
+                @click="$refs.carousel.previous()"
-                {{ tools.getText(rec.alt) }}
+              ></q-btn>
+            </q-carousel-control>
+            <q-carousel-control
+              position="top-right"
+              class="q-gutter-xs"
+              :offset="[-10, -10]"
+              style="opacity: 0.7"
+            >
+              <q-btn
+                push
+                round
+                :color="$q.dark.isActive ? `black` : `white`"
+                :text-color="$q.dark.isActive ? `white` : `black`"
+                icon="keyboard_arrow_right"
+                @click="$refs.carousel.next()"
+              ></q-btn>
+            </q-carousel-control>
+          </template>
+          <!-- Iteriamo sui gruppi di card invece che sulle singole card -->
+          <q-carousel-slide
+            v-for="(group, groupIndex) in cardGroups"
+            :key="groupIndex"
+            :name="groupIndex"
+          >
+           <div class="row no-wrap justify-start items-center q-px-md full-width">
+            <template v-for="(rec, cardIndex) in group" :key="cardIndex">
+              <div :class="cardColumnClass">
+                <q-card
+                  :class="
+                    `flex-card bordered ` +
+                    myel.class3 +
+                    (rec.link ? ' titolo_card' : '')
+                  "
+                  :style="
+                    rec.style +
+                    `; height: ${
+                      myel.heightimg || `300px`
+                    } !important; width: ${
+                      myel.widthimg || `300px`
+                    } !important;`
+                  "
+                  @click="rec.link ? tools.openUrl(rec.link) : undefined"
+                >
+                  <div
+                    class="img-container"
+                    :style="`height: ${
+                      myel.heightimg.replace('px', '') * 0.7
+                    }px; overflow: hidden;`"
+                  >
+                    <q-img
+                      :class="
+                        tools.getClassAnim(myel.anim2) + ` ` + myel.class4
+                      "
+                      :src="tools.getImgFileByElem(myel, rec)"
+                    />
+                  </div>
+                  <q-card-section>
+                    <div :class="rec.size" :style="`color: ` + rec.color">
+                      {{ tools.getText(rec.alt) }}
+                    </div>
+                    <div
+                      :class="
+                        `q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)
+                      "
+                      v-html="rec.content"
+                    ></div>
+                    <div
+                      v-if="rec.description"
+                      class="text-caption"
+                      :style="`color: ` + rec.colorsub"
+                    >
+                      {{ rec.description }}
+                    </div>
+                  </q-card-section>
+                </q-card>
               </div>
-              <div
+            </template>
-                :class="`q-mt-sm q-mb-xs ` + tools.getClassAnim(myel.anim)"
+           </div>
-                v-html="rec.content"
+          </q-carousel-slide>
-              ></div>
+        </q-carousel>
-              <div
-                v-if="rec.description"
-                class="text-caption"
-                :style="`color: ` + rec.colorsub"
-              >
-                {{ rec.description }}
-              </div>
-            </q-card-section>
-          </q-card>
-        </div>
-        <div class="swipe-indicator left" v-if="!isAtStart">
-          <q-icon name="chevron_left" size="2rem" color="white" />
-        </div>
-        <div class="swipe-indicator right" v-if="!isAtEnd">
-          <q-icon name="chevron_right" size="2rem" color="white" />
-        </div>
-        <div class="scroll-indicator">
-          <div
-            v-for="(_, index) in myel.listcards"
-            :key="index"
-            :class="['dot', { active: index === activeIndex }]"
-          ></div>
-        </div>
       </div>
 
       <div v-if="myel.type === shared_consts.ELEMTYPE.MARGINI">
@@ -489,13 +536,14 @@
         <CSendRISTo></CSendRISTo>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.GRID_ORIZ">
-        <div v-if="editOn" class="elemEdit">Griglia Orizzontale</div>
+        <div v-if="editOn" class="elemEdit">Visualizzatore Tabelle</div>
         <CGridOriz
           :table="myel.container"
           :tipovisu="myel.number"
           :prop_search="myel.parambool"
           :finder="myel.parambool2"
           :showMap="myel.parambool3"
+          :heightcarousel="myel.heightcarousel"
         ></CGridOriz>
       </div>
       <div v-else-if="myel.type === shared_consts.ELEMTYPE.STATUSREG">

src/css/app.scss

@@ -1135,6 +1135,10 @@ h3 {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
   margin: 1px;
   object-position: 50% 5% !important;
+  object-fit: contain !important;
+  @media (max-width: 600px) {
+    /* Versione Mobile */
+  }
 }
 
 .imgprofile_small {
@@ -2226,6 +2230,62 @@ $coloreprincipale: lightblue;
   transition: transform 0.3s ease;
 }
 
+.cards-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.card-item {
+  display: flex;
+  flex-direction: column;
+  max-width: 200px; /* Massima larghezza per la card */
+  margin: 0 10px; /* Spazio tra le card */
+  text-align: center;
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  gap: 1rem;
+  height: 100%;
+  padding: 1rem;
+}
+
+.flex-card {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  margin: 0 0.5rem;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+/* Aggiungi questi stili per gestire lo scroll orizzontale se necessario */
+.q-carousel__slide {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+.row.no-wrap {
+  flex-wrap: nowrap !important;
+  gap: 1rem;
+}
+
+.card-width-200 {
+  width: 100%;
+  max-width: 200px;
+}
+
+.card-width-250 {
+  width: 100%;
+  max-width: 250px;
+}
+
 .my-card-elem:hover {
   transform: scale(1.05);
 }
@@ -2237,7 +2297,7 @@ $coloreprincipale: lightblue;
 
 .img-container .q-img {
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .swipe-indicator {

src/model/GlobalStore.ts

@@ -149,6 +149,7 @@ export interface IMyElem {
   width?: number
   height?: number
   heightimg?: string
+  heightcarousel?: string
   widthimg?: string
   link?: string
   onlyif_logged?: boolean

src/store/Modules/fieldsTable.ts

@@ -173,6 +173,7 @@ export const colmyelems = [
   AddCol({ name: 'listcards', label_trans: 'myelems.listcards', fieldtype: costanti.FieldType.listimages }),
   AddCol({ name: 'height', label_trans: 'myelems.height', fieldtype: costanti.FieldType.number }),
   AddCol({ name: 'heightimg', label_trans: 'myelems.heightimg', fieldtype: costanti.FieldType.string }),
+  AddCol({ name: 'heightcarousel', label_trans: 'myelems.heightcarousel', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'widthimg', label_trans: 'pages.widthimg', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'link', label_trans: 'pages.link', fieldtype: costanti.FieldType.string }),
   AddCol({ name: 'width', label_trans: 'myelems.width', fieldtype: costanti.FieldType.number }),