From a164db8bf34cdf6bd11a7191422817a55d7ac104 Mon Sep 17 00:00:00 2001 From: Surya Paolo Date: Mon, 3 Nov 2025 01:47:21 +0100 Subject: [PATCH] - migliorata grafica statistiche valori - corretto pagina profilo --- src/common/shared_vuejs.ts | 1 + src/components/CElemStat/CElemStat.scss | 451 +++++++++++++++++++++-- src/components/CElemStat/CElemStat.ts | 17 +- src/components/CElemStat/CElemStat.vue | 59 ++- src/components/CMyCircuit/CMyCircuit.vue | 248 ++++++------- src/components/CStatusReg/CStatusReg.vue | 13 +- src/store/Modules/tools.ts | 2 +- 7 files changed, 600 insertions(+), 191 deletions(-) diff --git a/src/common/shared_vuejs.ts b/src/common/shared_vuejs.ts index 2e99da7a..6552feb0 100755 --- a/src/common/shared_vuejs.ts +++ b/src/common/shared_vuejs.ts @@ -1,4 +1,5 @@ export const shared_consts = { + USER_ADMIN_CIRCUITS: ['surya1977', 'ElenaEspx'], Accepted: { CHECK_READ_GUIDELINES: { value: 1, diff --git a/src/components/CElemStat/CElemStat.scss b/src/components/CElemStat/CElemStat.scss index 295a287c..26047c77 100644 --- a/src/components/CElemStat/CElemStat.scss +++ b/src/components/CElemStat/CElemStat.scss @@ -1,52 +1,435 @@ -.my-card-stat { +// Variabili per consistenza +$card-radius-desktop: 20px; +$card-radius-tablet: 16px; +$card-radius-mobile: 14px; +$transition-smooth: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); +$transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + +.stat-card { + position: relative; width: 100%; max-width: 200px; - min-width: 120px; - padding: 1rem 1rem; + min-width: 150px; + height: 170px; + margin: 10px; + padding: 0; + border-radius: $card-radius-desktop; + background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%); + box-shadow: + 0 10px 30px -5px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(0, 0, 0, 0.02); + transition: $transition-base; + overflow: hidden; + cursor: default; + + &:hover { + transform: translateY(-6px) scale(1.02); + box-shadow: + 0 20px 40px -8px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(0, 0, 0, 0.03); + + .stat-icon { + transform: scale(1.15) rotate(-8deg); + } + + .stat-icon-glow { + opacity: 1; + transform: scale(1.4); + } + + .stat-shine { + transform: translateX(100%) translateY(-100%); + opacity: 0; + } + + .stat-border { + opacity: 1; + } + } + + &:active { + transform: translateY(-4px) scale(1); + } + + @media (max-width: 960px) { + max-width: 180px; + min-width: 140px; + height: 160px; + margin: 8px; + border-radius: $card-radius-tablet; + } - box-shadow: none; @media (max-width: 718px) { - // PER VERSIONE MOBILE - max-width: 150px; - padding: 0; + max-width: calc(33.333% - 12px); + min-width: 100px; + height: 145px; + margin: 6px; + border-radius: $card-radius-mobile; + } + + @media (max-width: 480px) { + max-width: calc(33.333% - 10px); + min-width: 95px; + height: 140px; + margin: 5px; } } -.my-card-small-stat { +.stat-content { + position: relative; + z-index: 2; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + padding: 20px 14px; + text-align: center; + + @media (max-width: 960px) { + padding: 18px 12px; + } + + @media (max-width: 718px) { + padding: 16px 10px; + } + + @media (max-width: 480px) { + padding: 14px 8px; + } +} + +.stat-icon-wrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 64px; + height: 64px; + border-radius: 50%; + background: linear-gradient(145deg, #ffffff, #f5f5f5); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.08), + inset 0 1px 2px rgba(255, 255, 255, 0.9); + + @media (max-width: 960px) { + width: 58px; + height: 58px; + } + + @media (max-width: 718px) { + width: 52px; + height: 52px; + } + + @media (max-width: 480px) { + width: 48px; + height: 48px; + } +} + +.stat-icon-glow { + position: absolute; width: 100%; - max-width: 60px; - min-width: 40px; - box-shadow: none; - - @media (max-width: 718px) { - // PER VERSIONE MOBILE - max-width: 50px; - min-width: 40px; - } - + height: 100%; + border-radius: 50%; + opacity: 0; + transform: scale(1); + transition: $transition-smooth; + pointer-events: none; } +.stat-icon { + font-size: 32px !important; + transition: $transition-smooth; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); -.text-h5-short { - line-height: 1.25rem !important; + @media (max-width: 960px) { + font-size: 29px !important; + } @media (max-width: 718px) { - line-height: 1rem !important; + font-size: 26px !important; } + + @media (max-width: 480px) { + font-size: 24px !important; + } +} + +.stat-title { + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.03em; + line-height: 1.3; + opacity: 0.85; + text-transform: uppercase; + margin: 4px 0; + color: #424242; + + @media (max-width: 960px) { + font-size: 0.7rem; + } + + @media (max-width: 718px) { + font-size: 0.65rem; + margin: 2px 0; + } + + @media (max-width: 480px) { + font-size: 0.6rem; + letter-spacing: 0.02em; + } +} + +.stat-value-container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + + @media (max-width: 718px) { + gap: 5px; + } +} + +.stat-value { + font-size: 1.5rem; + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.03em; + color: #1a1a1a; + + @media (max-width: 960px) { + font-size: 1.375rem; + } + + @media (max-width: 718px) { + font-size: 1.25rem; + } + + @media (max-width: 480px) { + font-size: 1.125rem; + } +} + +.stat-badge { + position: relative; + display: inline-flex; + align-items: center; + padding: 4px 10px; + border-radius: 24px; + font-size: 0.625rem; + font-weight: 600; + color: white; + box-shadow: + 0 3px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 2px rgba(255, 255, 255, 0.2); + backdrop-filter: blur(8px); + overflow: hidden; + + @media (max-width: 960px) { + padding: 3px 9px; + font-size: 0.6rem; + } + + @media (max-width: 718px) { + padding: 3px 8px; + font-size: 0.5625rem; + } + + @media (max-width: 480px) { + padding: 2px 7px; + font-size: 0.5rem; + } +} + +.stat-badge-pulse { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.3); + border-radius: 24px; + animation: pulse 2s ease-in-out infinite; +} + +.stat-badge-icon { + margin-right: 4px; + z-index: 1; + animation: bounce-subtle 2s ease-in-out infinite; + + @media (max-width: 718px) { + margin-right: 3px; + } +} + +.stat-badge-text { + z-index: 1; +} + +.stat-shine { + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.4) 50%, + transparent 70% + ); + transform: translateX(-100%) translateY(-100%); + transition: transform 0.8s ease; + pointer-events: none; + z-index: 3; +} + +.stat-border { + position: absolute; + inset: 0; + border-radius: inherit; + padding: 2px; + background: linear-gradient(145deg, rgba(33, 150, 243, 0.3), rgba(156, 39, 176, 0.3)); + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; + z-index: 1; +} + +// Animations +@keyframes pulse { + 0%, 100% { + opacity: 0.3; + transform: scale(1); + } + 50% { + opacity: 0.5; + transform: scale(1.05); + } +} + +@keyframes bounce-subtle { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-2px); + } +} + +.badge-pop-enter-active { + animation: badge-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.badge-pop-leave-active { + animation: badge-pop-out 0.3s ease; +} + +@keyframes badge-pop-in { + 0% { + opacity: 0; + transform: scale(0.5) translateY(10px); + } + 60% { + transform: scale(1.1) translateY(-2px); + } + 100% { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes badge-pop-out { + to { + opacity: 0; + transform: scale(0.8) translateY(5px); + } +} + +// Small variant +.my-card-small-stat { + max-width: 110px; + min-width: 90px; + height: 130px; + + .stat-content { + padding: 14px 10px; + } + + .stat-icon-wrapper { + width: 44px; + height: 44px; + } + + .stat-icon { + font-size: 24px !important; + } + + .stat-title { + font-size: 0.65rem; + } + + .stat-value { + font-size: 1.125rem; + } + + .stat-badge { + padding: 3px 8px; + font-size: 0.5625rem; + } + + @media (max-width: 718px) { + max-width: 95px; + min-width: 80px; + height: 120px; + } +} + +// Dark mode support +.body--dark { + .stat-card { + background: linear-gradient(145deg, #1e1e1e 0%, #2a2a2a 100%); + box-shadow: + 0 10px 30px -5px rgba(0, 0, 0, 0.4), + 0 0 0 1px rgba(255, 255, 255, 0.05); + + &:hover { + box-shadow: + 0 20px 40px -8px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.08); + } + } + + .stat-icon-wrapper { + background: linear-gradient(145deg, #2a2a2a, #1e1e1e); + box-shadow: + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 2px rgba(255, 255, 255, 0.05); + } + + .stat-title { + color: #e0e0e0; + } + + .stat-value { + color: #ffffff; + } +} + +// Utility classes +.boldhigh { + font-weight: 700; } .fixed-size { - width: 160px; - /* Larghezza fissa */ - height: 150px; - /* Altezza fissa */ - display: flex; - /* Assicura che il contenuto sia centralizzato */ - flex-direction: column; - /* Impila gli elementi verticalmente */ - justify-content: center; - /* Centra verticalmente */ - align-items: center; - /* Centra orizzontalmente */ - margin: 4px; + // Classe mantenuta per compatibilità } \ No newline at end of file diff --git a/src/components/CElemStat/CElemStat.ts b/src/components/CElemStat/CElemStat.ts index 64d3d3bf..4dfbbc97 100644 --- a/src/components/CElemStat/CElemStat.ts +++ b/src/components/CElemStat/CElemStat.ts @@ -17,8 +17,23 @@ export default defineComponent({ components: {}, setup(props) { + function getGlowColor(classColor: string): string { + const colorMap: Record = { + 'text-red': 'rgba(244, 67, 54, 0.15)', + 'text-orange': 'rgba(255, 152, 0, 0.15)', + 'text-green': 'rgba(76, 175, 80, 0.15)', + 'text-blue': 'rgba(33, 150, 243, 0.15)', + 'text-indigo': 'rgba(63, 81, 181, 0.15)', + 'text-blueviolet': 'rgba(138, 43, 226, 0.15)', + 'text-purple': 'rgba(156, 39, 176, 0.15)', + 'text-teal': 'rgba(0, 150, 136, 0.15)', + }; + return colorMap[classColor] || 'rgba(0, 0, 0, 0.05)'; + } + return { - tools + tools, + getGlowColor } }, }) diff --git a/src/components/CElemStat/CElemStat.vue b/src/components/CElemStat/CElemStat.vue index f8fa5986..783868f6 100644 --- a/src/components/CElemStat/CElemStat.vue +++ b/src/components/CElemStat/CElemStat.vue @@ -1,28 +1,47 @@ diff --git a/src/components/CMyCircuit/CMyCircuit.vue b/src/components/CMyCircuit/CMyCircuit.vue index 1f4ab513..ab9a5d36 100755 --- a/src/components/CMyCircuit/CMyCircuit.vue +++ b/src/components/CMyCircuit/CMyCircuit.vue @@ -187,130 +187,132 @@ v-if="visu === costanti.USER_CIRCUITS && tools.isUserOk()" > +
+ + + + + {{ + circuit.askManagerToEnter ? t('circuit.ask') : t('circuit.enter') + }} + + + + + + {{ t('shared.refuse_ask') }} + + + + + {{ t('shared.cancel_ask') }} + + + + + + {{ t('circuit.exit') }} + + + + + {{ t('circuit.delete') }} + + + + +
- - - - {{ - circuit.askManagerToEnter ? t('circuit.ask') : t('circuit.enter') - }} - - - - - - {{ t('shared.refuse_ask') }} - - - - - {{ t('shared.cancel_ask') }} - - - - - - {{ t('circuit.exit') }} - - - - - {{ t('circuit.delete') }} - - - - - -
+
@@ -35,17 +35,6 @@
- - - -
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts index 07b6dd60..f01446a0 100644 --- a/src/store/Modules/tools.ts +++ b/src/store/Modules/tools.ts @@ -7705,7 +7705,7 @@ export const tools = { let risultato = false; - if (userStore.isAdmin) { + if (userStore.isAdmin || shared_consts.USER_ADMIN_CIRCUITS.includes(userStore.my.username)) { return true; }