From 05835cbc82dd789b9868e06590351a9334397486 Mon Sep 17 00:00:00 2001 From: Sebin Song Date: Tue, 26 Nov 2024 07:04:41 +1300 Subject: [PATCH] #2406 - payment table UI issue (#2410) * add custom desktop bp for payment-table * make sure todo-table looks good --- frontend/assets/style/_mixins.scss | 7 +++ .../payments/PaymentRowReceived.vue | 2 +- .../containers/payments/PaymentRowSent.vue | 2 +- .../containers/payments/PaymentsList.vue | 55 +++++++++++++++---- .../payments/payment-row/PaymentRow.vue | 8 ++- frontend/views/pages/Payments.vue | 25 +++------ 6 files changed, 68 insertions(+), 31 deletions(-) diff --git a/frontend/assets/style/_mixins.scss b/frontend/assets/style/_mixins.scss index 5927b5fff3..8be7245cc9 100644 --- a/frontend/assets/style/_mixins.scss +++ b/frontend/assets/style/_mixins.scss @@ -48,6 +48,13 @@ } } +$payment-table-desktop-bp: 1290px; +@mixin payment-table-desktop { + @media screen and (min-width: $payment-table-desktop-bp) { + @content; + } +} + %unselectable { -webkit-touch-callout: none; -webkit-user-select: none; diff --git a/frontend/views/containers/payments/PaymentRowReceived.vue b/frontend/views/containers/payments/PaymentRowReceived.vue index c3103e815b..4bd578bb53 100644 --- a/frontend/views/containers/payments/PaymentRowReceived.vue +++ b/frontend/views/containers/payments/PaymentRowReceived.vue @@ -129,7 +129,7 @@ export default ({ .c-relative-to { display: none; - @include desktop { + @include payment-table-desktop { display: block; } } diff --git a/frontend/views/containers/payments/PaymentRowSent.vue b/frontend/views/containers/payments/PaymentRowSent.vue index 55d1166d57..52ed80ab7e 100644 --- a/frontend/views/containers/payments/PaymentRowSent.vue +++ b/frontend/views/containers/payments/PaymentRowSent.vue @@ -117,7 +117,7 @@ export default ({ .c-relative-to { display: none; - @include desktop { + @include payment-table-desktop { display: block; } } diff --git a/frontend/views/containers/payments/PaymentsList.vue b/frontend/views/containers/payments/PaymentsList.vue index e1facf0adf..a61e402f12 100644 --- a/frontend/views/containers/payments/PaymentsList.vue +++ b/frontend/views/containers/payments/PaymentsList.vue @@ -150,33 +150,51 @@ export default ({ text-align: right; } - @include desktop { + @include payment-table-desktop { min-width: 4.5rem; } } th.c-th-method { - @include desktop { + @include payment-table-desktop { min-width: 7.25rem; } } th.c-th-date { - @include desktop { + @include payment-table-desktop { min-width: 6.25rem; } } th.c-th-relative-to { - @include desktop { + @include payment-table-desktop { min-width: 5.25rem; } } ::v-deep td.c-td-user { - @include desktop { + @include tablet { padding-right: 0.5rem; } + + @include desktop { + max-width: 12rem; + min-width: 10rem; + overflow: hidden; + + .c-user { + max-width: inherit; + + .c-twrapper { + width: 100%; + } + } + } + + @include from (1360px) { + max-width: 16rem; + } } &.c-is-todo { @@ -193,19 +211,31 @@ export default ({ width: 40%; @include tablet { - width: 27%; + width: 35%; } } th.c-th-method { width: 20%; + + @include tablet { + padding-right: 0.5rem; + min-width: 8rem; + } } th.c-th-amount { width: 55%; @include tablet { - width: 24%; + width: 16%; + } + } + + th.c-th-date { + @include desktop { + padding-right: 1.5rem; + min-width: 4.25rem; } } } @@ -234,9 +264,10 @@ export default ({ th.c-th-method { @include tablet { width: 24%; + padding-right: 0.5rem; } - @include desktop { + @include payment-table-desktop { width: 19%; } } @@ -244,13 +275,17 @@ export default ({ th.c-th-date { width: 18%; padding-right: 0.5rem; + + @include desktop { + width: 22%; + } } th.c-th-relative-to { display: none; padding-right: 0; - @include desktop { + @include payment-table-desktop { display: table-cell; width: 14%; } @@ -259,7 +294,7 @@ export default ({ th.c-th-action { display: none; - @include desktop { + @include payment-table-desktop { display: table-cell; width: 5%; } diff --git a/frontend/views/containers/payments/payment-row/PaymentRow.vue b/frontend/views/containers/payments/payment-row/PaymentRow.vue index 7282a51696..769dfa5433 100644 --- a/frontend/views/containers/payments/payment-row/PaymentRow.vue +++ b/frontend/views/containers/payments/payment-row/PaymentRow.vue @@ -27,7 +27,7 @@ td(v-if='$slots["cellRelativeTo"]') slot(name='cellRelativeTo') - td + td.c-td-actions .cpr-actions slot(name='cellActions') @@ -111,4 +111,10 @@ export default ({ margin-left: 0; } } + +td.c-td-actions { + @include desktop { + padding-right: 1.5rem; + } +} diff --git a/frontend/views/pages/Payments.vue b/frontend/views/pages/Payments.vue index a97c2f7051..b991560063 100644 --- a/frontend/views/pages/Payments.vue +++ b/frontend/views/pages/Payments.vue @@ -90,14 +90,13 @@ page( .tab-section .c-container(v-if='paymentsFiltered.length') - .c-payments-table-container - payments-list( - ref='paymentList' - :titles='tableTitles' - :paymentsList='paginateList(paymentsFiltered)' - :paymentsType='ephemeral.activeTab' - :selectedTodoItems.sync='ephemeral.selectedTodoItems' - ) + payments-list( + ref='paymentList' + :titles='tableTitles' + :paymentsList='paginateList(paymentsFiltered)' + :paymentsType='ephemeral.activeTab' + :selectedTodoItems.sync='ephemeral.selectedTodoItems' + ) .c-footer .c-payment-record(v-if='ephemeral.activeTab === "PaymentRowTodo"') @@ -658,16 +657,6 @@ export default ({ } } -.c-payments-table-container { - position: relative; - - @include desktop { - width: 100%; - overflow-x: auto; - overflow-y: hidden; - } -} - .c-container-empty { max-width: 25rem; margin: 0 auto;