Issue #106: Fix responsive table functionality.

Fixes #106.
backdrop-contrib · Apr 2, 2024 · 621f9a2 · 621f9a2
1 parent 2725523
commit 621f9a2
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
@@ -1930,6 +1930,32 @@ table tr.disabled.even {
   border-color: var(--gin-color-disabled-border);
 }
 
+/**
+ * Responsive tables.
+ */
+
+@media (max-width: 47.99em) {
+  th.priority-low,
+  td.priority-low,
+  th.priority-medium,
+  td.priority-medium {
+    display: none;
+  }
+}
+
+@media (max-width: 63.99em) {
+  th.priority-low,
+  td.priority-low {
+    display: none;
+  }
+}
+
+@media (min-width: 64em) {
+  .tableresponsive-toggle-columns {
+    display: none;
+  }
+}
+
 .draggable a.tabledrag-handle {
   vertical-align: middle;
 }

diff --git a/styles/base/_table.scss b/styles/base/_table.scss
@@ -379,3 +379,30 @@ table tr.disabled.even {
   background-color: var(--gin-color-disabled-bg);
   border-color: var(--gin-color-disabled-border);
 }
+
+/**
+ * Responsive tables.
+ */
+@include mq($to: small) {
+
+  th.priority-low,
+  td.priority-low,
+  th.priority-medium,
+  td.priority-medium {
+    display: none;
+  }
+}
+
+@include mq($to: large) {
+
+  th.priority-low,
+  td.priority-low {
+    display: none;
+  }
+}
+
+@include mq(large) {
+  .tableresponsive-toggle-columns {
+    display: none;
+  }
+}