- versione: 1.2.77

- aggiustamenti e miglioramenti estetici
2025-11-03 14:24:10 +01:00
parent a164db8bf3
commit d812c6c799
34 changed files with 1121 additions and 348 deletions
--- a/src/components/CSingleMovement/CSingleMovement.scss
+++ b/src/components/CSingleMovement/CSingleMovement.scss
@@ -1,76 +1,330 @@
-.userfrom {
-    color: red;
+// Card principale
+.movement-card {
+  margin-bottom: 12px;
+  border-radius: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(180deg, #1e88e5 0%, #1565c0 100%);
+    transform: scaleY(0);
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+    border-color: rgba(30, 136, 229, 0.3);
+    
+    &::before {
+      transform: scaleY(1);
+    }
+  }
+  
+  &--even {
+    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+  }
 }

-.userto {
-    color: green;
+// Container avatar
+.avatar-container {
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
 }

-.circuit {
-    color: blue;
+.avatar-with-value {
+  flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  transition: transform 0.2s ease;
+  
+  &:hover {
+    transform: scale(1.05);
+  }
 }

-.date {
-    color: gray;
+// Badge importo
+.amount-badge {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  
+  &--sent {
+    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
+    color: #c62828;
+  }
+  
+  &--received {
+    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+    color: #2e7d32;
+  }
 }

-.rigamov {
-    background-color: lightgray;
+// Contenuto movimento
+.movement-content {
+  min-width: 0;
+  flex: 1;
 }

-.causaleDest {
+// Causale destinazione
+.causale-dest {
+  display: flex;
+  align-items: center;
+  font-style: italic;
+  color: #5e35b1;
+  font-weight: 500;
+  font-size: 0.9rem;
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #ede7f6 0%, #f3e5f5 100%);
+  border-radius: 8px;
+  border-left: 3px solid #5e35b1;
+}
+
+// Info transazione
+.transaction-info {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px;
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.label-text {
+  color: #757575;
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
+.user-name {
+  font-weight: 600;
+  word-wrap: break-word;
+  word-break: break-word;
+  transition: color 0.2s ease;
+  
+  &--from {
+    color: #e53935;
+    
+    &:hover {
+      color: #c62828;
+    }
+  }
+  
+  &--to {
+    color: #43a047;
+    
+    &:hover {
+      color: #2e7d32;
+    }
+  }
+}
+
+// Badge circuito
+.circuit-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+  color: #1565c0;
+  border-radius: 16px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid #90caf9;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
+  }
+}
+
+// Box causale
+.causale-box {
+  position: relative;
+  padding: 10px 12px 10px 36px;
+  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
+  border-left: 3px solid #ffa726;
+  border-radius: 8px;
+  font-style: italic;
+  color: #e65100;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.causale-icon {
+  position: absolute;
+  left: 10px;
+  top: 12px;
+  color: #ff9800;
+}
+
+.causale-text {
+  font-weight: 500;
+}
+
+// Data transazione
+.transaction-date {
+  display: flex;
+  align-items: center;
+  color: #9e9e9e;
+  font-size: 0.8rem;
+  font-weight: 400;
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .movement-card {
+    margin-bottom: 10px;
+    border-radius: 12px;
+    
+    :deep(.q-card-section) {
+      padding: 12px !important;
+    }
+  }
+  
+  .movement-content {
+    padding: 0 8px !important;
+  }
+  
+  .avatar-with-value {
+    gap: 6px;
+  }
+  
+  .amount-badge {
+    padding: 3px 10px;
+    font-size: 0.8rem;
+  }
+  
+  .causale-dest {
+    font-size: 0.85rem;
+    padding: 5px 10px;
+  }
+  
+  .transaction-info {
+    font-size: 0.875rem;
+  }
+  
+  .label-text {
+    font-size: 0.8rem;
+  }
+  
+  .circuit-badge {
+    font-size: 0.8rem;
+    padding: 3px 10px;
+  }
+  
+  .causale-box {
+    padding: 8px 10px 8px 32px;
+    font-size: 0.85rem;
+  }
+  
+  .causale-icon {
+    left: 8px;
+    top: 10px;
+  }
+  
+  .transaction-date {
+    font-size: 0.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .movement-card {
+    border-radius: 10px;
+    
+    :deep(.q-card-section) {
+      padding: 10px !important;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .avatar-container,
+  .avatar-with-value {
    margin-bottom: 8px;
-    font-style: italic;
-}
-
-:root {
-    --causale-text-color: #555;
-    --causale-bg-color: #f9f9f9;
+  }
+  
+  .movement-content {
+    padding: 0 !important;
+    width: 100%;
+  }
+  
+  .amount-badge {
+    font-size: 0.75rem;
+    padding: 2px 8px;
+  }
+  
+  .transaction-info {
+    font-size: 0.85rem;
+  }
 }

+// Dark mode support
 body.body--dark {
-    --causale-text-color: #bbb;
-    --causale-bg-color: #333;
+  .movement-card {
+    background: #1e1e1e;
+    border-color: rgba(255, 255, 255, 0.12);
+    
+    &--even {
+      background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
+    }
+    
+    &:hover {
+      border-color: rgba(30, 136, 229, 0.5);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    }
+  }
+  
+  .causale-dest {
+    background: linear-gradient(135deg, #311b92 0%, #4a148c 100%);
+    color: #b39ddb;
+    border-left-color: #7c4dff;
+  }
+  
+  .label-text {
+    color: #bdbdbd;
+  }
+  
+  .circuit-badge {
+    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
+    color: #90caf9;
+    border-color: #1976d2;
+  }
+  
+  .causale-box {
+    background: linear-gradient(135deg, #4e342e 0%, #5d4037 100%);
+    color: #ffb74d;
+    border-left-color: #ff9800;
+  }
+  
+  .causale-icon {
+    color: #ffa726;
+  }
+  
+  .transaction-date {
+    color: #757575;
+  }
 }

-.causale {
-    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;
-    /* Impedisce il wrapping del testo */
-}
-
-.q-item-section.d-flex {
-    display: flex;
-    align-items: center;
-    /* Allinea gli elementi al centro verticalmente */
-}
-
-.q-item__section--main~.q-item__section--side {
-    padding-left: 2px !important;
-}
-
-.q-item__section--side {
-    padding-right: 4px !important;
-}
-
-.schede-mov {
-    margin-top: 2px;
-    margin-bottom: 2px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-
-    border: solid 1px blue;
-    border-radius: 20px;
+// Utility
+.cursor-pointer {
+  cursor: pointer;
 }
--- a/src/components/CSingleMovement/CSingleMovement.ts
+++ b/src/components/CSingleMovement/CSingleMovement.ts
@@ -17,7 +17,7 @@ export default defineComponent({
  components: { CMyImgUser, CCurrencyValue },
  props: {
    mov: {
-      type: Object as PropType<IMovement>,
+      type: Object as PropType<IMovVisu>,
      required: true,
    },
    index: {
@@ -47,7 +47,7 @@ export default defineComponent({
      return mystr
    }

-    function navigabyMov(mov: IMovQuery, from: boolean) {
+    function navigabyMov(mov: IMovVisu, from: boolean) {
      let link = ''
      if (from) {
        if (mov.tipocontofrom === shared_consts.AccountType.USER) {
--- a/src/components/CSingleMovement/CSingleMovement.vue
+++ b/src/components/CSingleMovement/CSingleMovement.vue
@@ -1,74 +1,114 @@
 <template>
-  <q-item
+  <q-card
    v-if="mov"
-    :class="[
-      'm-mb-sm',
-      'schede-mov',
-      {
-        'background-even': index % 2 === 0,
-        'background-odd': index % 2 !== 0,
-      },
-    ]"
+    flat
+    bordered
+    class="movement-card"
+    :class="{ 'movement-card--even': index % 2 === 0 }"
  >
-    <q-item-section v-if="visu !== 1" avatar @click="navigabyMov(mov, true)">
-      <CMyImgUser :mov="mov" :from="true"> </CMyImgUser>
-    </q-item-section>
-    <q-item-section v-else side @click="navigabyMov(mov, false)">
-      <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
-      <CCurrencyValue
-        :symbol="mov.circuitfrom.symbol"
-        color="red"
-        v-model="mov.amount"
-        :small="true"
-        label=""
-      >
-      </CCurrencyValue>
-    </q-item-section>
+    <q-card-section class="row items-center q-pa-sm no-wrap">

-    <q-item-section>
-      <q-item-label class="causalDest" v-if="mov.causalDest">{{
-        mov.causalDest
-      }}</q-item-label>
-      <q-item-label v-if="visu !== 1" lines="3">
-        {{ t('movement.from') }}
-        <span class="userfrom">{{
-          tools.getUsernameOrGroupOrContoComByMov(mov, true)
-        }}</span>
-      </q-item-label>
-      <q-item-label v-if="visu !== 2" lines="3">
-        {{ t('movement.to') }}
-        <span class="userto">{{
-          tools.getUsernameOrGroupOrContoComByMov(mov, false)
-        }}</span></q-item-label
+      <!-- Avatar FROM (mostrato in 'tutti' e 'ricevuti') -->
+      <div
+        v-if="visu !== 1"
+        class="avatar-with-value cursor-pointer"
+        @click="navigabyMov(mov, true)"
      >
-      <q-item-label caption lines="1" v-if="mov.circuitfrom" class="circuit">{{
-        mov.circuitfrom.name
-      }}</q-item-label>
-      <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>
+        <CMyImgUser :mov="mov" :from="true" />
+        <div v-if="visu === 2" class="amount-badge amount-badge--received">
+          <CCurrencyValue
+            :symbol="mov.circuitto?.symbol || mov.circuitfrom?.symbol"
+            :color="tools.getColorByCircuit(mov.circuitto || mov.circuitfrom)"
+            v-model="mov.amount"
+            :small="true"
+            label=""
+          />
+        </div>
+      </div>

-    <q-item-section v-if="visu === 0" side @click="navigabyMov(mov, false)">
-      <CMyImgUser :mov="mov" :from="false"> </CMyImgUser>
-      <CCurrencyValue
-        :symbol="mov.circuitfrom.symbol"
-        color="red"
-        v-model="mov.amount"
-        :small="true"
-        label=""
+      <!-- Avatar TO (mostrato in 'inviati') -->
+      <div
+        v-if="visu === 1"
+        class="avatar-with-value cursor-pointer"
+        @click="navigabyMov(mov, false)"
      >
-      </CCurrencyValue>
-    </q-item-section>
-  </q-item>
+        <CMyImgUser :mov="mov" :from="false" />
+        <div class="amount-badge amount-badge--sent">
+          <CCurrencyValue
+            :symbol="mov.circuitfrom?.symbol"
+            :color="tools.getColorByCircuit(mov.circuitfrom)"
+            v-model="mov.amount"
+            :small="true"
+            label=""
+          />
+        </div>
+      </div>
+
+      <!-- Contenuto principale -->
+      <div class="col movement-content q-px-md">
+        <div v-if="mov.causalDest" class="causale-dest q-mb-xs">
+          <q-icon name="flag" size="16px" class="q-mr-xs" />
+          {{ mov.causalDest }}
+        </div>
+
+        <!-- Da utente -->
+        <div v-if="visu !== 1" class="transaction-info q-mb-xs">
+          <span class="label-text">{{ t('movement.from') }}</span>
+          <span class="user-name user-name--from">
+            {{ tools.getUsernameOrGroupOrContoComByMov(mov, true) }}
+          </span>
+        </div>
+
+        <!-- A utente -->
+        <div v-if="visu !== 2" class="transaction-info q-mb-xs">
+          <span class="label-text">{{ t('movement.to') }}</span>
+          <span class="user-name user-name--to">
+            {{ tools.getUsernameOrGroupOrContoComByMov(mov, false) }}
+          </span>
+        </div>
+
+        <!-- Circuito -->
+        <div v-if="mov.circuitfrom" class="circuit-badge q-mb-xs">
+          <q-icon name="account_balance" size="14px" class="q-mr-xs" />
+          {{ mov.circuitfrom.name }}
+        </div>
+
+        <!-- Causale -->
+        <div v-if="mov.causal" class="causale-box q-mt-sm">
+          <q-icon name="format_quote" size="16px" class="causale-icon" />
+          <span class="causale-text">{{ mov.causal }}</span>
+        </div>
+
+        <!-- Data -->
+        <div v-if="mov.transactionDate" class="transaction-date q-mt-xs">
+          <q-icon name="schedule" size="14px" class="q-mr-xs" />
+          {{ tools.getstrDateTime(mov.transactionDate) }}
+        </div>
+      </div>
+
+      <!-- Avatar TO + valore (solo per 'tutti') -->
+      <div
+        v-if="visu === 0"
+        class="avatar-with-value cursor-pointer"
+        @click="navigabyMov(mov, false)"
+      >
+        <CMyImgUser :mov="mov" :from="false" />
+        <div class="amount-badge amount-badge--received">
+          <CCurrencyValue
+            :symbol="mov.circuitto?.symbol || mov.circuitfrom?.symbol"
+            :color="tools.getColorByCircuit(mov.circuitto)"
+            v-model="mov.amount"
+            :small="true"
+            label=""
+          />
+        </div>
+      </div>
+
+    </q-card-section>
+  </q-card>
 </template>

-<script lang="ts" src="./CSingleMovement.ts">
-</script>
+<script lang="ts" src="./CSingleMovement.ts"></script>

 <style lang="scss" scoped>
@import './CSingleMovement.scss';