- 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
@@ -79,4 +79,47 @@
|
||||
|
||||
.carousel-scroll-container {
|
||||
overflow-y: auto; /* Permette lo scrolling verticale */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.modern-add-btn {
|
||||
padding: 8px 20px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
padding: 4px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-infinite-scroll {
|
||||
padding: 8px;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 6px;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-dialog {
|
||||
:deep(.modern-card) {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
@@ -18,10 +18,11 @@
|
||||
style="text-align: center"
|
||||
>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
dense
|
||||
color="primary"
|
||||
size="lg"
|
||||
icon="add"
|
||||
class="modern-add-btn"
|
||||
:label="getlabelAddRow()"
|
||||
@click="createNewRecordDialog"
|
||||
></q-btn>
|
||||
@@ -1471,9 +1472,7 @@
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<div
|
||||
@click="colclicksel = mycol"
|
||||
>
|
||||
<div @click="colclicksel = mycol">
|
||||
<CMyPopupEdit
|
||||
:table="mytable"
|
||||
:canEdit="true"
|
||||
@@ -1565,8 +1564,8 @@
|
||||
v-model:row="newRecord"
|
||||
:field="col.field"
|
||||
:subfield="col.subfield"
|
||||
:field2="col.field2"
|
||||
:subfield2="col.subfield2"
|
||||
:field2="col.field2"
|
||||
:subfield2="col.subfield2"
|
||||
:tablesel="col.tablesel"
|
||||
:value_extra="getValueExtra(col, newRecord)"
|
||||
:isInModif="true"
|
||||
@@ -1696,7 +1695,7 @@
|
||||
:maximized="$q.screen.lt.sm"
|
||||
>
|
||||
<q-card class="dialog_card">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar class="modern-grid-toolbar">
|
||||
<q-toolbar-title> Notifiche </q-toolbar-title>
|
||||
<q-btn
|
||||
flat
|
||||
|
||||
@@ -1,48 +1,307 @@
|
||||
// ========================================
|
||||
// VARIABILI
|
||||
// ========================================
|
||||
$primary-color: #1976d2;
|
||||
$grey-color: #666;
|
||||
$grey-light: #999;
|
||||
|
||||
$border-radius: 8px;
|
||||
$border-radius-sm: 6px;
|
||||
$transition-speed: 0.3s;
|
||||
|
||||
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
$mobile-breakpoint: 768px;
|
||||
|
||||
// ========================================
|
||||
// GRID CONTAINER
|
||||
// ========================================
|
||||
.grid-table-container {
|
||||
padding: 0;
|
||||
|
||||
@media (min-width: $mobile-breakpoint) {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// COLUMN STYLES
|
||||
// ========================================
|
||||
.colmodif {
|
||||
cursor: pointer;
|
||||
transition: background $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(25, 118, 210, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.coldate {
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
max-width: 180px;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.tdclass, .trclass{
|
||||
min-height: 20px !important;
|
||||
margin-top: 5px;
|
||||
// ========================================
|
||||
// TABLE CELLS (Spacing Compatto)
|
||||
// ========================================
|
||||
.tdclass,
|
||||
.trclass {
|
||||
min-height: 16px !important;
|
||||
margin-top: 3px;
|
||||
padding: 2px 4px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 14px !important;
|
||||
margin-top: 2px;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-table td {
|
||||
padding-left: 1px;
|
||||
padding-right: 2px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
// ========================================
|
||||
// QUASAR TABLE OVERRIDES
|
||||
// ========================================
|
||||
.q-table {
|
||||
td {
|
||||
padding: 4px 6px !important;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 3px 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 6px 8px !important;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.q-table {
|
||||
&__col {
|
||||
font-size: 1rem;
|
||||
color: gray;
|
||||
font-size: 0.9375rem;
|
||||
color: $grey-color;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__top {
|
||||
padding: 8px 4px !important;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
padding: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.newrec_fields{
|
||||
// ========================================
|
||||
// HEADER COLUMN
|
||||
// ========================================
|
||||
.header-col {
|
||||
padding: 6px 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-color;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.08);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px 6px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// NEW RECORD FIELDS
|
||||
// ========================================
|
||||
.newrec_fields {
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
padding: 4px;
|
||||
margin: 3px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 3px;
|
||||
margin: 2px;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// PADDING RIDOTTO
|
||||
// ========================================
|
||||
.riduci_pad {
|
||||
min-height: 30px;
|
||||
padding: 4px 8px !important;
|
||||
min-height: 24px;
|
||||
padding: 3px 6px !important;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 20px;
|
||||
padding: 2px 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// MONTH SEPARATOR
|
||||
// ========================================
|
||||
.month-separator {
|
||||
padding: 8px 12px;
|
||||
margin: 8px 0;
|
||||
background: linear-gradient(135deg, rgba(25, 118, 210, 0.08), transparent);
|
||||
border-left: 3px solid $primary-color;
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
.q-table__top{
|
||||
padding-top: 0 !important;
|
||||
strong {
|
||||
font-size: 1.125rem;
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px 8px;
|
||||
margin: 6px 0;
|
||||
|
||||
strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DATE CHIP
|
||||
// ========================================
|
||||
.actualdate {
|
||||
margin: 6px 0;
|
||||
text-align: center;
|
||||
|
||||
.q-chip {
|
||||
font-weight: 600;
|
||||
padding: 6px 12px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px 8px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CARD MOVIMENTO
|
||||
// ========================================
|
||||
.movement-card {
|
||||
margin: 6px 0;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
.q-toolbar {
|
||||
min-height: 36px !important;
|
||||
padding: 6px 12px;
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 32px !important;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.q-card-section {
|
||||
padding: 8px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// INFINITE SCROLL
|
||||
// ========================================
|
||||
.q-infinite-scroll {
|
||||
&__loading {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// FILL ALL WIDTH
|
||||
// ========================================
|
||||
.fill-all-width {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ROW CLASS
|
||||
// ========================================
|
||||
.getclrow {
|
||||
padding: 3px 6px;
|
||||
transition: background $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SEPARATOR
|
||||
// ========================================
|
||||
.q-separator {
|
||||
margin: 3px 0;
|
||||
opacity: 0.6;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// RESPONSIVE HELPERS
|
||||
// ========================================
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
// Riduci tutto su mobile
|
||||
.q-item {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.q-card {
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.q-chip {
|
||||
height: 20px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -1,15 +1,362 @@
|
||||
.editor{
|
||||
border: solid 1px #257ed5;
|
||||
border-radius: 5px;
|
||||
padding: 2px;
|
||||
height: 60px;
|
||||
// ========================================
|
||||
// VARIABILI
|
||||
// ========================================
|
||||
$primary-color: #1976d2;
|
||||
$primary-light: #42a5f5;
|
||||
$grey-color: #666;
|
||||
|
||||
$border-radius: 8px;
|
||||
$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);
|
||||
|
||||
$mobile-breakpoint: 768px;
|
||||
|
||||
// ========================================
|
||||
// EDITOR
|
||||
// ========================================
|
||||
.editor {
|
||||
border: 1px solid rgba(25, 118, 210, 0.3);
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 6px;
|
||||
min-height: 60px;
|
||||
transition: all $transition-speed ease;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-light;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// POPUP EDIT CONTAINER
|
||||
// ========================================
|
||||
.popup-edit-wrapper {
|
||||
:deep(.q-popup-edit) {
|
||||
padding: 8px;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
.clpopupVisuCard{
|
||||
/*border-radius: $generic-border-radius */
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.extrafield{
|
||||
font-size: 1rem;
|
||||
|
||||
// ========================================
|
||||
// FIELD WRAPPERS
|
||||
// ========================================
|
||||
.field-wrapper {
|
||||
padding: 4px 0;
|
||||
margin: 3px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 3px 0;
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// EXTRA FIELD
|
||||
// ========================================
|
||||
.extrafield {
|
||||
font-size: 0.9375rem;
|
||||
padding: 4px 6px;
|
||||
color: $grey-color;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
display: inline-block;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
padding: 3px 4px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TOGGLE ENHANCED
|
||||
// ========================================
|
||||
.toggle-enhanced {
|
||||
padding: 4px 0;
|
||||
|
||||
:deep(.q-toggle__label) {
|
||||
font-size: 0.9375rem;
|
||||
margin-left: 6px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-toggle__inner) {
|
||||
transition: all $transition-speed ease;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CHIP SHADOW
|
||||
// ========================================
|
||||
.chip_shadow {
|
||||
:deep(.q-chip) {
|
||||
box-shadow: $shadow-sm;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-md;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// USER CARD IN POPUP
|
||||
// ========================================
|
||||
.user-item-card {
|
||||
padding: 6px 8px;
|
||||
margin: 4px 0;
|
||||
border-radius: $border-radius;
|
||||
transition: all $transition-speed ease;
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
|
||||
&:hover {
|
||||
background: rgba(25, 118, 210, 0.05);
|
||||
border-color: rgba(25, 118, 210, 0.2);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px 6px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.q-item-section {
|
||||
&.avatar {
|
||||
padding-right: 8px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.q-avatar {
|
||||
box-shadow: $shadow-sm;
|
||||
border: 2px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.q-badge {
|
||||
font-size: 0.6875rem;
|
||||
padding: 2px 6px;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.625rem;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// INPUT OVERRIDES (Compact)
|
||||
// ========================================
|
||||
.popup-edit-wrapper {
|
||||
:deep(.q-field) {
|
||||
padding-bottom: 8px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-field__control) {
|
||||
min-height: 44px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-field__label) {
|
||||
font-size: 0.9375rem;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-input) {
|
||||
margin: 3px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-select) {
|
||||
margin: 3px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// TEXTAREA COMPACT
|
||||
// ========================================
|
||||
:deep(textarea) {
|
||||
&.myinput-area {
|
||||
padding: 8px;
|
||||
border-radius: $border-radius-sm;
|
||||
min-height: 60px;
|
||||
line-height: 1.4;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// BUTTON IN POPUP
|
||||
// ========================================
|
||||
.popup-button {
|
||||
padding: 6px 12px;
|
||||
margin: 3px 6px;
|
||||
border-radius: $border-radius-sm;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px 8px;
|
||||
margin: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DATE PICKER COMPACT
|
||||
// ========================================
|
||||
.date-picker-compact {
|
||||
:deep(.q-date) {
|
||||
padding: 4px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-date__header) {
|
||||
padding: 6px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-date__calendar-item) {
|
||||
padding: 3px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// COLOR PICKER
|
||||
// ========================================
|
||||
.color-select-wrapper {
|
||||
:deep(.q-select) {
|
||||
min-width: 150px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// LEGACY SUPPORT
|
||||
// ========================================
|
||||
.clpopupVisuCard {
|
||||
border-radius: $border-radius;
|
||||
padding: 4px;
|
||||
margin: 3px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 3px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// DISABLED STATE
|
||||
// ========================================
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CURSOR POINTER
|
||||
// ========================================
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
transition: opacity $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// FLEX HELPERS (Compact)
|
||||
// ========================================
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// REQUIRED INDICATOR
|
||||
// ========================================
|
||||
.required-indicator {
|
||||
color: #c10015;
|
||||
font-weight: 600;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@@ -1,44 +1,480 @@
|
||||
.myflex{
|
||||
// ========================================
|
||||
// VARIABILI
|
||||
// ========================================
|
||||
$primary-color: #1976d2;
|
||||
$positive-color: #21ba45;
|
||||
$negative-color: #c10015;
|
||||
$grey-color: #666;
|
||||
$grey-light: #999;
|
||||
|
||||
$border-radius: 12px;
|
||||
$border-radius-sm: 8px;
|
||||
$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);
|
||||
|
||||
$mobile-breakpoint: 768px;
|
||||
|
||||
// ========================================
|
||||
// WRAPPER CARD
|
||||
// ========================================
|
||||
.rec-card-wrapper {
|
||||
margin: 4px auto;
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 2px auto;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CARD EVENTO (Calendar View)
|
||||
// ========================================
|
||||
.event-card {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
background: white;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
box-shadow: $shadow-md;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.event-date-column {
|
||||
flex: 0 0 80px;
|
||||
background: linear-gradient(135deg, $primary-color, #42a5f5);
|
||||
padding: 8px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
flex: 0 0 70px;
|
||||
padding: 6px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.day-of-week {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.day-number {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
margin: 4px 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 1.75rem;
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.month-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.time-start,
|
||||
.time-end {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding: 2px 6px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
font-size: 1rem;
|
||||
margin: 4px 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
margin-top: 8px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: $shadow-sm;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.event-image-container {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
min-height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.event-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
transition: transform $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
:deep(.q-img__image) {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CARD RECORD PRINCIPALE
|
||||
// ========================================
|
||||
.modern-rec-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $shadow-sm;
|
||||
padding: 8px;
|
||||
transition: all $transition-speed ease;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-md;
|
||||
border-color: rgba(25, 118, 210, 0.2);
|
||||
}
|
||||
|
||||
&.is-attending {
|
||||
border-left: 3px solid $positive-color;
|
||||
background: linear-gradient(to right, rgba(33, 186, 69, 0.05), white);
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 6px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// AVATAR SECTION
|
||||
// ========================================
|
||||
.avatar-section {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
margin-right: 8px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
z-index: 1;
|
||||
font-size: 0.625rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.5625rem;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.record-avatar {
|
||||
box-shadow: $shadow-sm;
|
||||
border: 2px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
}
|
||||
|
||||
:deep(.q-img) {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// CONTENT SECTION
|
||||
// ========================================
|
||||
.content-section {
|
||||
padding: 0 8px 0 0 !important;
|
||||
min-width: 0;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
padding: 0 6px 0 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Tags e Chips
|
||||
.tags-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 4px;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
height: 20px;
|
||||
font-size: 0.6875rem;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
font-weight: 500;
|
||||
|
||||
&.subsector {
|
||||
background: linear-gradient(135deg, $positive-color, #26a69a);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.sector {
|
||||
background: linear-gradient(135deg, $primary-color, #42a5f5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
height: 18px;
|
||||
font-size: 0.625rem;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
:deep(.q-chip__content) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 0.6875rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.625rem;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Descrizione
|
||||
.description-text {
|
||||
font-size: 0.9375rem;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin: 4px 0;
|
||||
word-break: break-word;
|
||||
|
||||
&.event-title {
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.875rem;
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// User Stats Row
|
||||
.user-stats-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 4px 0;
|
||||
font-size: 0.8125rem;
|
||||
color: $grey-color;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.75rem;
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-weight: 500;
|
||||
|
||||
.q-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Badge Partecipazione
|
||||
.attending-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: $positive-color;
|
||||
font-weight: 600;
|
||||
font-size: 0.8125rem;
|
||||
margin: 4px 0;
|
||||
padding: 3px 8px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// Città
|
||||
.cities-text {
|
||||
font-size: 0.8125rem;
|
||||
color: $grey-light;
|
||||
text-align: right;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// ACTIONS SECTION
|
||||
// ========================================
|
||||
.actions-section {
|
||||
padding: 0 !important;
|
||||
align-self: flex-start;
|
||||
margin-left: 4px;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: $grey-color;
|
||||
transition: all $transition-speed ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// LEGACY SUPPORT
|
||||
// ========================================
|
||||
.myflex {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.text_user_city{
|
||||
.text_user_city {
|
||||
text-overflow: ellipsis;
|
||||
white-space: wrap;
|
||||
overflow: hidden;
|
||||
font-size: 0.85rem;
|
||||
color: grey;
|
||||
font-size: 0.8125rem;
|
||||
color: $grey-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cardrec {
|
||||
/* Aggiungi un bordo sottile */
|
||||
border: 1px solid #ddd;
|
||||
/* Applica un'ombreggiatura per dare l'effetto di elevazione */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
/* Arrotonda leggermente gli angoli */
|
||||
border-radius: 8px;
|
||||
/* Aggiungi un po' di spazio interno intorno ai contenuti */
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: $shadow-sm;
|
||||
border-radius: $border-radius;
|
||||
padding: 8px;
|
||||
/* Colore di sfondo bianco per separare dal resto del contenuto */
|
||||
background-color: #eff;
|
||||
background-color: white;
|
||||
margin: 4px;
|
||||
|
||||
@media (min-width: 500px) {
|
||||
margin: 1px;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.text_title{
|
||||
color: blue;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: white;
|
||||
}
|
||||
.text_title {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.event_date{
|
||||
.event_date {
|
||||
font-style: italic;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// SEPARATOR
|
||||
// ========================================
|
||||
.q-separator {
|
||||
margin: 4px 0;
|
||||
opacity: 0.6;
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
margin: 3px 0;
|
||||
}
|
||||
}
|
||||
@@ -1,131 +1,99 @@
|
||||
<!--suppress ALL -->
|
||||
<template>
|
||||
<div class="q-py-xs centermydiv cardrec" :style="{ maxWidth: computedWidth }">
|
||||
<div v-if="myrec && table === shared_consts.TABLES_MYBACHECAS">
|
||||
<div class="row">
|
||||
<div class="col-2 q-my-sm">
|
||||
<div class="column">
|
||||
<span class="ev_dayofweek">{{
|
||||
tools.getDayOfWeek(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="ev_day">{{
|
||||
tools.getstrDay(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="ev_month">{{
|
||||
tools.getstrMonth3Letters(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="ev_hour">{{
|
||||
tools.getstrTime(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) ===
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_hour_end"
|
||||
>{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="q-mx-sm self-center"
|
||||
>
|
||||
-----
|
||||
</div>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_dayofweek"
|
||||
>{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_day"
|
||||
>{{ tools.getstrDay(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_month"
|
||||
>{{ tools.getstrMonth3Letters(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !==
|
||||
tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
class="ev_hour_end"
|
||||
>{{ tools.getstrTime(myrec.dateTimeEnd) }}</span
|
||||
>
|
||||
<q-avatar size="50px" class="q-my-sm self-center">
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
img-class="imgprofile"
|
||||
height="50px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10">
|
||||
<q-img
|
||||
:src="
|
||||
tools.getFullFileName(myrec.photos, table, myrec.username, '')
|
||||
<div
|
||||
class="rec-card-wrapper"
|
||||
:style="{ maxWidth: computedWidth() }"
|
||||
>
|
||||
<!-- Evento Calendar con data grande -->
|
||||
<div
|
||||
v-if="myrec && table === shared_consts.TABLES_MYBACHECAS"
|
||||
class="event-card"
|
||||
>
|
||||
<div class="event-date-column">
|
||||
<div class="date-stack">
|
||||
<span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeStart) }}</span>
|
||||
<span class="day-number">{{ tools.getstrDay(myrec.dateTimeStart) }}</span>
|
||||
<span class="month-name">{{
|
||||
tools.getstrMonth3Letters(myrec.dateTimeStart)
|
||||
}}</span>
|
||||
<span class="time-start">{{ tools.getstrTime(myrec.dateTimeStart) }}</span>
|
||||
<span
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) === tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
:alt="myrec.descr"
|
||||
img-class="imgprofile"
|
||||
height="270px"
|
||||
fit="cover"
|
||||
@click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
|
||||
/>
|
||||
<!--<div class="event_date">
|
||||
<span v-html="tools.getstrDateTimeEvent($t, myrec, true, true)"></span>
|
||||
</div>-->
|
||||
class="time-end"
|
||||
>
|
||||
{{ tools.getstrTime(myrec.dateTimeEnd) }}
|
||||
</span>
|
||||
|
||||
<!-- Data fine se diversa -->
|
||||
<template
|
||||
v-if="
|
||||
tools.getstrDay(myrec.dateTimeStart) !== tools.getstrDay(myrec.dateTimeEnd)
|
||||
"
|
||||
>
|
||||
<div class="date-separator">→</div>
|
||||
<span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span>
|
||||
<span class="day-number">{{ tools.getstrDay(myrec.dateTimeEnd) }}</span>
|
||||
<span class="month-name">{{
|
||||
tools.getstrMonth3Letters(myrec.dateTimeEnd)
|
||||
}}</span>
|
||||
<span class="time-end">{{ tools.getstrTime(myrec.dateTimeEnd) }}</span>
|
||||
</template>
|
||||
|
||||
<q-avatar
|
||||
size="40px"
|
||||
class="user-avatar"
|
||||
>
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-image-container">
|
||||
<q-img
|
||||
:src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
|
||||
:alt="myrec.descr"
|
||||
class="event-image"
|
||||
@click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Record Principale -->
|
||||
<q-item
|
||||
v-if="myrec"
|
||||
clickable
|
||||
v-ripple
|
||||
:class="
|
||||
`shadow-2 butt_rounded ` +
|
||||
(tools.isPartecipero(myrec) ? ` butt_green ` : '')
|
||||
"
|
||||
class="modern-rec-card"
|
||||
:class="{ 'is-attending': tools.isPartecipero(myrec) }"
|
||||
>
|
||||
<!-- Avatar / Immagine -->
|
||||
<q-item-section
|
||||
v-if="
|
||||
(shared_consts.TABLES_VISU_IMG.includes(table) &&
|
||||
myrec.photos &&
|
||||
myrec.photos.length > 0) ||
|
||||
(myrec.mygrp && myrec.mygrp.photos.length > 0)
|
||||
myrec.photos?.length > 0) ||
|
||||
(myrec.mygrp && myrec.mygrp.photos?.length > 0)
|
||||
"
|
||||
avatar
|
||||
@click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
|
||||
class="avatar-section"
|
||||
>
|
||||
<q-badge
|
||||
v-if="showBadge()"
|
||||
class="q-my-xs self-center"
|
||||
:color="fieldsTable.getColByAdType(myrec.adType)"
|
||||
class="type-badge"
|
||||
>
|
||||
{{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
|
||||
<!--<q-icon
|
||||
:name="fieldsTable.getIconByAdType(myrec.adType)"
|
||||
color="white"
|
||||
class="q-ml-xs"
|
||||
/>-->
|
||||
</q-badge>
|
||||
|
||||
<q-avatar size="60px">
|
||||
<q-avatar
|
||||
size="56px"
|
||||
class="record-avatar"
|
||||
>
|
||||
<q-img
|
||||
v-if="
|
||||
myrec.mygrp &&
|
||||
@@ -140,18 +108,12 @@
|
||||
myrec.groupname
|
||||
)
|
||||
"
|
||||
class="img"
|
||||
alt="immagine del gruppo"
|
||||
>
|
||||
</q-img>
|
||||
/>
|
||||
<q-img
|
||||
v-else
|
||||
:src="
|
||||
tools.getFullFileName(myrec.photos, table, myrec.username, '')
|
||||
"
|
||||
:src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
|
||||
:alt="myrec.descr"
|
||||
img-class="imgprofile"
|
||||
height="60px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
@@ -160,224 +122,222 @@
|
||||
v-else-if="!myrec.organisedBy && table !== shared_consts.TABLES_MYBACHECAS"
|
||||
avatar
|
||||
@click="naviga(`/my/` + myrec.username)"
|
||||
class="avatar-section"
|
||||
>
|
||||
<q-badge
|
||||
v-if="showBadge()"
|
||||
class="q-my-xs self-center"
|
||||
:color="fieldsTable.getColByAdType(myrec.adType)"
|
||||
class="type-badge"
|
||||
>
|
||||
{{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
|
||||
</q-badge>
|
||||
<q-avatar size="60px" class="self-center">
|
||||
<q-avatar
|
||||
size="56px"
|
||||
class="record-avatar"
|
||||
>
|
||||
<q-img
|
||||
:src="getImgUser(myrec)"
|
||||
:alt="myrec.username"
|
||||
img-class="imgprofile"
|
||||
height="60px"
|
||||
/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section @click="navigaExt(myrec)">
|
||||
<q-item-label lines="2" class="full-width">
|
||||
<span
|
||||
<!-- Contenuto Principale -->
|
||||
<q-item-section
|
||||
@click="navigaExt(myrec)"
|
||||
class="content-section"
|
||||
>
|
||||
<!-- Tags e Chips -->
|
||||
<q-item-label class="tags-row">
|
||||
<q-chip
|
||||
v-for="(rec, ind) of tools.getArrSubSector(table, myrec)"
|
||||
:key="ind"
|
||||
:key="'sub-' + ind"
|
||||
dense
|
||||
class="tag-chip subsector"
|
||||
>
|
||||
<q-chip
|
||||
dense
|
||||
class="text-center shadow-5 glossy text-white bg-green"
|
||||
>{{ rec.descr }}</q-chip
|
||||
>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
v-for="(rec, ind) of tools.getArrSector(table, myrec)"
|
||||
:key="ind"
|
||||
>
|
||||
<q-chip
|
||||
dense
|
||||
class="text-center shadow-5 glossy text-white bg-blue"
|
||||
>{{ rec.descr }}</q-chip
|
||||
></span
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
v-for="(recstatus, index) in myrec.idStatusSkill"
|
||||
:key="index"
|
||||
class="q-ml-xs"
|
||||
style="vertical-align: middle"
|
||||
{{ rec.descr }}
|
||||
</q-chip>
|
||||
<q-chip
|
||||
v-for="(rec, ind) of tools.getArrSector(table, myrec)"
|
||||
:key="'sec-' + ind"
|
||||
dense
|
||||
class="tag-chip sector"
|
||||
>
|
||||
{{ rec.descr }}
|
||||
</q-chip>
|
||||
<template v-for="(recstatus, index) in myrec.idStatusSkill">
|
||||
<q-badge
|
||||
v-if="
|
||||
recstatus === shared_consts.STATUSSKILL_ONLINE ||
|
||||
myrec.idStatusSkill.length > 1
|
||||
myrec.idStatusSkill?.length > 1
|
||||
"
|
||||
dense
|
||||
:key="'stat-' + index"
|
||||
:color="globalStore.getColByStatusSkills(recstatus)"
|
||||
text-color="white"
|
||||
class="status-badge"
|
||||
>
|
||||
<q-icon
|
||||
:name="globalStore.getStatusSkillIconById(recstatus)"
|
||||
color="white"
|
||||
/>
|
||||
size="14px"
|
||||
/>
|
||||
{{ globalStore.getStatusSkillById(recstatus) }}
|
||||
</q-badge>
|
||||
</span>
|
||||
|
||||
<!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>
|
||||
</span>-->
|
||||
</template>
|
||||
</q-item-label>
|
||||
|
||||
<!-- Descrizione -->
|
||||
<q-item-label
|
||||
lines="4"
|
||||
:class="table === shared_consts.TABLES_MYBACHECAS ? 'text-bold' : ''"
|
||||
lines="3"
|
||||
:class="[
|
||||
'description-text',
|
||||
{ 'event-title': table === shared_consts.TABLES_MYBACHECAS },
|
||||
]"
|
||||
v-if="myrec.descr"
|
||||
>{{ myrec.descr }}<br />
|
||||
>
|
||||
{{ myrec.descr }}
|
||||
</q-item-label>
|
||||
<q-item-label lines="1" style="" class="text_user_city">
|
||||
<div class="row justify-between">
|
||||
<div class="text-weight-bold text-italic">
|
||||
<span
|
||||
v-if="
|
||||
table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy
|
||||
"
|
||||
>
|
||||
<span>{{ myrec.organisedBy }} </span>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ getNameToShow(myrec) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="q-mx-sm">
|
||||
(
|
||||
<span
|
||||
v-if="
|
||||
table === shared_consts.TABLES_MYBACHECAS &&
|
||||
tools.getNumPartecipantes(myrec) > 0
|
||||
"
|
||||
>
|
||||
<span class="q-mx-xxs-left text-bold">{{
|
||||
tools.getNumPartecipantes(myrec)
|
||||
}}</span>
|
||||
<span class="q-mx-xxs-left"
|
||||
><q-icon dense color="blue" name="far fa-check-circle" />
|
||||
</span>
|
||||
</span>
|
||||
<span class="q-mx-xxs-left">{{
|
||||
myrec.numseen ? myrec.numseen : 0
|
||||
}}</span>
|
||||
<span class="q-mx-xxs-left"
|
||||
><q-icon dense color="blue" name="far fa-eye" />
|
||||
</span>
|
||||
<span class="q-mx-xxs-left"> </span>
|
||||
<span class="" v-if="myrec">{{
|
||||
myrec.numfav ? myrec.numfav : 0
|
||||
}}</span>
|
||||
<span class="q-mx-xxs-left"
|
||||
><q-icon
|
||||
dense
|
||||
color="red"
|
||||
:name="
|
||||
userStore.isFavorite(myrec._id, table)
|
||||
? 'favorite'
|
||||
: 'far fa-heart'
|
||||
"
|
||||
|
||||
<!-- Info Utente e Stats -->
|
||||
<q-item-label class="user-stats-row">
|
||||
<div class="user-name">
|
||||
<span v-if="table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy">
|
||||
{{ myrec.organisedBy }}
|
||||
</span>
|
||||
<span v-else>{{ getNameToShow(myrec) }}</span>
|
||||
</div>
|
||||
<div class="stats-container">
|
||||
(
|
||||
<template
|
||||
v-if="
|
||||
table === shared_consts.TABLES_MYBACHECAS &&
|
||||
tools.getNumPartecipantes(myrec) > 0
|
||||
"
|
||||
>
|
||||
<span class="stat-item">
|
||||
{{ tools.getNumPartecipantes(myrec) }}
|
||||
<q-icon
|
||||
name="check_circle"
|
||||
size="14px"
|
||||
color="positive"
|
||||
/>
|
||||
</span>
|
||||
<!--<span class="q-mx-xxs"> </span>
|
||||
<span class="">{{ myrec.mybook.length }}</span>
|
||||
<span class="q-mx-xxs"
|
||||
><q-icon
|
||||
dense
|
||||
color="teal"
|
||||
:name="
|
||||
userStore.isBookmarked(myrec._id, table)
|
||||
? 'bookmark'
|
||||
: 'far fa-bookmark'
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
-->
|
||||
)
|
||||
</div>
|
||||
</template>
|
||||
<span class="stat-item">
|
||||
{{ myrec.numseen || 0 }}
|
||||
<q-icon
|
||||
name="visibility"
|
||||
size="14px"
|
||||
color="primary"
|
||||
/>
|
||||
</span>
|
||||
<span class="stat-item">
|
||||
{{ myrec.numfav || 0 }}
|
||||
<q-icon
|
||||
:name="
|
||||
userStore.isFavorite(myrec._id, table) ? 'favorite' : 'favorite_border'
|
||||
"
|
||||
size="14px"
|
||||
color="negative"
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
</div>
|
||||
</q-item-label>
|
||||
|
||||
<!-- Badge Partecipazione -->
|
||||
<q-item-label
|
||||
v-if="tools.isPartecipero(myrec)"
|
||||
lines="1"
|
||||
style="text-align: left"
|
||||
class="text_user_city"
|
||||
class="attending-badge"
|
||||
>
|
||||
<span class="text-bold text-green text-h7">
|
||||
<q-icon name="fas fa-user-check" color="green"></q-icon>
|
||||
{{ t('event.attend') }}</span
|
||||
>
|
||||
<q-icon
|
||||
name="check_circle"
|
||||
size="16px"
|
||||
/>
|
||||
{{ t('event.attend') }}
|
||||
</q-item-label>
|
||||
|
||||
<!-- Città -->
|
||||
<q-item-label
|
||||
lines="3"
|
||||
style="text-align: right"
|
||||
class="text_user_city"
|
||||
lines="2"
|
||||
class="cities-text"
|
||||
>
|
||||
<span v-for="(rec, ind) of myrec.mycities" :key="ind"
|
||||
><span v-if="ind > 0">, </span>{{ rec.comune }} ({{
|
||||
rec.prov
|
||||
}})</span
|
||||
<span
|
||||
v-for="(rec, ind) of myrec.mycities"
|
||||
:key="ind"
|
||||
>
|
||||
<span v-if="ind > 0">, </span>{{ rec.comune }} ({{ rec.prov }})
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side v-if="tools.canModifyThisRec(myrec, table) || editOn">
|
||||
<q-item-label>
|
||||
<q-btn rounded dense icon="fas fa-pencil-alt">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-pencil-alt" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.edit') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-copy" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('event.duplicate') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section side>
|
||||
<q-icon name="fas fa-trash-alt" />
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.elimina') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
|
||||
<!-- Menu Azioni -->
|
||||
<q-item-section
|
||||
v-if="tools.canModifyThisRec(myrec, table) || editOn"
|
||||
side
|
||||
class="actions-section"
|
||||
>
|
||||
<q-btn
|
||||
round
|
||||
flat
|
||||
dense
|
||||
icon="more_vert"
|
||||
size="sm"
|
||||
class="action-menu-btn"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list dense>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="edit"
|
||||
size="18px"
|
||||
color="primary"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.edit') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="content_copy"
|
||||
size="18px"
|
||||
color="primary"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('event.duplicate') }}</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
name="delete"
|
||||
size="18px"
|
||||
color="negative"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ t('reg.elimina') }}</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator inset="item" />
|
||||
<q-separator />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./CMyRecCard.ts">
|
||||
</script>
|
||||
<script lang="ts" src="./CMyRecCard.ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './CMyRecCard.scss';
|
||||
|
||||
Reference in New Issue
Block a user