Warmfix[CardSumary]: Use ellipsis property and fixed summary cards to flex correctly #1670

Merged
jon merged 10 commits from Fix-SummaryCardsFlex into test 2025-04-04 09:07:39 +00:00
2 changed files with 6 additions and 45 deletions
Showing only changes of commit 7ef02c8797 - Show all commits

View File

@ -70,8 +70,8 @@ onMounted(async () => {
:url="`#/entry/${entityId}/basic-data`"
:text="t('globals.summary.basicData')"
/>
<div class="card-group">
<div class="card-content">
<div class="vn-card-group">
<div class="vn-card-content">
<VnLv
:label="t('entry.summary.commission')"
:value="entry?.commission"
@ -93,7 +93,7 @@ onMounted(async () => {
:value="entry?.invoiceNumber"
/>
</div>
<div class="card-content">
<div class="vn-card-content">
<VnCheckbox
:label="t('entry.list.tableVisibleColumns.isOrdered')"
v-model="entry.isOrdered"
@ -130,8 +130,8 @@ onMounted(async () => {
:url="`#/travel/${entry.travel.id}/summary`"
:text="t('Travel')"
/>
<div class="card-group">
<div class="card-content">
<div class="vn-card-group">
<div class="vn-card-content">
<VnLv :label="t('entry.summary.travelReference')">
<template #value>
<span class="link">
@ -161,7 +161,7 @@ onMounted(async () => {
:value="entry.travel.warehouseIn?.name"
/>
</div>
<div class="card-content">
<div class="vn-card-content">
<VnLv :label="t('travel.awbFk')" :value="entry.travel.awbFk" />
<VnCheckbox
:label="t('entry.summary.travelDelivered')"
@ -193,33 +193,6 @@ onMounted(async () => {
</template>
</CardSummary>
</template>
<style lang="scss" scoped>
.card-group {
display: flex;
flex-direction: column;
}
.card-content {
display: flex;
flex-direction: column;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
> div {
max-height: 24px;
}
}
@media (min-width: 1350px) {
.card-group {
flex-direction: row;
}
.card-content {
flex: 1;
margin-right: 16px;
}
}
</style>
<i18n>
es:
Travel: Envío

View File

@ -109,15 +109,3 @@ onMounted(async () => {
</template>
</CardSummary>
</template>
<!-- <style lang="scss" scoped>
.card-group {
display: flex;
flex-direction: column;
}
.card-content {
display: flex;
flex-direction: column;
}
</style> -->