fix: refs #7197 responsive summary layout
gitea/salix-front/pipeline/pr-dev There was a failure building this commit Details

This commit is contained in:
Jorge Penadés 2024-07-04 13:56:16 +02:00
parent 4d6e2e2774
commit 8957141222
2 changed files with 13 additions and 21 deletions

View File

@ -151,6 +151,11 @@ select:-webkit-autofill {
background-color: var(--vn-section-color); background-color: var(--vn-section-color);
} }
.q-table td[shrink] {
text-overflow: ellipsis;
overflow: hidden;
max-width: 80px;
}
.tr-header { .tr-header {
color: var(--vn-label-color); color: var(--vn-label-color);
} }

View File

@ -30,6 +30,7 @@ const vatColumns = ref([
field: (row) => row.expenseFk, field: (row) => row.expenseFk,
sortable: true, sortable: true,
align: 'left', align: 'left',
classes: 'expand',
}, },
{ {
name: 'landed', name: 'landed',
@ -339,14 +340,14 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
</QTh> </QTh>
</QTr> </QTr>
</template> </template>
<template #body-cell-transaction="{ value: transactionCell }"> <template #body-cell-vat="{ value: vatCell }">
<QTd :title="transactionCell"> <QTd :title="vatCell" shrink>
{{ transactionCell }} {{ vatCell }}
</QTd> </QTd>
</template> </template>
<template #body-cell-vat="{ value: vatCell }"> <template #body-cell-transaction="{ value: transactionCell }">
<QTd :title="vatCell"> <QTd :title="transactionCell" shrink>
{{ vatCell }} {{ transactionCell }}
</QTd> </QTd>
</template> </template>
<template #bottom-row> <template #bottom-row>
@ -430,20 +431,6 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
</CardSummary> </CardSummary>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.vat {
:deep(td:nth-child(3)),
:deep(td:nth-child(4)) {
overflow: hidden;
text-overflow: ellipsis;
}
:deep(td:nth-child(3)) {
max-width: 150px;
}
:deep(td:nth-child(4)) {
max-width: 200px;
}
}
.bg { .bg {
background-color: var(--vn-accent-color); background-color: var(--vn-accent-color);
} }
@ -451,7 +438,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
color: var(--vn-text-color); color: var(--vn-text-color);
} }
@media (min-width: $breakpoint-lg) { @media (min-width: $breakpoint-md) {
.summaryBody { .summaryBody {
.vat { .vat {
flex: 65%; flex: 65%;