- aggiornato Card service, e CGridTableRec.
This commit is contained in:
Surya Paolo
@@ -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);
|
||||
|
||||
.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;
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-add-btn {
|
||||
padding: 8px 20px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
&::-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 {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
.q-infinite-scroll {
|
||||
padding: 8px;
|
||||
gap: 10px;
|
||||
// ========================================
|
||||
// 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: 768px) {
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px 12px;
|
||||
min-height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// BUTTON MODERNO
|
||||
// ========================================
|
||||
.modern-add-btn {
|
||||
padding: 6px 18px;
|
||||
font-weight: 600;
|
||||
transition: all $transition-speed;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-hover;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 5px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// INFINITE SCROLL
|
||||
// ========================================
|
||||
// ========================================
|
||||
// GRID LAYOUT PER CARD
|
||||
// ========================================
|
||||
.q-infinite-scroll {
|
||||
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%;
|
||||
}
|
||||
@@ -499,6 +499,7 @@
|
||||
v-for="(rec, indexrow) in serverData"
|
||||
:key="indexrow"
|
||||
:name="indexrow"
|
||||
class="grid-card-item"
|
||||
>
|
||||
<CMyRecCard
|
||||
:table="tablesel"
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
// ==========================================
|
||||
// CMENUITEM.SCSS - ORIGINALE + MIGLIORAMENTI RISO
|
||||
// Mantiene tutto il codice originale + stile moderno
|
||||
// ==========================================
|
||||
|
||||
.prova {
|
||||
color: red;
|
||||
}
|
||||
@@ -12,7 +17,6 @@
|
||||
height: 0.5px;
|
||||
}
|
||||
|
||||
|
||||
.list-label:first-child {
|
||||
line-height: 20px;
|
||||
padding: 5px;
|
||||
@@ -69,6 +73,7 @@
|
||||
.isFacilitatore {
|
||||
color: #201a80;
|
||||
}
|
||||
|
||||
.onlyCollaboratore {
|
||||
color: #bd7b10;
|
||||
}
|
||||
@@ -113,24 +118,22 @@
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.imgicon img {
|
||||
font-size: 2.5rem !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.menu-enter-active, .scale-enter {
|
||||
.menu-enter-active, .scale-enter {
|
||||
-webkit-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;
|
||||
animation: moveToBottom .5s ease both;
|
||||
}
|
||||
*/
|
||||
}
|
||||
*/
|
||||
|
||||
.bigmenu {
|
||||
font-size: 1.25rem;
|
||||
@@ -142,3 +145,359 @@
|
||||
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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -511,9 +511,7 @@
|
||||
text-color="white"
|
||||
dense
|
||||
>
|
||||
<span>{{
|
||||
getSectorByRec(myrec)[0].descr
|
||||
}}</span>
|
||||
<span>{{ getSectorByRec(myrec)[0].descr }}</span>
|
||||
</q-chip>
|
||||
<q-chip
|
||||
v-if="
|
||||
@@ -526,9 +524,7 @@
|
||||
color="blue"
|
||||
text-color="white"
|
||||
>
|
||||
<span>{{
|
||||
getRecGoodSkillByRec(myrec)[0].descr
|
||||
}}</span>
|
||||
<span>{{ getRecGoodSkillByRec(myrec)[0].descr }}</span>
|
||||
</q-chip>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1090,31 +1090,41 @@
|
||||
Controllo Nuova Versione
|
||||
</div>
|
||||
<q-banner
|
||||
v-if="isNewVersionAvailable"
|
||||
v-if="isNewVersionAvailable && !nascondiBottone"
|
||||
rounded
|
||||
dense
|
||||
class="bg-green text-white"
|
||||
color="primary q-title"
|
||||
style="text-align: center"
|
||||
class="update-banner"
|
||||
>
|
||||
<template v-slot:avatar>
|
||||
<q-icon
|
||||
name="fas fa-exclamation-triangle"
|
||||
color="yellow"
|
||||
size="xs"
|
||||
name="fas fa-sync-alt"
|
||||
class="update-icon"
|
||||
/>
|
||||
</template>
|
||||
<div v-if="$q.platform.is.ios">
|
||||
<span class="mybanner"
|
||||
>Chiudere e Riaprire la App, per completare l'Aggiornamento</span
|
||||
>
|
||||
|
||||
<div class="update-content">
|
||||
<div class="update-title">Aggiornamento Disponibile</div>
|
||||
<div class="update-message">
|
||||
<span v-if="$q.platform.is.ios">
|
||||
Chiudi e riapri l'app per completare l'aggiornamento
|
||||
</span>
|
||||
<span v-else>
|
||||
Aggiornamento in corso... Se dopo 1 minuto il messaggio persiste,
|
||||
ricarica la pagina.
|
||||
</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="mybanner"
|
||||
>Aggiornamento APP in corso ... Se dopo 1 minuto non dovesse scomparire il
|
||||
messaggio, chiudere e riaprire la pagina.</span
|
||||
>
|
||||
</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-card :style="{
|
||||
<q-dialog
|
||||
v-model="mostraInviti"
|
||||
maximized
|
||||
>
|
||||
<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 />
|
||||
|
||||
@@ -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,8 +21,9 @@ $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;
|
||||
@@ -29,17 +31,15 @@ $mobile-breakpoint: 768px;
|
||||
|
||||
&.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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05); // Ridotto da 1.1 a 1.05 per essere meno invasivo
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
480
src/css/app.scss
480
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;
|
||||
@@ -3305,3 +3386,402 @@ body.body--dark {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
//tailles
|
||||
|
||||
$headerHeight: 60px;
|
||||
// ==========================================
|
||||
// DIMENSIONI HEADER - Più compatto
|
||||
// ==========================================
|
||||
$headerHeight: 52px; // Ridotto da 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: {
|
||||
size: cover;
|
||||
position: center center;
|
||||
repeat: no-repeat;
|
||||
}
|
||||
|
||||
;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-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');
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -149,3 +148,336 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -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: [
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user