From b5fa2bb18edb241eadf84c68128e662545876a39 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Wed, 2 Apr 2025 12:38:30 +0200
Subject: [PATCH] fix: fixed cardSummary to use ellipsis and fixed summary
 cards to flex correctly

---
 src/components/ui/CardSummary.vue             |  6 ++-
 src/pages/Entry/Card/EntrySummary.vue         |  4 +-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 47 ++++++++++++++--
 src/pages/Travel/Card/TravelSummary.vue       | 54 +++++++++++++++++--
 src/pages/Zone/Card/ZoneSummary.vue           | 12 ++---
 src/pages/Zone/ZoneList.vue                   |  2 +-
 6 files changed, 107 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 2ec6bea78..cca5cabba 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -172,6 +172,8 @@ async function fetch() {
                 .value {
                     color: var(--vn-text-color);
                     overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                 }
             }
             .header {
@@ -210,13 +212,15 @@ async function fetch() {
 .vn-card-content {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
     > div {
         max-height: 70px;
     }
 }
 
-@media (min-width: 1010px) {
+@media (min-width: 1150px) {
     .vn-card-group {
         flex-direction: row;
     }
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index 37a28968c..986bf0684 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -202,13 +202,15 @@ onMounted(async () => {
 .card-content {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
     > div {
         max-height: 24px;
     }
 }
 
-@media (min-width: 1010px) {
+@media (min-width: 1350px) {
     .card-group {
         flex-direction: row;
     }
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 74936f00a..e43302f09 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -219,8 +219,8 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                     :url="getLink('basic-data')"
                     :text="t('globals.pageTitles.basicData')"
                 />
-                <div class="vn-card-group">
-                    <div class="vn-card-content">
+                <div class="card-group">
+                    <div class="card-content">
                         <VnLv
                             :label="t('invoiceIn.list.supplier')"
                             :value="entity.supplier?.name"
@@ -249,7 +249,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             :value="entity.supplier?.country?.code"
                         />
                     </div>
-                    <div class="vn-card-content">
+                    <div class="card-content">
                         <VnLv
                             :ellipsis-value="false"
                             :label="t('invoiceIn.summary.issued')"
@@ -272,7 +272,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             :value="entity.supplier?.isVies"
                         />
                     </div>
-                    <div class="vn-card-content">
+                    <div class="card-content">
                         <VnLv
                             :label="t('invoiceIn.summary.sage')"
                             :value="entity.sageWithholding?.withholding"
@@ -290,7 +290,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             :value="invoiceIn?.isBooked"
                         />
                     </div>
-                    <div class="vn-card-content">
+                    <div class="card-content last-content">
                         <VnLv
                             :label="t('invoiceIn.summary.taxableBase')"
                             :value="toCurrency(entity.totals.totalTaxableBase)"
@@ -477,6 +477,43 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
         }
     }
 }
+
+.card-group {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.card-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    margin-bottom: 16px;
+
+    > div {
+        max-height: 60px;
+    }
+}
+
+@media (min-width: 768px) {
+    .card-content {
+        width: 48%;
+        margin-right: 2%;
+    }
+}
+
+@media (min-width: 1350px) {
+    .card-content {
+        width: 23%;
+        margin-right: 2%;
+    }
+
+    .card-content.last-content {
+        margin-right: 0;
+    }
+}
 </style>
 <i18n>
     es:
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 22e2cff86..79e79a0ad 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -291,8 +291,8 @@ onMounted(async () => {
                     :url="getLink('basic-data')"
                     :text="t('globals.pageTitles.basicData')"
                 />
-                <div class="vn-card-group">
-                    <div class="vn-card-content">
+                <div class="card-group">
+                    <div class="card-content">
                         <VnLv
                             :label="t('globals.shipped')"
                             :value="toDate(travel.shipped)"
@@ -314,7 +314,7 @@ onMounted(async () => {
                             size="sm"
                         />
                     </div>
-                    <div class="vn-card-content">
+                    <div class="card-content">
                         <VnLv
                             :label="t('globals.landed')"
                             :value="toDate(travel.landed)"
@@ -334,7 +334,7 @@ onMounted(async () => {
                             size="sm"
                         />
                     </div>
-                    <div class="vn-card-content">
+                    <div class="card-content">
                         <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
                         <VnLv :label="t('globals.reference')" :value="travel.ref" />
                         <VnLv label="m³" :value="travel.m3" />
@@ -432,3 +432,49 @@ onMounted(async () => {
         </template>
     </CardSummary>
 </template>
+<style lang="scss" scoped>
+.card-group {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.card-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
+    margin-bottom: 16px;
+
+    > div {
+        max-height: 60px;
+    }
+}
+
+@media (min-width: 768px) {
+    .card-content {
+        width: 48%;
+        margin-right: 2%;
+    }
+    .card-content:nth-child(2n) {
+        margin-right: 0;
+    }
+}
+
+@media (min-width: 1024px) {
+    .card-group {
+        flex-direction: row;
+    }
+    .card-content {
+        width: 32%;
+        margin-right: 2%;
+    }
+    .card-content:nth-child(2n) {
+        margin-right: 2%;
+    }
+    .card-content:last-child {
+        margin-right: 0;
+    }
+}
+</style>
diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index 61475b1f6..6fd34d0d3 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -75,13 +75,13 @@ onMounted(async () => {
         <template #body="{ entity: zone }">
             <QCard class="vn-one">
                 <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
-                <div class="card-group">
-                    <div class="card-content">
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
                         <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
                         <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
                         <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
                     </div>
-                    <div class="card-content">
+                    <div class="vn-card-content">
                         <VnLv
                             :label="t('summary.closeHour')"
                             :value="toTimeFormat(zone.hour)"
@@ -98,7 +98,7 @@ onMounted(async () => {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-one">
+            <QCard class="vn-max">
                 <VnTitle :url="zoneUrl + `warehouses`" :text="t('list.warehouse')" />
                 <QTable
                     :columns="columns"
@@ -110,7 +110,7 @@ onMounted(async () => {
     </CardSummary>
 </template>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
 .card-group {
     display: flex;
     flex-direction: column;
@@ -120,4 +120,4 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
 }
-</style>
+</style> -->
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 8d7c4a165..6d2247e30 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -146,7 +146,7 @@ const columns = computed(() => [
             {
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, ZoneSummary),
+                action: (row) => viewSummary(row.id, ZoneSummary, 'lg-width'),
                 isPrimary: true,
             },
             {