- primo aggiornamento myreccard
- aggiunta sito germogliamo.app - aggiornato login con il parametro "browser_random" che serve per fare un login anche su 2 pagine contemporaneamente.
This commit is contained in:
Surya Paolo
@@ -1,180 +1,627 @@
|
||||
// ========================================
|
||||
// VARIABILI MODERNE (compatibili con Quasar)
|
||||
// ========================================
|
||||
$primary-color: #1976d2;
|
||||
$primary-light: #42a5f5;
|
||||
$primary-dark: #1565c0;
|
||||
$secondary-color: #26a69a;
|
||||
$positive-color: #21ba45;
|
||||
$negative-color: #c10015;
|
||||
$info-color: #31ccec;
|
||||
$warning-color: #f2c037;
|
||||
|
||||
$grey-text: #555;
|
||||
$grey-light: #999;
|
||||
$grey-dark: #333;
|
||||
|
||||
$border-radius: 12px;
|
||||
$border-radius-sm: 8px;
|
||||
$border-radius-lg: 16px;
|
||||
|
||||
$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-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
|
||||
$mobile-breakpoint: 768px;
|
||||
$small-breakpoint: 600px;
|
||||
|
||||
// ========================================
|
||||
// PROFILE (già esistente - solo ottimizzato)
|
||||
// ========================================
|
||||
.profile {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
padding: 6px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MY ROW (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.myrow {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: $small-breakpoint) {
|
||||
flex-flow: column;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// QUALIFICA (già esistente - modernizzato)
|
||||
// ========================================
|
||||
.qualifica {
|
||||
border: solid 2px #4198ef;
|
||||
border-radius: 1rem;
|
||||
padding: 5px;
|
||||
border: 2px solid $primary-light;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 6px 10px;
|
||||
background: rgba(65, 152, 239, 0.05);
|
||||
transition: all $transition-speed ease;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: rgba(65, 152, 239, 0.1);
|
||||
border-color: $primary-color;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ========================================
|
||||
// TEXT BACHECA (già esistente - modernizzato)
|
||||
// ========================================
|
||||
.text-bacheca {
|
||||
margin: 10px;
|
||||
border: solid 2px #4198ef;
|
||||
border-radius: 1rem;
|
||||
padding: 10px;
|
||||
margin: 8px 0;
|
||||
border: 2px solid $primary-light;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 10px 12px;
|
||||
background: rgba(65, 152, 239, 0.03);
|
||||
line-height: 1.6;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 6px 0;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// NOTE BACHECA (già esistente - modernizzato)
|
||||
// ========================================
|
||||
.note-bacheca {
|
||||
border: solid 2px #C10015;
|
||||
border-radius: 1rem;
|
||||
padding: 10px;
|
||||
border: 2px solid $warning-color;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 10px 12px;
|
||||
background: rgba(242, 192, 55, 0.08);
|
||||
border-left: 4px solid $warning-color;
|
||||
line-height: 1.6;
|
||||
margin: 8px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px 10px;
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// IMG (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
margin: 0 auto;
|
||||
max-height: 500px;
|
||||
max-width: 350px;
|
||||
object-fit: cover;
|
||||
border-radius: $border-radius-sm;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
max-height: 500px;
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
$graytext: #555;
|
||||
|
||||
// ========================================
|
||||
// CALENDAR STYLES (già esistente - compatto)
|
||||
// ========================================
|
||||
.cal {
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
color: #1a1a1a;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
letter-spacing: 0.03333em;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.01em;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
padding-bottom: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 1.0625rem;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1rem;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
color: black;
|
||||
}
|
||||
color: #1a1a1a;
|
||||
padding: 6px 0;
|
||||
|
||||
&__hours {
|
||||
color: blue;
|
||||
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
|
||||
&-content {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&__where {
|
||||
margin-top: 5px;
|
||||
color: blue;
|
||||
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
|
||||
&-content {
|
||||
color: darkblue !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__when {
|
||||
margin-top: 5px;
|
||||
color: blue;
|
||||
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
|
||||
&-content {
|
||||
color: darkblue !important;
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
&__teacher {
|
||||
margin-top: 5px;
|
||||
|
||||
&-title {
|
||||
color: $graytext;
|
||||
}
|
||||
|
||||
&-content {
|
||||
color: darkblue !important;
|
||||
;
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__hours,
|
||||
&__where,
|
||||
&__when,
|
||||
&__teacher,
|
||||
&__quota {
|
||||
margin-top: 5px;
|
||||
margin-top: 8px;
|
||||
padding: 4px 0;
|
||||
|
||||
&-title {
|
||||
color: $graytext;
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin-top: 6px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
&-content {}
|
||||
&-title {
|
||||
color: $grey-text;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 3px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
color: $primary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 6px;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// BADGE FAV/BOOK (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.badge-favbook {
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 2px 6px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonsfav{
|
||||
// ========================================
|
||||
// BUTTONS FAV (già esistente - compatto)
|
||||
// ========================================
|
||||
.buttonsfav {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
.buttonsfav_left{
|
||||
|
||||
.buttonsfav_left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.on-left {
|
||||
margin-right: 8px !important;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container_butt{
|
||||
// ========================================
|
||||
// CONTAINER BUTTON (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.container_butt {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 8px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-fade-enter-active, .expand-fade-leave-active {
|
||||
transition: height 0.3s ease, opacity 0.3s ease; /* Aggiunge transizioni per height e opacity */
|
||||
// ========================================
|
||||
// ANIMATIONS (già esistente)
|
||||
// ========================================
|
||||
.expand-fade-enter-active,
|
||||
.expand-fade-leave-active {
|
||||
transition: height $transition-speed ease, opacity $transition-speed ease;
|
||||
}
|
||||
|
||||
.expand-fade-enter, .expand-fade-leave-to {
|
||||
height: 0; /* Imposta l'altezza a 0 per l'uscita */
|
||||
opacity: 0; /* Rende invisibile durante l'uscita */
|
||||
.expand-fade-enter-from,
|
||||
.expand-fade-leave-to {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.height-transition {
|
||||
transition: height 0.3s ease-in-out;
|
||||
transition: height $transition-speed ease-in-out;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DIALOG POSITIONING (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.well-positioned-dialog {
|
||||
width: 50vw; /* Imposta la larghezza al 50% della vista */
|
||||
height: auto; /* Puoi regolare l'altezza come preferisci */
|
||||
margin-left: auto; /* Allinea il dialogo a destra */
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
|
||||
width: 50vw;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
box-shadow: $shadow-lg;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fulldiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.riempi {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MODERN CARD (nuovo - sostituisce my-card)
|
||||
// ========================================
|
||||
.modern-card {
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow-md;
|
||||
margin: 8px 0;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
|
||||
&.clBorderUser {
|
||||
border-left: 4px solid $primary-color;
|
||||
}
|
||||
|
||||
&.clBorderService {
|
||||
border-left: 4px solid $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MODERN DIALOG (nuovo - sostituisce visudialog)
|
||||
// ========================================
|
||||
.modern-dialog {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
&.no-padding {
|
||||
:deep(.q-card-section) {
|
||||
padding: 12px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollbar styling
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: $primary-light;
|
||||
border-radius: 10px;
|
||||
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TOOLBAR (già esistente - compatto)
|
||||
// ========================================
|
||||
.q-toolbar {
|
||||
min-height: 48px;
|
||||
padding: 8px 12px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 44px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.q-toolbar-title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MENU STYLES (già esistente - modernizzato)
|
||||
// ========================================
|
||||
.q-menu {
|
||||
.q-list {
|
||||
padding: 6px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-item {
|
||||
padding: 10px 12px;
|
||||
min-height: 40px;
|
||||
border-radius: $border-radius-sm;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(25, 118, 210, 0.08);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px 10px;
|
||||
min-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-item__section--avatar {
|
||||
min-width: 36px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-width: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ABSOLUTE POSITIONING (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.absolute-top-right {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// INSET SHADOW (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.inset-shadow {
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
padding: 10px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DIALOG CARD (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
.dialog_card {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CLASSI ESISTENTI MANTENUTE
|
||||
// ========================================
|
||||
.clBorderService {
|
||||
border: 1px solid rgba($secondary-color, 0.3);
|
||||
|
||||
&:hover {
|
||||
border-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.clBorderUser {
|
||||
border: 1px solid rgba($primary-color, 0.3);
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.clDescrEstesa {
|
||||
padding: 10px;
|
||||
line-height: 1.6;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.accom_maxosp {
|
||||
font-weight: 600;
|
||||
color: $primary-color;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Q-ITEM OTTIMIZZAZIONI
|
||||
// ========================================
|
||||
.q-item {
|
||||
padding: 10px 12px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.q-item-section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.q-item__label {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Q-CHIP OTTIMIZZAZIONI
|
||||
// ========================================
|
||||
.q-chip {
|
||||
margin: 2px 4px 2px 0;
|
||||
|
||||
&.glossy {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Q-BTN OTTIMIZZAZIONI
|
||||
// ========================================
|
||||
.q-btn {
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover:not(.q-btn--disable) {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
&.q-btn--round {
|
||||
&:hover:not(.q-btn--disable) {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// RESPONSIVE UTILITIES (già esistente - ottimizzato)
|
||||
// ========================================
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
.q-pa-xs {
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
.q-ma-xs {
|
||||
padding: 6px !important;
|
||||
}
|
||||
|
||||
.q-pa-sm {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.q-ma-sm {
|
||||
margin: 8px !important;
|
||||
}
|
||||
|
||||
.q-gutter-xs {
|
||||
> * + * {
|
||||
margin-left: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.q-my-sm {
|
||||
margin-top: 8px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.q-mx-sm {
|
||||
margin-left: 8px !important;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ANIMATION IMPROVEMENTS
|
||||
// ========================================
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SEPARATOR STYLING
|
||||
// ========================================
|
||||
.q-separator {
|
||||
margin: 8px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
@@ -697,7 +697,7 @@
|
||||
</q-item>
|
||||
<q-card
|
||||
v-if="myrec.mygrp && myrec.mygrp.groupname"
|
||||
class="my-card clBorderUser"
|
||||
class="modern-card clBorderUser"
|
||||
bordered
|
||||
@click="naviga(tools.getPathByGroup(myrec.mygrp))"
|
||||
>
|
||||
@@ -713,7 +713,7 @@
|
||||
!myrec.organisedBy &&
|
||||
shared_consts.TABLES_VISU_LISTA_USER.includes(table)
|
||||
"
|
||||
class="my-card clBorderUser"
|
||||
class="modern-card clBorderUser"
|
||||
bordered
|
||||
>
|
||||
<CMyUser
|
||||
|
||||
Reference in New Issue
Block a user