From 1f5e4bd771bf77918ba2c287ac0cc6f0cf881d10 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 4 Apr 2025 06:58:24 +0200
Subject: [PATCH] perf: use grid template instead of flex in card-group

---
 src/components/ui/CardSummary.vue             | 14 ++---
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue | 47 ++--------------
 src/pages/Travel/Card/TravelSummary.vue       | 54 ++-----------------
 src/pages/Zone/ZoneList.vue                   |  2 +-
 4 files changed, 13 insertions(+), 104 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index cca5cabba..927e3d666 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -205,8 +205,9 @@ async function fetch() {
 }
 
 .vn-card-group {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
 }
 
 .vn-card-content {
@@ -219,15 +220,6 @@ async function fetch() {
         max-height: 70px;
     }
 }
-
-@media (min-width: 1150px) {
-    .vn-card-group {
-        flex-direction: row;
-    }
-    .vn-card-content {
-        flex: 1;
-    }
-}
 </style>
 <style lang="scss" scoped>
 .summaryHeader .vn-label-value {
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index e43302f09..74936f00a 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="card-group">
-                    <div class="card-content">
+                <div class="vn-card-group">
+                    <div class="vn-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="card-content">
+                    <div class="vn-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="card-content">
+                    <div class="vn-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="card-content last-content">
+                    <div class="vn-card-content">
                         <VnLv
                             :label="t('invoiceIn.summary.taxableBase')"
                             :value="toCurrency(entity.totals.totalTaxableBase)"
@@ -477,43 +477,6 @@ 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 79e79a0ad..22e2cff86 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="card-group">
-                    <div class="card-content">
+                <div class="vn-card-group">
+                    <div class="vn-card-content">
                         <VnLv
                             :label="t('globals.shipped')"
                             :value="toDate(travel.shipped)"
@@ -314,7 +314,7 @@ onMounted(async () => {
                             size="sm"
                         />
                     </div>
-                    <div class="card-content">
+                    <div class="vn-card-content">
                         <VnLv
                             :label="t('globals.landed')"
                             :value="toDate(travel.landed)"
@@ -334,7 +334,7 @@ onMounted(async () => {
                             size="sm"
                         />
                     </div>
-                    <div class="card-content">
+                    <div class="vn-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,49 +432,3 @@ 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/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 6d2247e30..8d7c4a165 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, 'lg-width'),
+                action: (row) => viewSummary(row.id, ZoneSummary),
                 isPrimary: true,
             },
             {