verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 85 Releases Wiki Activity

fix: fixed cardSummary to use ellipsis and fixed summary cards to flex correctly
gitea/salix-front/pipeline/pr-test This commit looks good Details

This commit is contained in:
Jon Elias 2025-04-02 12:38:30 +02:00
parent 9be4cdccc0
commit b5fa2bb18e
6 changed files with 107 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/CardSummary.vue
View File

@ -172,6 +172,8 @@ async function fetch() {
.value { .value {
color: var(--vn-text-color); color: var(--vn-text-color);
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
.header { .header {
@ -210,13 +212,15 @@ async function fetch() {
.vn-card-content { .vn-card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
> div { > div {
max-height: 70px; max-height: 70px;
} }
} }
@media (min-width: 1010px) { @media (min-width: 1150px) {
.vn-card-group { .vn-card-group {
flex-direction: row; flex-direction: row;
} }

4
src/pages/Entry/Card/EntrySummary.vue
View File

@ -202,13 +202,15 @@ onMounted(async () => {
.card-content { .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
> div { > div {
max-height: 24px; max-height: 24px;
} }
} }
@media (min-width: 1010px) { @media (min-width: 1350px) {
.card-group { .card-group {
flex-direction: row; flex-direction: row;
} }

47
src/pages/InvoiceIn/Card/InvoiceInSummary.vue
View File

@ -219,8 +219,8 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
:url="getLink('basic-data')" :url="getLink('basic-data')"
:text="t('globals.pageTitles.basicData')" :text="t('globals.pageTitles.basicData')"
/> />
<div class="vn-card-group"> <div class="card-group">
<div class="vn-card-content"> <div class="card-content">
<VnLv <VnLv
:label="t('invoiceIn.list.supplier')" :label="t('invoiceIn.list.supplier')"
:value="entity.supplier?.name" :value="entity.supplier?.name"
@ -249,7 +249,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
:value="entity.supplier?.country?.code" :value="entity.supplier?.country?.code"
/> />
</div> </div>
<div class="vn-card-content"> <div class="card-content">
<VnLv <VnLv
:ellipsis-value="false" :ellipsis-value="false"
:label="t('invoiceIn.summary.issued')" :label="t('invoiceIn.summary.issued')"
@ -272,7 +272,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
:value="entity.supplier?.isVies" :value="entity.supplier?.isVies"
/> />
</div> </div>
<div class="vn-card-content"> <div class="card-content">
<VnLv <VnLv
:label="t('invoiceIn.summary.sage')" :label="t('invoiceIn.summary.sage')"
:value="entity.sageWithholding?.withholding" :value="entity.sageWithholding?.withholding"
@ -290,7 +290,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
:value="invoiceIn?.isBooked" :value="invoiceIn?.isBooked"
/> />
</div> </div>
<div class="vn-card-content"> <div class="card-content last-content">
<VnLv <VnLv
:label="t('invoiceIn.summary.taxableBase')" :label="t('invoiceIn.summary.taxableBase')"
:value="toCurrency(entity.totals.totalTaxableBase)" :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> </style>
<i18n> <i18n>
es: es:

54
src/pages/Travel/Card/TravelSummary.vue
View File

@ -291,8 +291,8 @@ onMounted(async () => {
:url="getLink('basic-data')" :url="getLink('basic-data')"
:text="t('globals.pageTitles.basicData')" :text="t('globals.pageTitles.basicData')"
/> />
<div class="vn-card-group"> <div class="card-group">
<div class="vn-card-content"> <div class="card-content">
<VnLv <VnLv
:label="t('globals.shipped')" :label="t('globals.shipped')"
:value="toDate(travel.shipped)" :value="toDate(travel.shipped)"
@ -314,7 +314,7 @@ onMounted(async () => {
size="sm" size="sm"
/> />
</div> </div>
<div class="vn-card-content"> <div class="card-content">
<VnLv <VnLv
:label="t('globals.landed')" :label="t('globals.landed')"
:value="toDate(travel.landed)" :value="toDate(travel.landed)"
@ -334,7 +334,7 @@ onMounted(async () => {
size="sm" size="sm"
/> />
</div> </div>
<div class="vn-card-content"> <div class="card-content">
<VnLv :label="t('globals.agency')" :value="travel.agency?.name" /> <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
<VnLv :label="t('globals.reference')" :value="travel.ref" /> <VnLv :label="t('globals.reference')" :value="travel.ref" />
<VnLv label="m³" :value="travel.m3" /> <VnLv label="m³" :value="travel.m3" />
@ -432,3 +432,49 @@ onMounted(async () => {
</template> </template>
</CardSummary> </CardSummary>
</template> </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>

12
src/pages/Zone/Card/ZoneSummary.vue
View File

@ -75,13 +75,13 @@ onMounted(async () => {
<template #body="{ entity: zone }"> <template #body="{ entity: zone }">
<QCard class="vn-one"> <QCard class="vn-one">
<VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" /> <VnTitle :url="zoneUrl + `basic-data`" :text="t('summary.basicData')" />
<div class="card-group"> <div class="vn-card-group">
<div class="card-content"> <div class="vn-card-content">
<VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" /> <VnLv :label="t('list.agency')" :value="zone.agencyMode?.name" />
<VnLv :label="t('list.price')" :value="toCurrency(zone.price)" /> <VnLv :label="t('list.price')" :value="toCurrency(zone.price)" />
<VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" /> <VnLv :label="t('zone.bonus')" :value="toCurrency(zone.bonus)" />
</div> </div>
<div class="card-content"> <div class="vn-card-content">
<VnLv <VnLv
:label="t('summary.closeHour')" :label="t('summary.closeHour')"
:value="toTimeFormat(zone.hour)" :value="toTimeFormat(zone.hour)"
@ -98,7 +98,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
</QCard> </QCard>
<QCard class="vn-one"> <QCard class="vn-max">
<VnTitle :url="zoneUrl + `warehouses`" :text="t('list.warehouse')" /> <VnTitle :url="zoneUrl + `warehouses`" :text="t('list.warehouse')" />
<QTable <QTable
:columns="columns" :columns="columns"
@ -110,7 +110,7 @@ onMounted(async () => {
</CardSummary> </CardSummary>
</template> </template>
<style lang="scss" scoped> <!-- <style lang="scss" scoped>
.card-group { .card-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -120,4 +120,4 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
</style> </style> -->

2
src/pages/Zone/ZoneList.vue
View File

@ -146,7 +146,7 @@ const columns = computed(() => [
{ {
title: t('components.smartCard.viewSummary'), title: t('components.smartCard.viewSummary'),
icon: 'preview', icon: 'preview',
action: (row) => viewSummary(row.id, ZoneSummary), action: (row) => viewSummary(row.id, ZoneSummary, 'lg-width'),
isPrimary: true, isPrimary: true,
}, },
{ {