- Griglia Orizzontale a Carosello

- Aggiornato Tabella Eventi
- Lista Ultimi Movimenti
- Ultime strette di mano
- Ultimi Invitanti alla App

src/components/CSingleMovement/CSingleMovement.scss

@@ -23,13 +23,28 @@
     font-style: italic;
 }
 
+:root {
+    --causale-text-color: #555;
+    --causale-bg-color: #f9f9f9;
+}
+
+body.body--dark {
+    --causale-text-color: #bbb;
+    --causale-bg-color: #333;
+}
+
 .causale {
-    font-style: italic; /* Testo in corsivo */
-    color: #555;        /* Colore del testo (può essere un grigio o un altro colore per le citazioni) */
-    border-left: 4px solid #ccc; /* Linea a sinistra per emulare lo stile di una citazione */
-    padding-left: 10px; /* Spazi a sinistra per il padding */
-    margin: 8px 0; /* Spaziatura sopra e sotto */
-  }
+    position: relative;
+    /* Necessario per il posizionamento corretto del pseudo-elemento */
+    font-style: italic;
+    color: #555;
+    padding-left: 0px;
+    margin: 8px 0;
+    color: var(--causale-text-color);
+    background-color: var(--causale-bg-color);
+}
+
+
 .userto,
 .userfrom {
     white-space: pre-wrap;
@@ -42,15 +57,15 @@
     /* Allinea gli elementi al centro verticalmente */
 }
 
-.q-item__section--main ~ .q-item__section--side{
+.q-item__section--main~.q-item__section--side {
     padding-left: 2px !important;
 }
 
-.q-item__section--side{
+.q-item__section--side {
     padding-right: 4px !important;
 }
 
-.schede-mov{
+.schede-mov {
     margin-top: 2px;
     margin-bottom: 2px;
     padding-top: 2px;

src/components/CSingleMovement/CSingleMovement.vue

@@ -9,8 +9,6 @@
         'background-odd': index % 2 !== 0,
       },
     ]"
-    clickable
-    v-ripple
   >
     <q-item-section v-if="visu !== 1" avatar @click="navigabyMov(mov, true)">
       <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
@@ -31,9 +29,6 @@
       <q-item-label class="causalDest" v-if="mov.causalDest">{{
         mov.causalDest
       }}</q-item-label>
-      <q-item-label class="causale" v-if="mov.causal">&quot;{{
-        mov.causal
-      }}&quot;</q-item-label>
       <q-item-label v-if="visu !== 1" lines="3">
         {{ t('movement.from') }}
         <span class="userfrom">{{
@@ -49,7 +44,11 @@
       <q-item-label caption lines="1" v-if="mov.circuitfrom" class="circuit">{{
         mov.circuitfrom.name
       }}</q-item-label>
-      <q-item-label caption lines="1" v-if="mov.transactionDate" class="date">{{
+      <q-item-label class="causale" v-if="mov.causal">
+        <q-icon name="fas fa-star" color="orange"></q-icon>
+        &quot;{{ mov.causal }}&quot;</q-item-label
+      >
+      <q-item-label caption lines="1" v-if="mov.transactionDate" class="date text-right">{{
         tools.getstrDateTime(mov.transactionDate)
       }}</q-item-label>
     </q-item-section>