#2406 - payment table UI issue (#2410)

* add custom desktop bp for payment-table * make sure todo-table looks good
okTurtles · Nov 25, 2024 · 05835cb · 05835cb
1 parent 736a6a3
commit 05835cb
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,23 +264,28 @@ export default ({
     th.c-th-method {
       @include tablet {
         width: 24%;
+        padding-right: 0.5rem;
       }
 
-      @include desktop {
+      @include payment-table-desktop {
         width: 19%;
       }
     }
 
     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
@@ -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;
+  }
+}
 </style>
diff --git 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;