Added responsiveness to manage domains table

2026-04-20 13:36:20 +00:00 · 2021-08-22 10:46:47 +02:00
parent d88f822125
commit b1d6f58619
8 changed files with 64 additions and 56 deletions
--- a/src/utils/table/ResponsiveTable.scss
+++ b/src/utils/table/ResponsiveTable.scss
@@ -0,0 +1,42 @@
+@import '../../utils/base';
+
+.responsive-table__header {
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: none;
+  }
+}
+
+.responsive-table__row {
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: block;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+    position: relative;
+  }
+}
+
+.responsive-table__cell.responsive-table__cell {
+  vertical-align: middle !important;
+
+  @media (max-width: $responsiveTableBreakpoint) {
+    display: block;
+    width: 100%;
+    position: relative;
+    padding: .5rem;
+    font-size: .9rem;
+
+    &[data-th]:before {
+      content: attr(data-th) ': ';
+      font-weight: 700;
+    }
+
+    &:last-child {
+      position: absolute;
+      top: 3.5px;
+      right: .5rem;
+      width: auto;
+      padding: 0;
+      border: none;
+    }
+  }
+}