From 2abdda3b4443282c4c0097e1e10bc9b3f989de73 Mon Sep 17 00:00:00 2001 From: Surya Paolo Date: Fri, 28 Nov 2025 21:28:31 +0100 Subject: [PATCH] - aggiornato Card service, e CGridTableRec. --- .../CGridTableRec/CGridTableRec.scss | 181 +++++-- .../CGridTableRec/CGridTableRec.vue | 1 + src/components/CMenuItem/CMenuItem.scss | 477 ++++++++++++++--- .../CMyCardService/CMyCardService.vue | 42 +- src/components/CMyElem/CMyElem.ts | 2 + src/components/CMyElem/CMyElem.vue | 63 ++- src/components/CMyRecCard/CMyRecCard.scss | 188 +++---- src/components/CMyRecCard/CMyRecCard.ts | 20 +- src/components/CMyRecCard/CMyRecCard.vue | 5 +- src/components/MyHeader/MyHeader.scss | 115 ++++- src/components/MyHeader/MyHeader.vue | 33 +- src/css/app.scss | 480 ++++++++++++++++++ src/css/variables.scss | 125 ++--- src/layouts/menuone/menuOne.scss | 344 ++++++++++++- src/store/Modules/costanti.ts | 88 ---- src/store/Modules/fieldsTable.ts | 6 +- src/store/Modules/tools.ts | 4 - 17 files changed, 1753 insertions(+), 421 deletions(-) diff --git a/src/components/CGridTableRec/CGridTableRec.scss b/src/components/CGridTableRec/CGridTableRec.scss index e130c609..69c45567 100755 --- a/src/components/CGridTableRec/CGridTableRec.scss +++ b/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; -} -.q-carousel__slide{ - padding: 8px !important; + @media (max-width: $mobile-breakpoint) { + padding: 3px !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 { - background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); - color: white; - padding: 12px 16px; - min-height: 52px; - border-radius: 12px 12px 0 0; - - @media (max-width: 768px) { - padding: 5px 12px; - min-height: 48px; + @media (max-width: $mobile-breakpoint) { + max-height: calc(100vh - 100px); } } +// ======================================== +// 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); - box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3); + transform: translateY(-1px); + 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; - gap: 10px; + padding: 6px; + gap: 8px; - @media (max-width: 768px) { - padding: 6px; - gap: 8px; + // Desktop: layout a griglia 2 colonne + @media (min-width: $mobile-breakpoint + 1) { + 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%; } \ No newline at end of file diff --git a/src/components/CGridTableRec/CGridTableRec.vue b/src/components/CGridTableRec/CGridTableRec.vue index ef961302..371641d4 100755 --- a/src/components/CGridTableRec/CGridTableRec.vue +++ b/src/components/CGridTableRec/CGridTableRec.vue @@ -499,6 +499,7 @@ v-for="(rec, indexrow) in serverData" :key="indexrow" :name="indexrow" + class="grid-card-item" > i { - min-height: 40px; - min-width: 26px; - font-size: 1rem; + min-height: 40px; + min-width: 26px; + font-size: 1rem; } .my-menu-small, .my-menu-small>i { - min-height: 40px; - min-width: 26px; - font-size: 0.75rem; + min-height: 40px; + min-width: 26px; + 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; - font-size: 1rem; + min-width: 2px; + font-size: 1rem; } .my-menu-icon>i { - min-width: 26px; - font-size: 1.25rem; + min-width: 26px; + 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; - font-size: 1rem; + min-width: 26px; + 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; - border-radius: 8px; + font-size: 2.5rem !important; + border-radius: 8px; } - /* - .menu-enter-active, .scale-enter { - -webkit-animation: moveFromTopFade .5s ease both; - animation: moveFromTopFade .5s ease both; - } - - .menu-leave-to, .scale-leave-active { - -webkit-animation: moveToBottom .5s ease both; - animation: moveToBottom .5s ease both; - } - */ +.menu-enter-active, .scale-enter { + -webkit-animation: moveFromTopFade .5s ease both; + animation: moveFromTopFade .5s ease both; +} + +.menu-leave-to, .scale-leave-active { + -webkit-animation: moveToBottom .5s ease both; + animation: moveToBottom .5s ease both; +} +*/ .bigmenu { - font-size: 1.25rem; - font-weight: bold; - text-shadow: 0.0512rem 0.052rem .01rem #555; + font-size: 1.25rem; + font-weight: bold; + 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; +} \ No newline at end of file diff --git a/src/components/CMyCardService/CMyCardService.vue b/src/components/CMyCardService/CMyCardService.vue index b2d43036..1b22ea77 100644 --- a/src/components/CMyCardService/CMyCardService.vue +++ b/src/components/CMyCardService/CMyCardService.vue @@ -7,9 +7,10 @@
- + {{ tools.getTitleAnnuncio(table) }} @@ -445,21 +445,21 @@ /> - - - + + + - - {{ globalStore.getStatusSkillById(recstatus) }} - - - + {{ globalStore.getStatusSkillById(recstatus) }} + + +
@@ -511,9 +511,7 @@ text-color="white" dense > - {{ - getSectorByRec(myrec)[0].descr - }} + {{ getSectorByRec(myrec)[0].descr }} - {{ - getRecGoodSkillByRec(myrec)[0].descr - }} + {{ getRecGoodSkillByRec(myrec)[0].descr }} diff --git a/src/components/CMyElem/CMyElem.ts b/src/components/CMyElem/CMyElem.ts index 79cdea6a..1dc10190 100755 --- a/src/components/CMyElem/CMyElem.ts +++ b/src/components/CMyElem/CMyElem.ts @@ -219,6 +219,7 @@ export default defineComponent({ const newtype = ref(''); const canShowVersion = ref(false); + const nascondiBottone = ref(false); const isAppRunning = computed(() => globalStore.isAppRunning); @@ -490,6 +491,7 @@ export default defineComponent({ isNewVersionAvailable, enablePwa, mostraInviti, + nascondiBottone, }; }, }); diff --git a/src/components/CMyElem/CMyElem.vue b/src/components/CMyElem/CMyElem.vue index 9c01fd60..ca36e5ef 100755 --- a/src/components/CMyElem/CMyElem.vue +++ b/src/components/CMyElem/CMyElem.vue @@ -89,7 +89,7 @@ v-else-if="myel.type === shared_consts.ELEMTYPE.RISOHOME" class="myElemBase" > - +
-
- Chiudere e Riaprire la App, per completare l'Aggiornamento -
-
- Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse scomparire il - messaggio, chiudere e riaprire la pagina. + +
+
Aggiornamento Disponibile
+
+ + Chiudi e riapri l'app per completare l'aggiornamento + + + Aggiornamento in corso... Se dopo 1 minuto il messaggio persiste, + ricarica la pagina. + +
+ + +
@@ -1201,11 +1211,16 @@ > - - + + diff --git a/src/components/CMyRecCard/CMyRecCard.scss b/src/components/CMyRecCard/CMyRecCard.scss index 7df9c440..a4d99bcc 100755 --- a/src/components/CMyRecCard/CMyRecCard.scss +++ b/src/components/CMyRecCard/CMyRecCard.scss @@ -7,12 +7,13 @@ $negative-color: #c10015; $grey-color: #666; $grey-light: #999; -$border-radius: 12px; -$border-radius-sm: 8px; +$border-radius: 10px; +$border-radius-sm: 6px; $transition-speed: 0.3s; -$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); -$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); +$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(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%); - border-color: rgba(66, 165, 245, 0.15); - // ... resto degli stili blu + 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.12); } } &.is-odd { .modern-rec-card { - background: linear-gradient(135deg, rgba(38, 197, 218, 0.159) 0%, rgba(0, 150, 136, 0.05) 100%); - border-color: rgba(38, 198, 218, 0.15); - // ... resto degli stili teal + 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.12); } } } @@ -49,30 +49,35 @@ $mobile-breakpoint: 768px; // ======================================== .event-card { display: flex; - gap: 8px; - margin-bottom: 8px; + gap: 6px; + 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; - margin-bottom: 6px; + gap: 5px; + 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; - padding: 6px 3px; + flex: 0 0 65px; + 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; - margin: 3px 0; + font-size: 1.625rem; + 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; - padding: 2px 4px; + font-size: 0.625rem; + padding: 1px 4px; } } .date-separator { - font-size: 1rem; - margin: 4px 0; + font-size: 0.9375rem; + 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; - - @media (max-width: $mobile-breakpoint) { - min-height: 160px; - } + overflow: hidden; + + // 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; - margin-bottom: 3px; + padding: 5px; + 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; - left: -4px; + top: -3px; + 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; - margin-bottom: 4px; + gap: 3px; + margin-bottom: 3px; align-items: center; @media (max-width: $mobile-breakpoint) { - gap: 3px; - margin-bottom: 3px; + gap: 2px; + 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; - padding: 3px 8px; + margin: 3px 0; + 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; - padding: 2px 6px; + margin: 2px 0; + 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; - height: 32px; + width: 30px; + 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; - opacity: 0.6; + margin: 3px 0; + opacity: 0.5; @media (max-width: $mobile-breakpoint) { - margin: 3px 0; + margin: 2px 0; } } \ No newline at end of file diff --git a/src/components/CMyRecCard/CMyRecCard.ts b/src/components/CMyRecCard/CMyRecCard.ts index aa565d1a..5bb98d5c 100755 --- a/src/components/CMyRecCard/CMyRecCard.ts +++ b/src/components/CMyRecCard/CMyRecCard.ts @@ -124,10 +124,25 @@ export default defineComponent({ } function computedWidth() { - const width = tools.getwidth($q) - 20; - return `${Math.min(width, 600)}px`; // Limita la larghezza massima a 600px + //const width = tools.getwidth($q) - 20; + //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, }; }, }); diff --git a/src/components/CMyRecCard/CMyRecCard.vue b/src/components/CMyRecCard/CMyRecCard.vue index 6068bf02..0b7c23e3 100755 --- a/src/components/CMyRecCard/CMyRecCard.vue +++ b/src/components/CMyRecCard/CMyRecCard.vue @@ -53,7 +53,10 @@
-
+
+
+ + +
+
@@ -178,7 +190,12 @@
.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; + } } \ No newline at end of file diff --git a/src/store/Modules/costanti.ts b/src/store/Modules/costanti.ts index 632f766b..050d9c84 100755 --- a/src/store/Modules/costanti.ts +++ b/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: [ diff --git a/src/store/Modules/fieldsTable.ts b/src/store/Modules/fieldsTable.ts index b78e3b47..7ee1f40c 100755 --- a/src/store/Modules/fieldsTable.ts +++ b/src/store/Modules/fieldsTable.ts @@ -4415,9 +4415,7 @@ export const colTableProdShort = [ field: 'productInfo', subfield: 'description', showWhen: - costanti.showWhen.NewRec + - costanti.showWhen.InPage + - costanti.showWhen.InEdit, + costanti.showWhen.NewRec + 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', diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts index fd470813..29c12961 100644 --- a/src/store/Modules/tools.ts +++ b/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()