- aggiornato Card service, e CGridTableRec.

src/components/CGridTableRec/CGridTableRec.scss

@@ -1,3 +1,18 @@
+// ========================================
+// BASE STYLES
+// ========================================
+$primary-color: #1976d2;
+$border-radius: 10px;
+$transition-speed: 0.3s;
+$mobile-breakpoint: 768px;
+
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+$shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
+$shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
+
+// ========================================
+// TABLE STYLES
+// ========================================
 .colmodif {
   cursor: pointer;
 }
@@ -10,7 +25,7 @@
 .tdclass,
 .trclass {
   min-height: 20px !important;
-  margin-top: 5px;
+  margin-top: 3px;
 }
 
 .q-table td {
@@ -41,85 +56,175 @@
 
 .riduci_pad {
   min-height: 30px;
-  padding: 4px 8px !important;
+  padding: 3px 6px !important;
 }
 
-
 .q-table__top {
   padding-top: 0 !important;
 }
 
+// ========================================
+// DIALOG & LAYOUT
+// ========================================
 .right-align-dialog .q-dialog {
   right: 0;
-  /* Allinea a destra */
   left: auto;
-  /* Disabilita l'allineamento a sinistra */
   margin: 0;
-  /* Rimuovi qualsiasi margine */
 }
 
-
 .flexible-width {
   flex: 1;
-  /* permette al componente di espandersi */
   max-width: 500px;
-  /* larghezza massima di 600px */
 }
 
-.hint_search{
+.hint_search {
   color: gray;
 }
 
-.clOrizzontal{
+// ========================================
+// CAROUSEL STYLES - MODERNIZZATI
+// ========================================
+.q-carousel__slide {
+  padding: 5px !important;
 
-}
+  @media (max-width: $mobile-breakpoint) {
-.q-carousel__slide{
+    padding: 3px !important;
-  padding: 8px !important;
+  }
 }
 
 .carousel-scroll-container {
-  overflow-y: auto; /* Permette lo scrolling verticale */
+  overflow-y: auto;
-}
+  max-height: calc(100vh - 120px);
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
 
-.modern-grid-toolbar {
+  @media (max-width: $mobile-breakpoint) {
-  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+    max-height: calc(100vh - 100px);
-  color: white;
-  padding: 12px 16px;
-  min-height: 52px;
-  border-radius: 12px 12px 0 0;
-
-  @media (max-width: 768px) {
-    padding: 5px 12px;
-    min-height: 48px;
   }
 }
 
+// ========================================
+// TOOLBAR MODERNO
+// ========================================
+.modern-grid-toolbar {
+  background: linear-gradient(135deg, $primary-color 0%, #1565c0 100%);
+  color: white;
+  padding: 10px 14px;
+  min-height: 50px;
+  border-radius: $border-radius $border-radius 0 0;
+  box-shadow: $shadow-sm;
+
+  @media (max-width: $mobile-breakpoint) {
+    padding: 8px 12px;
+    min-height: 46px;
+  }
+}
+
+// ========================================
+// BUTTON MODERNO
+// ========================================
 .modern-add-btn {
-  padding: 8px 20px;
+  padding: 6px 18px;
   font-weight: 600;
-  transition: all 0.3s;
+  transition: all $transition-speed;
+  box-shadow: $shadow-sm;
 
   &:hover {
-    transform: translateY(-2px);
+    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
+    box-shadow: $shadow-hover;
   }
-  @media (max-width: 768px) {
+
-    padding: 4px 20px;
+  @media (max-width: $mobile-breakpoint) {
+    padding: 5px 16px;
   }
 }
 
+// ========================================
+// INFINITE SCROLL
+// ========================================
+// ========================================
+// GRID LAYOUT PER CARD
+// ========================================
 .q-infinite-scroll {
-  padding: 8px;
+  padding: 6px;
-  gap: 10px;
+  gap: 8px;
   
-  @media (max-width: 768px) {
+  // Desktop: layout a griglia 2 colonne
-    padding: 6px;
+  @media (min-width: $mobile-breakpoint + 1) {
-    gap: 8px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    padding: 8px;
+  }
+  
+  // Desktop large: 3 colonne per schermi molto larghi
+  @media (min-width: 1400px) {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+  
+  // Mobile: colonna singola
+  @media (max-width: $mobile-breakpoint) {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    gap: 6px;
   }
 }
 
+// ========================================
+// DIALOG CARDS
+// ========================================
 .q-dialog {
   :deep(.modern-card) {
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+    border-radius: $border-radius;
   }
+}
+
+// ========================================
+// FIXED TOGGLE
+// ========================================
+.fixed-toggle {
+  position: fixed;
+  top: 70px;
+  right: 12px;
+  z-index: 1000;
+  box-shadow: $shadow-md;
+  border-radius: 20px;
+  background: white;
+  padding: 4px 8px;
+
+  @media (max-width: $mobile-breakpoint) {
+    top: 65px;
+    right: 10px;
+    padding: 3px 6px;
+  }
+}
+.grid-card-item {
+  width: 100%;
+  
+  @media (max-width: $mobile-breakpoint) {
+    width: 100%;
+  }
+}
+
+.fill-all-width {
+  width: 100%;
 }

src/components/CGridTableRec/CGridTableRec.vue

@@ -499,6 +499,7 @@
             v-for="(rec, indexrow) in serverData"
             :key="indexrow"
             :name="indexrow"
+            class="grid-card-item"
           >
             <CMyRecCard
               :table="tablesel"

src/components/CMenuItem/CMenuItem.scss

@@ -1,144 +1,503 @@
+// ==========================================
+// CMENUITEM.SCSS - ORIGINALE + MIGLIORAMENTI RISO
+// Mantiene tutto il codice originale + stile moderno
+// ==========================================
+
 .prova {
-    color: red;
+  color: red;
 }
 
 .q-list-header {
-    min-height: 12px;
+  min-height: 12px;
-    padding: 5px 8px;
+  padding: 5px 8px;
 }
 
 .menu-hr {
-    border-color: #dedede;
+  border-color: #dedede;
-    height: 0.5px;
+  height: 0.5px;
 }
 
-
 .list-label:first-child {
-    line-height: 20px;
+  line-height: 20px;
-    padding: 5px;
+  padding: 5px;
-    margin: 1px;
+  margin: 1px;
 }
 
 .router-link-active {
-    color: #027be3;
+  color: #027be3;
-    background-color: #dadada !important;
+  background-color: #dadada !important;
-    border-right: 2px solid #027be3;
+  border-right: 2px solid #027be3;
 }
 
 .router-link-active .item-primary {
-    color: #027be3;
+  color: #027be3;
 }
 
 .menu_freccina {
-    position: absolute;
+  position: absolute;
-    right: 10px;
+  right: 10px;
-    display: inline-block;
+  display: inline-block;
-    padding: 0 0 0 0;
+  padding: 0 0 0 0;
-    -webkit-transform: rotate(-180deg);
+  -webkit-transform: rotate(-180deg);
-    transform: rotate(-180deg);
+  transform: rotate(-180deg);
 }
 
 .my-menu,
 .my-menu>i {
-    min-height: 40px;
+  min-height: 40px;
-    min-width: 26px;
+  min-width: 26px;
-    font-size: 1rem;
+  font-size: 1rem;
 }
 
 .my-menu-small,
 .my-menu-small>i {
-    min-height: 40px;
+  min-height: 40px;
-    min-width: 26px;
+  min-width: 26px;
-    font-size: 0.75rem;
+  font-size: 0.75rem;
 }
 
 .isAdmin {
-    color: red !important;
+  color: red !important;
 }
 
 .isSocioResidente {
-    color: darkgreen;
+  color: darkgreen;
 }
 
 .isCalendar {}
 
 .isManager {
-    color: green !important;
+  color: green !important;
 }
 
 .isFacilitatore {
-    color: #201a80;
+  color: #201a80;
 }
+
 .onlyCollaboratore {
-    color: #bd7b10;
+  color: #bd7b10;
 }
 
 .my-menu-icon {
-    min-width: 2px;
+  min-width: 2px;
-    font-size: 1rem;
+  font-size: 1rem;
 }
 
 .my-menu-icon>i {
-    min-width: 26px;
+  min-width: 26px;
-    font-size: 1.25rem;
+  font-size: 1.25rem;
 }
 
 .clexpansion {
-    min-width: 0 !important;
+  min-width: 0 !important;
 }
 
 .my-menu-active {
-    background-color: rgba(174, 189, 241, 0.71);
+  background-color: rgba(174, 189, 241, 0.71);
 }
 
 .my-menu-separat>i {
-    min-width: 26px;
+  min-width: 26px;
-    font-size: 1rem;
+  font-size: 1rem;
 }
 
 .my-menu-icon-none>i {
-    display: none;
+  display: none;
 }
 
 .clicon img,
 .clicon {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 .q-item__section--avatar {
-    min-width: 30px;
+  min-width: 30px;
 }
 
 .OLD_q-item__section--side {
-    padding-right: 8px;
+  padding-right: 8px;
 }
 
-
 .imgicon img {
-    font-size: 2.5rem !important;
+  font-size: 2.5rem !important;
-    border-radius: 8px;
+  border-radius: 8px;
 }
 
-
 /*
-  .menu-enter-active, .scale-enter {
+.menu-enter-active, .scale-enter {
-      -webkit-animation: moveFromTopFade .5s ease both;
+    -webkit-animation: moveFromTopFade .5s ease both;
-      animation: moveFromTopFade .5s ease both;
+    animation: moveFromTopFade .5s ease both;
-  }
+}
-  
+
-  .menu-leave-to, .scale-leave-active {
+.menu-leave-to, .scale-leave-active {
-      -webkit-animation: moveToBottom .5s ease both;
+    -webkit-animation: moveToBottom .5s ease both;
-      animation: moveToBottom .5s ease both;
+    animation: moveToBottom .5s ease both;
-  }
+}
-  */
+*/
 
 .bigmenu {
-    font-size: 1.25rem;
+  font-size: 1.25rem;
-    font-weight: bold;
+  font-weight: bold;
-    text-shadow: 0.0512rem 0.052rem .01rem #555;
+  text-shadow: 0.0512rem 0.052rem .01rem #555;
 }
 
 .subtitle {
   font-size: 0.85em;
   color: #666;
 }
+
+// ==========================================
+// MIGLIORAMENTI STILE RISO - AGGIUNTI
+// ==========================================
+
+// ==========================================
+// INDENTAZIONE LIVELLI - Più compatta
+// ==========================================
+[style*="paddingLeft"] {
+  transition: all 0.3s ease;
+}
+
+// ==========================================
+// Q-SEPARATOR - Divisore migliorato
+// ==========================================
+.q-separator {
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    rgba(0, 0, 0, 0.1) 50%, 
+    transparent 100%);
+  margin: 6px 0;
+  height: 1px;
+}
+
+// ==========================================
+// Q-EXPANSION-ITEM - Espandibile migliorato
+// ==========================================
+.q-expansion-item {
+  border-radius: 8px;
+  margin-bottom: 2px;
+  overflow: hidden;
+  
+  // Header dell'expansion
+  > .q-item {
+    border-radius: 8px;
+    padding: 6px 10px;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+      transform: translateX(2px);
+    }
+  }
+  
+  // Label header
+  .q-item__label {
+    font-size: 0.95rem;
+    font-weight: 500;
+  }
+  
+  // Icona expand/collapse
+  .q-icon {
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+// Quando espanso
+.q-expansion-item--expanded {
+  > .q-item {
+    background: rgba(0, 0, 0, 0.02);
+    
+    .q-icon {
+      color: var(--q-primary);
+      transform: rotate(0deg);
+    }
+  }
+}
+
+// ==========================================
+// Q-ITEM FOGLIA - Voce menu semplice
+// ==========================================
+.q-item {
+  border-radius: 8px;
+  padding: 6px 10px;
+  margin-bottom: 2px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 42px;
+  
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+    transform: translateX(3px);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+  
+  &:active {
+    transform: translateX(1px);
+  }
+  
+  // Sezione thumbnail con avatar
+  .q-item__section--thumbnail {
+    min-width: 36px;
+    padding-right: 10px;
+  }
+  
+  // Label principale
+  > .q-item__section > span:not(.subtitle) {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.87);
+  }
+}
+
+// ==========================================
+// Q-AVATAR - Icone migliorate
+// ==========================================
+.q-avatar {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent !important;
+  
+  &.rounded {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  
+  .q-icon {
+    font-size: 1.3rem;
+    transition: all 0.3s ease;
+  }
+}
+
+.q-item:hover .q-avatar {
+  transform: scale(1.08);
+  
+  .q-icon {
+    transform: rotate(-5deg);
+  }
+}
+
+// ==========================================
+// MY-MENU-ACTIVE - Stato attivo
+// ==========================================
+.my-menu-active {
+  background: linear-gradient(90deg, 
+    rgba(2, 123, 227, 0.12) 0%, 
+    rgba(2, 123, 227, 0.05) 100%) !important;
+  border-radius: 8px;
+  border-right: 3px solid #027be3;
+  
+  span {
+    color: #027be3;
+    font-weight: 600;
+  }
+  
+  .q-avatar {
+    background: rgba(2, 123, 227, 0.1) !important;
+    
+    .q-icon {
+      color: #027be3;
+    }
+  }
+  
+  &:hover {
+    background: linear-gradient(90deg, 
+      rgba(2, 123, 227, 0.16) 0%, 
+      rgba(2, 123, 227, 0.08) 100%) !important;
+  }
+}
+
+// ==========================================
+// CLASSI PERMESSI - Badge colorati
+// ==========================================
+.isAdmin {
+  color: #d32f2f !important;
+  border-left: 3px solid #d32f2f;
+  background: linear-gradient(90deg, 
+    rgba(211, 47, 47, 0.08) 0%, 
+    rgba(211, 47, 47, 0.02) 100%);
+  
+  .q-avatar {
+    background: rgba(211, 47, 47, 0.12) !important;
+    
+    .q-icon {
+      color: #d32f2f;
+    }
+  }
+  
+  &:hover {
+    background: linear-gradient(90deg, 
+      rgba(211, 47, 47, 0.12) 0%, 
+      rgba(211, 47, 47, 0.04) 100%);
+  }
+}
+
+.isManager {
+  color: #388e3c !important;
+  border-left: 3px solid #388e3c;
+  background: linear-gradient(90deg, 
+    rgba(56, 142, 60, 0.08) 0%, 
+    rgba(56, 142, 60, 0.02) 100%);
+  
+  .q-avatar {
+    background: rgba(56, 142, 60, 0.12) !important;
+    
+    .q-icon {
+      color: #388e3c;
+    }
+  }
+  
+  &:hover {
+    background: linear-gradient(90deg, 
+      rgba(56, 142, 60, 0.12) 0%, 
+      rgba(56, 142, 60, 0.04) 100%);
+  }
+}
+
+.isSocioResidente {
+  color: #1b5e20 !important;
+  
+  .q-avatar .q-icon {
+    color: #1b5e20;
+  }
+}
+
+.isFacilitatore {
+  color: #4a148c !important;
+  
+  .q-avatar .q-icon {
+    color: #4a148c;
+  }
+}
+
+.onlyCollaboratore {
+  color: #f57c00 !important;
+  
+  .q-avatar .q-icon {
+    color: #f57c00;
+  }
+}
+
+.isEditor {
+  color: #6a1b9a !important;
+  
+  .q-avatar .q-icon {
+    color: #6a1b9a;
+  }
+}
+
+.isCommerciale {
+  color: #e65100 !important;
+  
+  .q-avatar .q-icon {
+    color: #e65100;
+  }
+}
+
+.isGrafico {
+  color: #00796b !important;
+  
+  .q-avatar .q-icon {
+    color: #00796b;
+  }
+}
+
+.isDoc {
+  border-left: 3px solid #42a5f5;
+  background: linear-gradient(90deg, 
+    rgba(66, 165, 245, 0.08) 0%, 
+    rgba(66, 165, 245, 0.02) 100%);
+}
+
+// ==========================================
+// SUBTITLE - Testo secondario
+// ==========================================
+.subtitle {
+  font-size: 0.8rem;
+  color: #757575;
+  font-style: italic;
+  margin-top: 2px;
+  opacity: 0.85;
+  line-height: 1.3;
+}
+
+// ==========================================
+// BIGMENU - Titoli grandi
+// ==========================================
+.bigmenu {
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  letter-spacing: -0.01em;
+}
+
+// ==========================================
+// CLASSI EXTRA - Supporto customizzazioni
+// ==========================================
+.extraclass {
+  // Placeholder per classi custom
+}
+
+// ==========================================
+// RESPONSIVE
+// ==========================================
+@media screen and (max-width: 600px) {
+  .q-item {
+    padding: 5px 8px;
+    min-height: 40px;
+  }
+  
+  .q-expansion-item > .q-item {
+    padding: 5px 8px;
+  }
+  
+  .q-avatar {
+    width: 1.8rem !important;
+    height: 1.8rem !important;
+    font-size: 1.8rem !important;
+    
+    .q-icon {
+      font-size: 1.1rem;
+    }
+  }
+  
+  .q-item__section--thumbnail {
+    min-width: 32px;
+    padding-right: 8px;
+  }
+  
+  .bigmenu {
+    font-size: 1.1rem;
+  }
+  
+  .subtitle {
+    font-size: 0.75rem;
+  }
+}
+
+// ==========================================
+// ANIMAZIONI ENTRATA
+// ==========================================
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.q-item,
+.q-expansion-item {
+  animation: fadeSlideIn 0.3s ease;
+}
+
+// ==========================================
+// FOCUS ACCESSIBILITA
+// ==========================================
+.q-item:focus-visible,
+.q-expansion-item:focus-visible {
+  outline: 2px solid var(--q-primary);
+  outline-offset: 2px;
+  border-radius: 8px;
+}

src/components/CMyCardService/CMyCardService.vue

@@ -7,9 +7,10 @@
       <div class="row">
         <q-toolbar
           v-if="!nopopup"
-          class="bg-white text-black riempi"
+          dense
+          class="bg-blue text-white riempi"
         >
-          <q-toolbar-title> </q-toolbar-title>
+          <q-toolbar-title> {{ tools.getTitleAnnuncio(table) }}</q-toolbar-title>
           <q-btn
             v-if="!isSmall && showAnteprima"
             :label="isSmall ? 'Apri scheda' : 'Riduci scheda'"
@@ -21,7 +22,6 @@
           <q-btn
             flat
             round
-            color="black"
             icon="close"
             v-close-popup
           ></q-btn>
@@ -445,21 +445,21 @@
                   />
                 </q-item-section>
 
-                  <q-item-section>
+                <q-item-section>
-                    <q-item-label>
+                  <q-item-label>
-                      <span
+                    <span
-                        v-for="(recstatus, index) in myrec.idStatusSkill"
+                      v-for="(recstatus, index) in myrec.idStatusSkill"
-                        :key="index"
+                      :key="index"
+                    >
+                      <q-chip
+                        dense
+                        :color="globalStore.getColByStatusSkills(recstatus)"
+                        text-color="white"
                       >
-                        <q-chip
+                        {{ globalStore.getStatusSkillById(recstatus) }}
-                          dense
+                      </q-chip>
-                          :color="globalStore.getColByStatusSkills(recstatus)"
+                    </span>
-                          text-color="white"
+                  </q-item-label>
-                        >
-                          {{ globalStore.getStatusSkillById(recstatus) }}
-                        </q-chip>
-                      </span>
-                    </q-item-label>
                 </q-item-section>
               </q-item>
               <div v-if="!isSmall">
@@ -511,9 +511,7 @@
                         text-color="white"
                         dense
                       >
-                        <span>{{
+                        <span>{{ getSectorByRec(myrec)[0].descr }}</span>
-                          getSectorByRec(myrec)[0].descr
-                        }}</span>
                       </q-chip>
                       <q-chip
                         v-if="
@@ -526,9 +524,7 @@
                         color="blue"
                         text-color="white"
                       >
-                        <span>{{
+                        <span>{{ getRecGoodSkillByRec(myrec)[0].descr }}</span>
-                          getRecGoodSkillByRec(myrec)[0].descr
-                        }}</span>
                       </q-chip>
                     </q-item-label>
                   </q-item-section>

src/components/CMyElem/CMyElem.ts

@@ -219,6 +219,7 @@ export default defineComponent({
     const newtype = ref(<any>'');
 
     const canShowVersion = ref(false);
+    const nascondiBottone = ref(false);
 
     const isAppRunning = computed(() => globalStore.isAppRunning);
 
@@ -490,6 +491,7 @@ export default defineComponent({
       isNewVersionAvailable,
       enablePwa,
       mostraInviti,
+      nascondiBottone,
     };
   },
 });

src/components/CMyElem/CMyElem.vue

@@ -89,7 +89,7 @@
           v-else-if="myel.type === shared_consts.ELEMTYPE.RISOHOME"
           class="myElemBase"
         >
-        <HomeRiso />
+          <HomeRiso />
         </div>
         <div
           v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE"
@@ -1090,31 +1090,41 @@
             Controllo Nuova Versione
           </div>
           <q-banner
-            v-if="isNewVersionAvailable"
+            v-if="isNewVersionAvailable && !nascondiBottone"
             rounded
-            dense
+            class="update-banner"
-            class="bg-green text-white"
-            color="primary q-title"
-            style="text-align: center"
           >
             <template v-slot:avatar>
               <q-icon
-                name="fas fa-exclamation-triangle"
+                name="fas fa-sync-alt"
-                color="yellow"
+                class="update-icon"
-                size="xs"
               />
             </template>
-            <div v-if="$q.platform.is.ios">
+
-              <span class="mybanner"
+            <div class="update-content">
-                >Chiudere e Riaprire la App, per completare l'Aggiornamento</span
+              <div class="update-title">Aggiornamento Disponibile</div>
-              >
+              <div class="update-message">
-            </div>
+                <span v-if="$q.platform.is.ios">
-            <div v-else>
+                  Chiudi e riapri l'app per completare l'aggiornamento
-              <span class="mybanner"
+                </span>
-                >Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse scomparire il
+                <span v-else>
-                messaggio, chiudere e riaprire la pagina.</span
+                  Aggiornamento in corso... Se dopo 1 minuto il messaggio persiste,
-              >
+                  ricarica la pagina.
+                </span>
+              </div>
             </div>
+
+            <!-- Pulsante chiudi -->
+            <template v-slot:action>
+              <q-btn
+                flat
+                round
+                dense
+                icon="close"
+                @click="nascondiBottone = true"
+                class="q-ml-sm"
+              />
+            </template>
           </q-banner>
         </div>
         <div v-else-if="myel.type === shared_consts.ELEMTYPE.BTN_REG">
@@ -1201,11 +1211,16 @@
       >
       </CShareSocial>
     </q-dialog>
-    <q-dialog v-model="mostraInviti" maximized>
+    <q-dialog
-      <q-card :style="{
+      v-model="mostraInviti"
-        minWidth: '350px',
+      maximized
-        maxWidth: $q.screen.lt.sm ? '100vw' : '800px',
+    >
-      }">
+      <q-card
+        :style="{
+          minWidth: '350px',
+          maxWidth: $q.screen.lt.sm ? '100vw' : '800px',
+        }"
+      >
         <!-- Header con bottone chiudi -->
         <q-bar class="bg-primary text-white">
           <q-space />

src/components/CMyRecCard/CMyRecCard.scss

@@ -7,12 +7,13 @@ $negative-color: #c10015;
 $grey-color: #666;
 $grey-light: #999;
 
-$border-radius: 12px;
+$border-radius: 10px;
-$border-radius-sm: 8px;
+$border-radius-sm: 6px;
 $transition-speed: 0.3s;
 
-$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
-$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+$shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
+$shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
 
 $mobile-breakpoint: 768px;
 
@@ -20,26 +21,25 @@ $mobile-breakpoint: 768px;
 // WRAPPER CARD - ALTERNATING COLORS
 // ========================================
 .rec-card-wrapper {
-  margin: 4px auto;
+  margin: 3px auto;
   padding: 0;
+  width: 100%; // Aggiungi questa riga
 
   @media (max-width: $mobile-breakpoint) {
     margin: 2px auto;
   }
-
+  
   &.is-even {
     .modern-rec-card {
-      background: linear-gradient(135deg, rgba(49, 154, 239, 0.227) 0%, rgba(25, 118, 210, 0.05) 100%);
+      background: linear-gradient(135deg, rgba(49, 154, 239, 0.08) 0%, rgba(25, 118, 210, 0.03) 100%);
-      border-color: rgba(66, 165, 245, 0.15);
+      border-color: rgba(66, 165, 245, 0.12);
-      // ... resto degli stili blu
     }
   }
 
   &.is-odd {
     .modern-rec-card {
-      background: linear-gradient(135deg, rgba(38, 197, 218, 0.159) 0%, rgba(0, 150, 136, 0.05) 100%);
+      background: linear-gradient(135deg, rgba(38, 197, 218, 0.08) 0%, rgba(0, 150, 136, 0.03) 100%);
-      border-color: rgba(38, 198, 218, 0.15);
+      border-color: rgba(38, 198, 218, 0.12);
-      // ... resto degli stili teal
     }
   }
 }
@@ -49,30 +49,35 @@ $mobile-breakpoint: 768px;
 // ========================================
 .event-card {
   display: flex;
-  gap: 8px;
+  gap: 6px;
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   background: white;
   border-radius: $border-radius;
   overflow: hidden;
   box-shadow: $shadow-md;
+  transition: box-shadow $transition-speed ease;
+
+  &:hover {
+    box-shadow: $shadow-hover;
+  }
 
   @media (max-width: $mobile-breakpoint) {
-    gap: 6px;
+    gap: 5px;
-    margin-bottom: 6px;
+    margin-bottom: 5px;
   }
 }
 
 .event-date-column {
-  flex: 0 0 80px;
+  flex: 0 0 70px;
   background: linear-gradient(135deg, $primary-color, #42a5f5);
-  padding: 8px 4px;
+  padding: 6px 3px;
   display: flex;
   align-items: center;
   justify-content: center;
 
   @media (max-width: $mobile-breakpoint) {
-    flex: 0 0 70px;
+    flex: 0 0 65px;
-    padding: 6px 3px;
+    padding: 5px 2px;
   }
 }
 
@@ -91,66 +96,79 @@ $mobile-breakpoint: 768px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   opacity: 0.9;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.5625rem;
+  }
 }
 
 .day-number {
-  font-size: 2rem;
+  font-size: 1.875rem;
   font-weight: 700;
   line-height: 1;
-  margin: 4px 0;
+  margin: 3px 0;
 
   @media (max-width: $mobile-breakpoint) {
-    font-size: 1.75rem;
+    font-size: 1.625rem;
-    margin: 3px 0;
+    margin: 2px 0;
   }
 }
 
 .month-name {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.75rem;
+  }
 }
 
 .time-start,
 .time-end {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   font-weight: 500;
-  padding: 2px 6px;
+  padding: 2px 5px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 4px;
   margin-top: 2px;
 
   @media (max-width: $mobile-breakpoint) {
-    font-size: 0.6875rem;
+    font-size: 0.625rem;
-    padding: 2px 4px;
+    padding: 1px 4px;
   }
 }
 
 .date-separator {
-  font-size: 1rem;
+  font-size: 0.9375rem;
-  margin: 4px 0;
+  margin: 3px 0;
   opacity: 0.8;
+
+  @media (max-width: $mobile-breakpoint) {
+    font-size: 0.875rem;
+    margin: 2px 0;
+  }
 }
 
 .user-avatar {
-  margin-top: 8px;
+  margin-top: 6px;
   border: 2px solid rgba(255, 255, 255, 0.3);
   box-shadow: $shadow-sm;
 
   @media (max-width: $mobile-breakpoint) {
-    margin-top: 6px;
+    margin-top: 5px;
+    width: 36px !important;
+    height: 36px !important;
   }
 }
 
 .event-image-container {
   flex: 1;
-  min-height: 200px;
   position: relative;
-
+  overflow: hidden;
-  @media (max-width: $mobile-breakpoint) {
+  
-    min-height: 160px;
+  // L'altezza viene gestita dinamicamente dal Vue
-  }
 }
 
 .event-image {
@@ -160,7 +178,7 @@ $mobile-breakpoint: 768px;
   transition: transform $transition-speed ease;
 
   &:hover {
-    transform: scale(1.02);
+    transform: scale(1.03);
   }
 
   :deep(.q-img__image) {
@@ -176,19 +194,20 @@ $mobile-breakpoint: 768px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: $border-radius;
   box-shadow: $shadow-sm;
-  padding: 8px;
+  padding: 6px;
   transition: all $transition-speed ease;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
   position: relative;
   overflow: hidden;
 
   &:hover {
     box-shadow: $shadow-md;
+    transform: translateY(-1px);
   }
 
   @media (max-width: $mobile-breakpoint) {
-    padding: 6px;
+    padding: 5px;
-    margin-bottom: 3px;
+    margin-bottom: 2px;
   }
 }
 
@@ -198,20 +217,20 @@ $mobile-breakpoint: 768px;
 .avatar-section {
   position: relative;
   padding: 0 !important;
-  margin-right: 8px;
+  margin-right: 6px;
 
   @media (max-width: $mobile-breakpoint) {
-    margin-right: 6px;
+    margin-right: 5px;
   }
 }
 
 .type-badge {
   position: absolute;
-  top: -4px;
+  top: -3px;
-  left: -4px;
+  left: -3px;
   z-index: 1;
   font-size: 0.625rem;
-  padding: 2px 6px;
+  padding: 2px 5px;
   border-radius: 4px;
   font-weight: 600;
 
@@ -236,35 +255,34 @@ $mobile-breakpoint: 768px;
 }
 
 // ========================================
-// CONTENT SECTION - ALTERNATING COLORS
+// CONTENT SECTION
 // ========================================
 .content-section {
-  padding: 0 8px 0 0 !important;
+  padding: 0 6px 0 0 !important;
   min-width: 0;
 
   @media (max-width: $mobile-breakpoint) {
-    padding: 0 6px 0 0 !important;
+    padding: 0 5px 0 0 !important;
   }
 }
 
-// Tags e Chips
 .tags-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 3px;
-  margin-bottom: 4px;
+  margin-bottom: 3px;
   align-items: center;
 
   @media (max-width: $mobile-breakpoint) {
-    gap: 3px;
+    gap: 2px;
-    margin-bottom: 3px;
+    margin-bottom: 2px;
   }
 }
 
 .tag-chip {
-  height: 20px;
+  height: 19px;
   font-size: 0.6875rem;
-  padding: 0 6px;
+  padding: 0 5px;
   border-radius: 4px;
   box-shadow: none;
   font-weight: 500;
@@ -280,7 +298,7 @@ $mobile-breakpoint: 768px;
   }
 
   @media (max-width: $mobile-breakpoint) {
-    height: 18px;
+    height: 17px;
     font-size: 0.625rem;
     padding: 0 4px;
   }
@@ -292,7 +310,7 @@ $mobile-breakpoint: 768px;
 
 .status-badge {
   font-size: 0.6875rem;
-  padding: 2px 6px;
+  padding: 2px 5px;
   border-radius: 4px;
   display: inline-flex;
   align-items: center;
@@ -301,15 +319,15 @@ $mobile-breakpoint: 768px;
   @media (max-width: $mobile-breakpoint) {
     font-size: 0.625rem;
     padding: 2px 4px;
+    gap: 2px;
   }
 }
 
-// Descrizione
 .description-text {
   font-size: 0.9375rem;
   color: #333;
   line-height: 1.4;
-  margin: 4px 0;
+  margin: 3px 0;
   word-break: break-word;
 
   &.event-title {
@@ -319,22 +337,21 @@ $mobile-breakpoint: 768px;
 
   @media (max-width: $mobile-breakpoint) {
     font-size: 0.875rem;
-    margin: 3px 0;
+    margin: 2px 0;
   }
 }
 
-// User Stats Row
 .user-stats-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: 4px 0;
+  margin: 3px 0;
   font-size: 0.8125rem;
   color: $grey-color;
 
   @media (max-width: $mobile-breakpoint) {
     font-size: 0.75rem;
-    margin: 3px 0;
+    margin: 2px 0;
   }
 }
 
@@ -342,20 +359,20 @@ $mobile-breakpoint: 768px;
   font-weight: 600;
   font-style: italic;
   color: #333;
-  margin-right: 8px;
+  margin-right: 6px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
   @media (max-width: $mobile-breakpoint) {
-    margin-right: 6px;
+    margin-right: 5px;
   }
 }
 
 .stats-container {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   flex-shrink: 0;
   white-space: nowrap;
 
@@ -375,28 +392,27 @@ $mobile-breakpoint: 768px;
   }
 }
 
-// Badge Partecipazione
 .attending-badge {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
   color: $positive-color;
   font-weight: 600;
   font-size: 0.8125rem;
-  margin: 4px 0;
+  margin: 3px 0;
-  padding: 3px 8px;
+  padding: 3px 6px;
   background: rgba(33, 186, 69, 0.1);
   border-radius: 6px;
   width: fit-content;
 
   @media (max-width: $mobile-breakpoint) {
     font-size: 0.75rem;
-    margin: 3px 0;
+    margin: 2px 0;
-    padding: 2px 6px;
+    padding: 2px 5px;
+    gap: 2px;
   }
 }
 
-// Città
 .cities-text {
   font-size: 0.8125rem;
   color: $grey-light;
@@ -416,16 +432,16 @@ $mobile-breakpoint: 768px;
 .actions-section {
   padding: 0 !important;
   align-self: flex-start;
-  margin-left: 4px;
+  margin-left: 3px;
 
   @media (max-width: $mobile-breakpoint) {
-    margin-left: 3px;
+    margin-left: 2px;
   }
 }
 
 .action-menu-btn {
-  width: 32px;
+  width: 30px;
-  height: 32px;
+  height: 30px;
   color: $grey-color;
   transition: all $transition-speed ease;
 
@@ -460,13 +476,13 @@ $mobile-breakpoint: 768px;
   border: 1px solid rgba(0, 0, 0, 0.08);
   box-shadow: $shadow-sm;
   border-radius: $border-radius;
-  padding: 8px;
+  padding: 6px;
   background-color: white;
-  margin: 4px;
+  margin: 3px;
 
   @media (min-width: 500px) {
     margin: 2px;
-    padding: 6px;
+    padding: 5px;
   }
 }
 
@@ -483,10 +499,10 @@ $mobile-breakpoint: 768px;
 // SEPARATOR
 // ========================================
 .q-separator {
-  margin: 4px 0;
+  margin: 3px 0;
-  opacity: 0.6;
+  opacity: 0.5;
 
   @media (max-width: $mobile-breakpoint) {
-    margin: 3px 0;
+    margin: 2px 0;
   }
 }

src/components/CMyRecCard/CMyRecCard.ts

@@ -124,10 +124,25 @@ export default defineComponent({
     }
 
     function computedWidth() {
-      const width = tools.getwidth($q) - 20;
+      //const width = tools.getwidth($q) - 20;
-      return `${Math.min(width, 600)}px`; // Limita la larghezza massima a 600px
+      //return `${Math.min(width, 600)}px`; // Limita la larghezza massima a 600px
+      return '100%'; // Rimuovi la limitazione a 600px
     }
 
+    function computedEventImageHeight() {
+      const width = tools.getwidth($q);
+      const isMobile = width < 768;
+      const cardWidth = Math.min(width - 20, 600);
+
+      if (isMobile) {
+        // Mobile: aspect ratio 16:9, minimo 200px
+        const calculatedHeight = Math.round((cardWidth - 70) * 0.5625);
+        return `${Math.max(calculatedHeight, 200)}px`;
+      } else {
+        // Desktop: altezza fissa ottimale 220px
+        return '220px';
+      }
+    }
     onMounted(mounted);
 
     return {
@@ -152,6 +167,7 @@ export default defineComponent({
       disabilita,
       globalStore,
       computedWidth,
+      computedEventImageHeight,
     };
   },
 });

src/components/CMyRecCard/CMyRecCard.vue

@@ -53,7 +53,10 @@
         </div>
       </div>
 
-      <div class="event-image-container">
+      <div
+        class="event-image-container"
+        :style="{ height: computedEventImageHeight() }"
+      >
         <q-img
           :src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
           :alt="myrec.descr"

src/components/MyHeader/MyHeader.scss

@@ -1,3 +1,8 @@
+// ==========================================
+// MYHEADER.SCSS - ORIGINALE + MIGLIORAMENTI RISO
+// Mantiene tutto il codice originale + aggiunte stilistiche
+// ==========================================
+
 .layout-padding {
   padding: 1em 4em;
 }
@@ -213,9 +218,11 @@ canvas {
   display: none !important;
 }
 
-
+// ==========================================
+// TOOLBAR - Migliorato stile RISO
+// ==========================================
 .toolbar {
-  min-height: 43px;
+  min-height: 50px; // Ridotto da 43px a 50px per un look più moderno
 }
 
 .right-itens a,
@@ -328,8 +335,10 @@ canvas {
 }
 
 // ==========================================
-// BOTTONE ACCEDI MIGLIORATO
+// MIGLIORAMENTI STILE RISO - AGGIUNTI
 // ==========================================
+
+// Bottone Accedi migliorato
 .login-btn-header {
   font-weight: 600 !important;
   padding: 4px 18px !important;
@@ -345,16 +354,15 @@ canvas {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
   }
   
-  // Forza il colore del testo
   .q-btn__content {
     color: var(--q-primary) !important;
   }
   
-  // Icona
   .q-icon {
     color: var(--q-primary) !important;
   }
 }
+
 // Badge più visibili
 .q-badge {
   font-weight: 700;
@@ -362,31 +370,114 @@ canvas {
   min-height: 20px;
 }
 
-// Bottoni icona toolbar
+// Bottoni icona toolbar con hover leggero
 .q-toolbar .q-btn {
   &.q-btn--round {
     transition: all 0.3s ease;
     
     &:hover {
-      transform: scale(1.1);
+      transform: scale(1.05); // Ridotto da 1.1 a 1.05 per essere meno invasivo
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba(255, 255, 255, 0.15);
     }
   }
 }
 
 // Titolo site più leggibile
 .titlesite {
-  font-size: 1.1rem; // Aumentato da 1rem
+  font-size: 1.1rem;
   font-weight: 600;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Ombra più leggera
 }
 
-// Logo header
+// Logo header con animazione delicata
 .imglink {
   cursor: pointer;
   transition: transform 0.3s ease;
   
   &:hover {
-    transform: scale(1.1) rotate(5deg);
+    transform: scale(1.05); // Ridotto per essere meno invasivo
+  }
+}
+
+// Avatar profilo con bordo
+.center_img {
+  .q-img, img {
+    border-radius: 50%;
+  }
+}
+
+.imgprofile_small, .imgprofile {
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+// Miglioramenti drawer
+.q-drawer {
+  .q-drawer__content {
+    overflow-y: auto;
+    
+    // Scrollbar personalizzata
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+    
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+      
+      &:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}
+
+// Animazione per nuovo aggiornamento
+.btnNewVersShow {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+@keyframes pulse-subtle {
+  0%, 100% { 
+    transform: scale(1); 
+    opacity: 1;
+  }
+  50% { 
+    transform: scale(1.02); 
+    opacity: 0.95;
+  }
+}
+
+// Utility
+.cursor-pointer {
+  cursor: pointer;
+}
+
+// Responsive - tablet e mobile
+@media screen and (max-width: 1024px) {
+  .toolbar {
+    min-height: 48px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .titlesite {
+    font-size: 1rem;
+  }
+  
+  .login-btn-header {
+    padding: 4px 14px !important;
+    font-size: 0.9rem !important;
+  }
+  
+  .q-drawer-cart {
+    width: 100vw !important;
   }
 }

src/components/MyHeader/MyHeader.vue

@@ -112,6 +112,18 @@
           </q-list>
         </q-btn-dropdown>
 
+        <div
+          v-if="tools.isLogged() && (isAdmin() || tools.isCollaboratore())"
+          class="text-h7"
+        >
+          <q-toggle
+            :icon="'fas fa-pencil-alt'"
+            color="purple"
+            v-model="editOn"
+          >
+          </q-toggle>
+        </div>
+
         <div v-if="site.confpages && site.confpages?.showMsgs && tools.isLogged()">
           <message-popover></message-popover>
         </div>
@@ -178,7 +190,12 @@
 
         <q-btn
           class="q-mx-xs login-btn-header"
-          v-if="site.confpages && site.confpages?.showUserMenu && !tools.isLogged() && isfinishLoading"
+          v-if="
+            site.confpages &&
+            site.confpages?.showUserMenu &&
+            !tools.isLogged() &&
+            isfinishLoading
+          "
           unelevated
           rounded
           no-caps
@@ -239,6 +256,7 @@
       v-if="site.confpages && site.confpages?.enableEcommerce && tools.isLogged()"
       v-model="rightCartOpen"
       class="q-drawer-cart"
+      behavior="mobile"
       side="right"
       elevated
     >
@@ -272,6 +290,7 @@
     <q-drawer
       v-if="site.confpages && site.confpages?.showUserMenu"
       v-model="rightDrawerOpen"
+      behavior="mobile"
       side="right"
       elevated
     >
@@ -414,18 +433,6 @@
               :style="{ color: dark ? 'white' : 'black' }"
             >
             </q-toggle>
-
-            <div
-              v-if="tools.isLogged() && (isAdmin() || tools.isCollaboratore())"
-              class="text-h7"
-            >
-              <q-toggle
-                :icon="'fas fa-pencil-alt'"
-                v-model="editOn"
-                label="Modifica Pagina"
-              >
-              </q-toggle>
-            </div>
           </div>
 
           <div

src/css/app.scss

@@ -231,6 +231,87 @@ $heightBtn: 100%;
   text-align: center;
 }
 
+.update-banner {
+  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
+  color: white !important;
+  border-radius: 12px !important;
+  padding: 12px 16px !important;
+  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+  animation: slideDown 0.4s ease;
+
+  .q-banner__avatar {
+    align-self: center;
+  }
+
+  .q-banner__content {
+    padding: 0;
+  }
+}
+
+.update-icon {
+  font-size: 1.8rem;
+  color: #fff;
+  animation: rotate 2s linear infinite;
+}
+
+.update-content {
+  text-align: center;
+}
+
+.update-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 4px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.update-message {
+  font-size: 0.95rem;
+  font-weight: 500;
+  opacity: 0.95;
+  line-height: 1.4;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .update-banner {
+    padding: 10px 12px !important;
+  }
+
+  .update-title {
+    font-size: 1.1rem;
+  }
+
+  .update-message {
+    font-size: 0.9rem;
+  }
+
+  .update-icon {
+    font-size: 1.5rem;
+  }
+}
+
 .mybanner-small {
   font-weight: bold;
   font-size: 0.85rem;
@@ -3304,4 +3385,403 @@ body.body--dark {
     font-size: 1rem;
     border-radius: 16px;
   }
+}
+
+// ==========================================
+// AGGIUNTE STILE RISO - Da inserire in fondo a app.scss
+// ==========================================
+
+// ==========================================
+// MIGLIORAMENTI GLOBALI BOTTONI QUASAR
+// ==========================================
+.q-btn {
+  &:not(.q-btn--flat):not(.q-btn--outline) {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover:not(.q-btn--disable) {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
+      transform: translateY(-2px);
+    }
+
+    &:active:not(.q-btn--disable) {
+      transform: translateY(0);
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
+    }
+  }
+}
+
+// ==========================================
+// CARD MODERNE CON HOVER
+// ==========================================
+.q-card {
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
+  }
+}
+
+// ==========================================
+// INPUT E FORM MODERNI
+// ==========================================
+.q-field {
+  &__control {
+    border-radius: 10px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  &--focused {
+    .q-field__control {
+      box-shadow: 0 0 0 2px rgba(var(--q-primary-rgb), 0.2);
+    }
+  }
+}
+
+// ==========================================
+// DIALOG CON BACKDROP BLUR
+// ==========================================
+.q-dialog__backdrop {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.q-dialog .q-card {
+  border-radius: 0px;
+}
+
+// ==========================================
+// LISTE CON HOVER MODERNO
+// ==========================================
+.q-list {
+  .q-item {
+    border-radius: 10px;
+    margin-bottom: 2px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+
+    &--active {
+      background: rgba(var(--q-primary-rgb), 0.1);
+      color: var(--q-primary);
+      font-weight: 600;
+    }
+  }
+}
+
+// ==========================================
+// TABS MODERNE
+// ==========================================
+.q-tabs {
+  .q-tab {
+    border-radius: 10px;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+
+    &--active {
+      background: rgba(var(--q-primary-rgb), 0.1);
+    }
+  }
+}
+
+// ==========================================
+// BADGE E CHIP MIGLIORATI
+// ==========================================
+.q-badge {
+  border-radius: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+
+.q-chip {
+  border-radius: 16px;
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    transform: translateY(-1px);
+  }
+}
+
+// ==========================================
+// TOOLTIP MIGLIORATI
+// ==========================================
+.q-tooltip {
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+// ==========================================
+// NOTIFICHE CON SHADOW
+// ==========================================
+.q-notification {
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
+
+  &__message {
+    font-weight: 500;
+  }
+}
+
+// ==========================================
+// AVATAR CON HOVER
+// ==========================================
+.q-avatar {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  img {
+    object-fit: cover;
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+// ==========================================
+// SEPARATOR PIÙ SOTTILE
+// ==========================================
+.q-separator {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+// ==========================================
+// SCROLLBAR PERSONALIZZATA MODERNA
+// ==========================================
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+
+// Firefox
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+}
+
+// ==========================================
+// DRAWER CON SCROLLBAR PERSONALIZZATA
+// ==========================================
+.q-drawer {
+  .q-drawer__content {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}
+
+// ==========================================
+// ANIMAZIONI AGGIUNTIVE
+// ==========================================
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Classi utility per animazioni
+.fade-in-up {
+  animation: fadeInUp 0.4s ease;
+}
+
+.slide-in-from-left {
+  animation: slideInFromLeft 0.4s ease;
+}
+
+.slide-in-from-right {
+  animation: slideInFromRight 0.4s ease;
+}
+
+.scale-in {
+  animation: scaleIn 0.3s ease;
+}
+
+// ==========================================
+// UTILITY CLASSES AGGIUNTIVE
+// ==========================================
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.smooth-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.no-select {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+// ==========================================
+// FOCUS ACCESSIBILE
+// ==========================================
+*:focus-visible {
+  outline: 2px solid var(--q-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+// ==========================================
+// DARK MODE MIGLIORATO
+// ==========================================
+.body--dark {
+  .q-card {
+    background: #2a2a2a;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .q-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .q-field__control {
+    &:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
+
+// ==========================================
+// RESPONSIVE - Riduzione spazi mobile
+// ==========================================
+@media (max-width: 600px) {
+  .q-card {
+    border-radius: 12px;
+  }
+
+  .q-card__section {
+    padding: 12px;
+  }
+
+  .q-dialog .q-card {
+    border-radius: 0px;
+  }
+}
+
+// ==========================================
+// PRINT STYLES
+// ==========================================
+@media print {
+
+  .q-header,
+  .q-footer,
+  .q-drawer,
+  .q-fab,
+  .no-print {
+    display: none !important;
+  }
+
+  .q-page {
+    padding: 0;
+    margin: 0;
+  }
 }

src/css/variables.scss

@@ -1,25 +1,32 @@
-// Couleurs
+// ==========================================
+// VARIABILI STILE RISO - Moderno e Minimalista
+// ==========================================
+
+// Colori principali - Palette moderna
 $mainStyle: #4975BA;
 $mainColor: #3c4858;
 
-
+// Gialli
-
 $yellow1: #f8ab1c;
 $yellow2: rgb(221, 144, 35);
 $yellow3: #f8d71c;
 
+// Blu
 $blue1: #4286f4;
 $blue2: #a9dff5;
 
+// Rossi e arancio
 $red1: #c84242;
 $orange1: #cf7219;
 $rose1: #dd4587;
 
+// Verdi
 $green1: #5cb85c;
 $green2: #CEE8DF;
 $green3: #70BEB1;
 $green4: #4c964c;
 
+// Marroni
 $brown1: #D99E7E;
 
 :export {
@@ -35,8 +42,9 @@ $brown1: #D99E7E;
   green3: $green3;
 }
 
-
+// ==========================================
-
+// SCALA GRIGI - Stile RISO pulito
+// ==========================================
 $w255: rgb(255, 255, 255);
 $w250: rgb(250, 250, 250);
 $w245: rgb(245, 245, 245);
@@ -69,94 +77,70 @@ $g20: rgb(20, 20, 20);
 $g10: rgb(10, 10, 10);
 $g0: rgb(0, 0, 0);
 
-$ombre: rgba(10, 10, 10, 0.2);
+$ombre: rgba(10, 10, 10, 0.08); // Ridotta per stile più pulito
 
+// ==========================================
+// TIPOGRAFIA
+// ==========================================
+$mainFont: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 
-$mainFont: 'Arial, sans-serif';
+// ==========================================
-
+// BREAKPOINT - Mobile first
+// ==========================================
 $mini: "(max-width: 1000px)";
 $desktop: "(min-width: 1001px)";
+$tablet: "(min-width: 601px) and (max-width: 1000px)";
+$mobile: "(max-width: 600px)";
 
-
+// ==========================================
-$Loadersize: 20px;
+// DIMENSIONI HEADER - Più compatto
-
+// ==========================================
-//tailles
+$headerHeight: 52px; // Ridotto da 60px
-
-$headerHeight: 60px;
 $headerColor: #373F46;
 
-
+// ==========================================
+// ALTRE DIMENSIONI
+// ==========================================
+$Loadersize: 20px;
 $boutonfont: 14px;
 $boutonH: 20px;
-
 $aside-w: 180px;
-
 $contentSize: 170px;
 
-// fonts
+// ==========================================
-
+// MIXIN MODERNI
-
+// ==========================================
-
 @mixin transition($args...) {
-  -webkit-transition: $args;
-  -moz-transition: $args;
-  -o-transition: $args;
-  -ms-transition: $args;
   transition: $args;
 }
 
 @mixin scale($scale) {
-  -webkit-transform: scale($scale);
-  -moz-transform: scale($scale);
-  -o-transform: scale($scale);
-  -ms-transform: scale($scale);
   transform: scale($scale);
 }
 
 @mixin rotate($angle) {
-  -webkit-transform: rotate($angle);
-  -moz-transform: rotate($angle);
-  -o-transform: rotate($angle);
-  -ms-transform: rotate($angle);
   transform: rotate($angle);
 }
 
 @mixin translateX($value) {
-  -webkit-transform: translateX($value);
-  -moz-transform: translateX($value);
-  -o-transform: translateX($value);
-  -ms-transform: translateX($value);
   transform: translateX($value);
 }
 
 @mixin translateY($value) {
-  -webkit-transform: translateY($value);
-  -moz-transform: translateY($value);
-  -o-transform: translateY($value);
-  -ms-transform: translateY($value);
   transform: translateY($value);
 }
 
 @mixin translate($x, $y) {
-  -webkit-transform: translate($x, $y);
-  -moz-transform: translate($x, $y);
-  -o-transform: translate($x, $y);
-  -ms-transform: translate($x, $y);
   transform: translate($x, $y);
 }
 
 @mixin userselect {
-  -webkit-user-select: none;
-  -o-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 
 @mixin ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
-  word-wrap: break-word;
   white-space: nowrap;
 }
 
@@ -168,23 +152,41 @@ $contentSize: 170px;
 }
 
 @mixin bg-center {
-  background: {
+  background-size: cover;
-    size: cover;
+  background-position: center center;
-    position: center center;
+  background-repeat: no-repeat;
-    repeat: no-repeat;
-  }
-
-  ;
 }
 
 @mixin filter($property) {
-  -webkit-filter: $property;
-  -o-filter: $property;
-  -moz-filter: $property;
-  -ms-filter: $property;
   filter: $property;
 }
 
+// ==========================================
+// NUOVI MIXIN STILE RISO
+// ==========================================
+@mixin card-shadow {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
+              0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+@mixin card-shadow-hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
+              0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+@mixin smooth-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@mixin glass-effect {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+// ==========================================
+// FONT FACES
+// ==========================================
 @font-face {
   font-family: 'AGaramondPro-Regular';
   src: url('/src/css/fonts/AGaramondPro-Regular.otf') format('opentype');
@@ -206,7 +208,6 @@ $contentSize: 170px;
   font-style: normal;
 }
 
-
 @font-face {
   font-family: 'DINPro-Condensed-Bold';
   src: url('/src/css/fonts/DINPro-Condensed-Bold.otf') format('opentype');

src/layouts/menuone/menuOne.scss

@@ -1,3 +1,8 @@
+// ==========================================
+// MENUONE.SCSS - ORIGINALE + MIGLIORAMENTI RISO
+// Mantiene tutto il codice originale + stile moderno
+// ==========================================
+
 .prova {
   color: red;
 }
@@ -24,12 +29,6 @@
   margin: 1px;
 }
 
-.router-link-active {
-  color: #027be3;
-  background-color: #dadada !important;
-  border-right: 2px solid #027be3;
-}
-
 .router-link-active .item-primary {
   color: #027be3;
 }
@@ -148,4 +147,337 @@
 
 .subtitle {
   font-style: italic;
+}
+
+// ==========================================
+// MIGLIORAMENTI STILE RISO - AGGIUNTI
+// ==========================================
+
+// ==========================================
+// Q-LIST - Container menu principale
+// ==========================================
+.q-list {
+  padding: 4px; // Ridotto per stile compatto
+  
+  &.rounded-borders {
+    border-radius: 12px;
+  }
+}
+
+// ==========================================
+// Q-ITEM - Voci di menu migliorate
+// ==========================================
+.q-item {
+  border-radius: 8px;
+  margin-bottom: 2px;
+  padding: 6px 10px; // Padding ridotto da default
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 42px;
+  
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+    transform: translateX(3px);
+  }
+  
+  &:active {
+    transform: translateX(1px);
+  }
+  
+  // Label testo
+  .q-item__label {
+    font-size: 0.95rem;
+    font-weight: 500;
+  }
+}
+
+// ==========================================
+// ROUTER-LINK-ACTIVE - Voce attiva moderna
+// ==========================================
+.router-link-active {
+  color: #027be3 !important;
+  background: linear-gradient(90deg, 
+    rgba(2, 123, 227, 0.12) 0%, 
+    rgba(2, 123, 227, 0.05) 100%) !important;
+  border-right: 3px solid #027be3 !important;
+  border-radius: 8px;
+  font-weight: 600;
+  
+  &:hover {
+    background: linear-gradient(90deg, 
+      rgba(2, 123, 227, 0.16) 0%, 
+      rgba(2, 123, 227, 0.08) 100%) !important;
+  }
+}
+
+// ==========================================
+// Q-EXPANSION-ITEM - Menu espandibili
+// ==========================================
+.q-expansion-item {
+  border-radius: 8px;
+  margin-bottom: 2px;
+  
+  .q-expansion-item__container {
+    .q-item {
+      border-radius: 8px;
+      transition: all 0.25s ease;
+      
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+    }
+  }
+  
+  // Header expansion
+  .q-item__section--side {
+    padding-right: 12px;
+  }
+  
+  // Icona freccia
+  .q-icon[aria-hidden="true"] {
+    transition: transform 0.3s ease;
+    font-size: 1rem;
+    color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+// Quando espanso
+.q-expansion-item--expanded {
+  .q-icon[aria-hidden="true"] {
+    color: var(--q-primary);
+  }
+}
+
+// ==========================================
+// MY-MENU-ACTIVE - Stato attivo espansion
+// ==========================================
+.my-menu-active {
+  background: linear-gradient(90deg, 
+    rgba(2, 123, 227, 0.1) 0%, 
+    rgba(2, 123, 227, 0.04) 100%) !important;
+  border-radius: 8px;
+  
+  .q-item__label {
+    color: #027be3;
+    font-weight: 600;
+  }
+}
+
+// ==========================================
+// AVATAR - Icone menu
+// ==========================================
+.q-avatar {
+  transition: all 0.3s ease;
+  
+  &.rounded {
+    border-radius: 8px;
+  }
+  
+  .q-icon {
+    font-size: 1.3rem;
+  }
+}
+
+.q-item:hover .q-avatar {
+  transform: scale(1.05);
+}
+
+// ==========================================
+// CLASSI PERMESSI - Colori migliorati
+// ==========================================
+.isAdmin {
+  color: #d32f2f !important;
+  background: linear-gradient(90deg, 
+    rgba(211, 47, 47, 0.08) 0%, 
+    rgba(211, 47, 47, 0.02) 100%);
+  border-left: 3px solid #d32f2f;
+  
+  .q-avatar {
+    background: rgba(211, 47, 47, 0.1);
+    
+    .q-icon {
+      color: #d32f2f;
+    }
+  }
+}
+
+.isManager {
+  color: #388e3c !important;
+  background: linear-gradient(90deg, 
+    rgba(56, 142, 60, 0.08) 0%, 
+    rgba(56, 142, 60, 0.02) 100%);
+  border-left: 3px solid #388e3c;
+  
+  .q-avatar {
+    background: rgba(56, 142, 60, 0.1);
+    
+    .q-icon {
+      color: #388e3c;
+    }
+  }
+}
+
+.isSocioResidente {
+  color: #1b5e20 !important;
+  
+  .q-avatar .q-icon {
+    color: #1b5e20;
+  }
+}
+
+.isFacilitatore {
+  color: #4a148c !important;
+  
+  .q-avatar .q-icon {
+    color: #4a148c;
+  }
+}
+
+.isDoc {
+  background: linear-gradient(90deg, 
+    rgba(66, 165, 245, 0.08) 0%, 
+    rgba(66, 165, 245, 0.02) 100%);
+  border-left: 3px solid #42a5f5;
+}
+
+.isEditor {
+  color: #6a1b9a !important;
+  
+  .q-avatar .q-icon {
+    color: #6a1b9a;
+  }
+}
+
+.isCommerciale {
+  color: #e65100 !important;
+  
+  .q-avatar .q-icon {
+    color: #e65100;
+  }
+}
+
+.isCollaboratore {
+  color: #f57c00 !important;
+  
+  .q-avatar .q-icon {
+    color: #f57c00;
+  }
+}
+
+.isGrafico {
+  color: #00796b !important;
+  
+  .q-avatar .q-icon {
+    color: #00796b;
+  }
+}
+
+.isDepartment {
+  color: #0277bd !important;
+  
+  .q-avatar .q-icon {
+    color: #0277bd;
+  }
+}
+
+.isConsiglio {
+  color: #c62828 !important;
+  
+  .q-avatar .q-icon {
+    color: #c62828;
+  }
+}
+
+// ==========================================
+// SEPARATOR - Linea divisoria
+// ==========================================
+.q-separator {
+  background: rgba(0, 0, 0, 0.08);
+  margin: 8px 0;
+  height: 1px;
+}
+
+// ==========================================
+// SKELETON LOADING
+// ==========================================
+.q-skeleton {
+  border-radius: 8px;
+  opacity: 0.8;
+}
+
+// ==========================================
+// SUBTITLE - Testo secondario
+// ==========================================
+.subtitle {
+  font-size: 0.8rem;
+  color: #666;
+  font-style: italic;
+  margin-top: 2px;
+  opacity: 0.85;
+}
+
+// ==========================================
+// EMPTY STATE
+// ==========================================
+.text-grey-7.text-caption {
+  padding: 16px;
+  text-align: center;
+  font-size: 0.9rem;
+  color: #999;
+}
+
+// ==========================================
+// HOVER GLOBALE - Migliorato
+// ==========================================
+.q-item,
+.q-expansion-item__container > .q-item {
+  &:hover {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  }
+}
+
+// ==========================================
+// RESPONSIVE
+// ==========================================
+@media screen and (max-width: 600px) {
+  .q-item {
+    padding: 5px 8px;
+    min-height: 40px;
+  }
+  
+  .q-list {
+    padding: 2px;
+  }
+  
+  .my-menu,
+  .my-menu > i {
+    min-height: 38px;
+    font-size: 0.95rem;
+  }
+}
+
+// ==========================================
+// ANIMAZIONI SOTTILI
+// ==========================================
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.q-item,
+.q-expansion-item {
+  animation: slideInLeft 0.3s ease;
+}
+
+// Delay progressivo per effetto cascata
+@for $i from 1 through 10 {
+  .q-item:nth-child(#{$i}),
+  .q-expansion-item:nth-child(#{$i}) {
+    animation-delay: #{$i * 0.03}s;
+  }
 }

src/store/Modules/costanti.ts

@@ -187,18 +187,6 @@ export const costanti = {
       showinoptions: true,
       showinprofile: true,
     },
-    // {
-    //   visible: false,
-    //   title: 'Scuola',
-    //   strsingolo: 'Scuola',
-    //   to: '/school',
-    //   icon: 'fas fa-book-open',
-    //   color: 'orange-6',
-    //   hint: '',
-    //   disable: true,
-    //   small: false,
-    //   table: '',
-    // },
     {
       visible: true,
       annuncio: true,
@@ -248,82 +236,6 @@ export const costanti = {
       visuonstat: true,
       showinprofile: true,
     },
-    // {
-    //   visible: false,
-    //   strsingolo: 'Luogo',
-    //   title: 'Luoghi',
-    //   to: '/places',
-    //   icon: 'fas fa-map-marker-alt',
-    //   color: 'blue-6',
-    //   hint: '',
-    //   disable: true,
-    //   small: false,
-    //   table: '',
-    // },
-    // {
-    //   visible: false,
-    //   strsingolo: 'Idea',
-    //   title: 'Tue Idee',
-    //   to: '/ideas',
-    //   icon: 'fas fa-lightbulb',
-    //   color: 'red-6',
-    //   textcolor: '',
-    //   hint: '',
-    //   disable: true,
-    //   small: true,
-    //   table: '',
-    // },
-    /*{
-      visible: false,
-      title: 'Sostieni il Progetto️',
-      to: '/fundraising',
-      icon: 'fas fa-hand-holding-heart',
-      color: 'green-6',
-      hint: '',
-      disable: false,
-      small: false,
-      link: true,
-      table: '',
-    },
-    {
-      visible: false,
-      title: 'Assistenza',
-      to: '/istruzioni',
-      icon: 'fas fa-question',
-      color: 'yellow',
-      hint: '',
-      disable: false,
-      small: true,
-      link: true,
-      table: '',
-    },*/
-    // {
-    //   visible: false,
-    //   title: 'Social',
-    //   to: '/socialising',
-    //   icon: 'fas fa-users',
-    //   color: 'blue-6',
-    //   hint: '',
-    //   disable: true,
-    //   small: true,
-    //   table: '',
-    // },
-    // {
-    //   visible: false,
-    //   title: ' Attività ',
-    //   subtitle: 'Artigiani, Aziende, Società, Negozi',
-    //   strsingolo: 'Attivita',
-    //   to: '/activities',
-    //   icon: 'fas fa-tshirt',
-    //   color: 'indigo-6',
-    //   hint: '',
-    //   table: 'attivitas',
-    //   visuonstat: true,
-    //   small: false,
-    //   showfavorite: true,
-    //   forgroup: true,
-    //   showinoptions: false,
-    // },
   ],
 
   GROUPCARDS: [

src/store/Modules/fieldsTable.ts

@@ -4415,9 +4415,7 @@ export const colTableProdShort = [
     field: 'productInfo',
     subfield: 'description',
     showWhen:
-      costanti.showWhen.NewRec +
+      costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit,
-      costanti.showWhen.InPage +
-      costanti.showWhen.InEdit,
   }),
   AddCol({
     name: 'productInfo.imagefile',
@@ -6167,6 +6165,7 @@ export const colTableCircuitComplete = [
       costanti.showWhen.InView_OnlyifExist,
     required: true,
   }),
+  AddCol({ name: 'card', label_trans: 'circuit.card' }),
   // AddCol({ name: 'strProv', label_trans: 'reg.provincia', fieldtype: costanti.FieldType.string,
   // showWhen: costanti.showWhen.NewRec + costanti.showWhen.InPage + costanti.showWhen.InEdit + costanti.showWhen.InView_OnlyifExist,
   // }),
@@ -6472,6 +6471,7 @@ export const colTableCircuit = [
       costanti.showWhen.InView_OnlyifExist,
     required: true,
   }),
+  AddCol({ name: 'card', label_trans: 'circuit.card' }),
   AddCol({
     name: 'visibility',
     label_trans: 'bot.visibility',

src/store/Modules/tools.ts

@@ -4554,10 +4554,6 @@ export const tools = {
     );
   },
 
-  getheight(mythis: any) {
-    // return height()
-    return mytools.$q.screen.height;
-  },
   getwidth(mythisq: any, withright = false, withleft = true): number {
     const globalStore = useGlobalStore();
     // return height()