- 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);
|
||||
|
||||
&::-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%;
|
||||
}
|
||||
@@ -499,6 +499,7 @@
|
||||
v-for="(rec, indexrow) in serverData"
|
||||
:key="indexrow"
|
||||
:name="indexrow"
|
||||
class="grid-card-item"
|
||||
>
|
||||
<CMyRecCard
|
||||
:table="tablesel"
|
||||
|
||||
@@ -1,144 +1,503 @@
|
||||
// ==========================================
|
||||
// CMENUITEM.SCSS - ORIGINALE + MIGLIORAMENTI RISO
|
||||
// Mantiene tutto il codice originale + stile moderno
|
||||
// ==========================================
|
||||
|
||||
.prova {
|
||||
color: red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.q-list-header {
|
||||
min-height: 12px;
|
||||
padding: 5px 8px;
|
||||
min-height: 12px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.menu-hr {
|
||||
border-color: #dedede;
|
||||
height: 0.5px;
|
||||
border-color: #dedede;
|
||||
height: 0.5px;
|
||||
}
|
||||
|
||||
|
||||
.list-label:first-child {
|
||||
line-height: 20px;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
line-height: 20px;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
}
|
||||
|
||||
.router-link-active .item-primary {
|
||||
color: #027be3;
|
||||
color: #027be3;
|
||||
}
|
||||
|
||||
.menu_freccina {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 0;
|
||||
-webkit-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: inline-block;
|
||||
padding: 0 0 0 0;
|
||||
-webkit-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.my-menu,
|
||||
.my-menu>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;
|
||||
}
|
||||
@@ -7,9 +7,10 @@
|
||||
<div class="row">
|
||||
<q-toolbar
|
||||
v-if="!nopopup"
|
||||
class="bg-white text-black riempi"
|
||||
dense
|
||||
class="bg-blue text-white riempi"
|
||||
>
|
||||
<q-toolbar-title> </q-toolbar-title>
|
||||
<q-toolbar-title> {{ tools.getTitleAnnuncio(table) }}</q-toolbar-title>
|
||||
<q-btn
|
||||
v-if="!isSmall && showAnteprima"
|
||||
:label="isSmall ? 'Apri scheda' : 'Riduci scheda'"
|
||||
@@ -21,7 +22,6 @@
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="black"
|
||||
icon="close"
|
||||
v-close-popup
|
||||
></q-btn>
|
||||
@@ -445,21 +445,21 @@
|
||||
/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<span
|
||||
v-for="(recstatus, index) in myrec.idStatusSkill"
|
||||
:key="index"
|
||||
<q-item-section>
|
||||
<q-item-label>
|
||||
<span
|
||||
v-for="(recstatus, index) in myrec.idStatusSkill"
|
||||
:key="index"
|
||||
>
|
||||
<q-chip
|
||||
dense
|
||||
:color="globalStore.getColByStatusSkills(recstatus)"
|
||||
text-color="white"
|
||||
>
|
||||
<q-chip
|
||||
dense
|
||||
:color="globalStore.getColByStatusSkills(recstatus)"
|
||||
text-color="white"
|
||||
>
|
||||
{{ globalStore.getStatusSkillById(recstatus) }}
|
||||
</q-chip>
|
||||
</span>
|
||||
</q-item-label>
|
||||
{{ globalStore.getStatusSkillById(recstatus) }}
|
||||
</q-chip>
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<div v-if="!isSmall">
|
||||
@@ -511,9 +511,7 @@
|
||||
text-color="white"
|
||||
dense
|
||||
>
|
||||
<span>{{
|
||||
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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
v-else-if="myel.type === shared_consts.ELEMTYPE.RISOHOME"
|
||||
class="myElemBase"
|
||||
>
|
||||
<HomeRiso />
|
||||
<HomeRiso />
|
||||
</div>
|
||||
<div
|
||||
v-else-if="myel.type === shared_consts.ELEMTYPE.IMGTITLE"
|
||||
@@ -1090,31 +1090,41 @@
|
||||
Controllo Nuova Versione
|
||||
</div>
|
||||
<q-banner
|
||||
v-if="isNewVersionAvailable"
|
||||
v-if="isNewVersionAvailable && !nascondiBottone"
|
||||
rounded
|
||||
dense
|
||||
class="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>
|
||||
<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 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>
|
||||
|
||||
<!-- 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="{
|
||||
minWidth: '350px',
|
||||
maxWidth: $q.screen.lt.sm ? '100vw' : '800px',
|
||||
}">
|
||||
<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,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;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user