refactor: refs #6942 new summary layout

src/components/common/VnTitle.vue

@@ -1,16 +1,16 @@
 <script setup>
-const $props = defineProps({
+defineProps({
     url: { type: String, default: null },
     text: { type: String, default: null },
     icon: { type: String, default: 'open_in_new' },
 });
 </script>
 <template>
-    <div class="titleBox">
+    <div :class="$q.screen.gt.md ? 'q-pb-lg' : 'q-pb-md'">
         <div class="header-link">
-            <a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'">
+            <a :href="url" :class="url ? 'link' : 'color-vn-text'">
-                {{ $props.text }}
+                {{ text }}
-                <QIcon v-if="url" :name="$props.icon" />
+                <QIcon v-if="url" :name="icon" />
             </a>
         </div>
     </div>
@@ -19,7 +19,4 @@ const $props = defineProps({
 a {
     font-size: large;
 }
-.titleBox {
-    padding-bottom: 2%;
-}
 </style>

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -119,6 +119,7 @@ const intrastatColumns = ref([
         },
         sortable: true,
         align: 'left',
+        style: 'width: 10px',
     },
     {
         name: 'amount',
@@ -126,6 +127,7 @@ const intrastatColumns = ref([
         field: (row) => toCurrency(row.amount, currency.value),
         sortable: true,
         align: 'left',
+        style: 'width: 10px',
     },
     {
         name: 'net',
@@ -317,7 +319,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                 </QCardSection>
             </QCard>
             <!--Vat-->
-            <QCard v-if="entity.invoiceInTax.length">
+            <QCard v-if="entity.invoiceInTax.length" class="vat" auto-width>
                 <VnTitle :url="getLink('vat')" :text="t('invoiceIn.card.vat')" />
                 <QTable
                     :columns="vatColumns"
@@ -353,14 +355,9 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                 </QTable>
             </QCard>
             <!--Due Day-->
-            <QCard v-if="entity.invoiceInDueDay.length">
+            <QCard v-if="entity.invoiceInDueDay.length" class="due-day">
                 <VnTitle :url="getLink('due-day')" :text="t('invoiceIn.card.dueDay')" />
-                <QTable
+                <QTable :columns="dueDayColumns" :rows="entity.invoiceInDueDay" flat>
-                    class="full-width"
-                    :columns="dueDayColumns"
-                    :rows="entity.invoiceInDueDay"
-                    flat
-                >
                     <template #header="dueDayProps">
                         <QTr :props="dueDayProps" class="bg">
                             <QTh
@@ -376,9 +373,9 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                         <QTr class="bg">
                             <QTd></QTd>
                             <QTd></QTd>
-                            <QTd>{{
+                            <QTd>
-                                toCurrency(entity.totals.totalDueDay, currency)
+                                {{ toCurrency(entity.totals.totalDueDay, currency) }}
-                            }}</QTd>
+                            </QTd>
                             <QTd></QTd>
                         </QTr>
                     </template>
@@ -424,10 +421,17 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
 .bg {
     background-color: var(--vn-accent-color);
 }
+@media (min-width: $breakpoint-md) {
+    .summaryBody {
+        .q-card {
+            &.vat {
+                flex: 65%;
+            }
 
-@media (max-width: $breakpoint-md) {
+            &.due-day {
-    .cardSummary .summaryBody > .q-card.vn-two {
+                flex: 30%;
-        flex: 100%;
+            }
+        }
     }
 }
 </style>