Merge pull request #196 from isubit/D8ISUTHEME-184

D8ISUTHEME-184 Improve responsive tables
isubit · Jun 7, 2022 · 9378a33 · 9378a33
2 parents 79d59d0 + 816aba7
commit 9378a33
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 25 deletions.
diff --git a/css/base.css b/css/base.css
@@ -228,18 +228,45 @@ button.btn {
 /* --------------------------------------  */
 /* ## TABLES
 /* --------------------------------------  */
-/* Overrides bootstrap.min.css */
 
-.table tbody {
+/* Duplicate bootstrap.min.css just in case .table is 
+ * not automatically applied. 
+ * 
+ * See isu-responsivetables.css for more.
+ */
+
+table {
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+  color: #212529;
+}
+
+tbody {
   border-bottom: 1px solid #cccccc;
 }
-.table thead th,
-.table th {
-  background: #eee;
+
+tr {
+  width: 100%;
 }
-.table thead th {
+
+th {
+  padding: 0.75rem;
+  vertical-align: bottom;
+  background: #eee;
+  border-top: 1px solid #dee2e6;
   border-bottom: 2px solid #cccccc;
 }
+
+td {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
+}
+
+/* Overrides bootstrap.min.css */
 caption {
   caption-side: top;
   padding: 0.5rem 0;
@@ -256,6 +283,8 @@ caption {
   border-left: 1px solid #ddd;
 }
 
+.isu-view-table { display: table; }
+
 /* --------------------------------------  */
 /* ## IMAGES
 /* --------------------------------------  */
@@ -371,7 +400,7 @@ body.cke_editable figure figcaption {
 }
 
 /*
- * Duplicate Bootstrap 4 styles in the ckeditor so table look as 
+ * Duplicate Bootstrap 4 styles in the ckeditor so tables look as 
  * true-to-live as possible.
  */
 

diff --git a/css/isu-responsivetables.css b/css/isu-responsivetables.css
@@ -1,34 +1,38 @@
 /**
  * @file
- * CSS for responsive tables. Table styling comes from the
- * Bootstrap 4 table classes, unless where overriden in base.css.
+ * CSS for responsive tables.
  */
 
 /* --------------------------------------  */
 /* ## If javascript is disabled
 /* --------------------------------------  */
 
-article table {
-  display: block; /* Allows overflow-x to scroll */
-  max-width: 100%;
-  overflow: hidden;
-  overflow-x: auto;
+/* If js is disabled, table styling is applied directly to the 
+ * element from base.css, duplicating Bootstrap 4's table styling. 
+ * Tables in Views get their table class from the views-view-table.html.twig.
+ *
+ * Our responsive solution when javascript is disabled is a contained
+ * horizontally scrolling table.
+ */
+
+table { 
+  display: block; /* Allows overflow-x to scroll */ 
 }
-article table tr {
+table tr {
   width: 100%;
 }
-article table::-webkit-scrollbar {
+table::-webkit-scrollbar {
   -webkit-appearance: none;
 }
-article table::-webkit-scrollbar:horizontal {
+table::-webkit-scrollbar:horizontal {
   height: 11px;
 }
-article table::-webkit-scrollbar-thumb {
+table::-webkit-scrollbar-thumb {
   border-radius: 8px;
   border: 2px solid white;
   background-color: rgba(0, 0, 0, 0.5);
 }
-article table::-webkit-scrollbar-track {
+table::-webkit-scrollbar-track {
   background-color: #fff;
   border-radius: 8px;
 }
@@ -72,6 +76,7 @@ article table::-webkit-scrollbar-track {
   }
   .isu-responsive-table.isu-table-none td {
     border-bottom: 1px solid #dddddd;
+    border-left: 1px solid #dddddd;
     border-right: 1px solid #dddddd;
     display: block;
   }
@@ -89,13 +94,15 @@ article table::-webkit-scrollbar-track {
     display: block;
     border-bottom: 3px solid #bbbbbb;
   }
-  .isu-responsive-table.isu-table-row tr:first-of-type {
+  .isu-responsive-table.isu-table-row thead tr,
+  .isu-responsive-table.isu-table-row tbody tr:last-of-type {
     border-bottom: 0;
   }
   .isu-responsive-table.isu-table-row td {
     display: flex;
     padding: 0;
     border-bottom: 1px solid #dddddd;
+    border-left: 1px solid #dddddd;
     border-right: 1px solid #dddddd;
   }
   .isu-responsive-table.isu-table-row td:last-of-type {
@@ -134,6 +141,7 @@ article table::-webkit-scrollbar-track {
   }
   .isu-responsive-table.isu-table-col td {
     border-bottom: 1px solid #dddddd;
+    border-left: 1px solid #dddddd;
     border-right: 1px solid #dddddd;
     display: block;
   }
@@ -165,6 +173,9 @@ article table::-webkit-scrollbar-track {
   .isu-responsive-table.isu-table-both tr:nth-of-type(2) {
     border-top: 1px solid #dddddd;
   }
+  .isu-responsive-table.isu-table-both tr:last-of-type {
+    border-bottom: 0;
+  }
   .isu-responsive-table.isu-table-both td {
     display: flex;
     padding: 0;

diff --git a/js/isu-responsivetables.js b/js/isu-responsivetables.js
@@ -7,8 +7,8 @@
 
 $(document).ready(function() {
 
-  // Find tables in content
-  var table = $('article table');
+  // Find tables in content or make-responsive tables.
+  var table = $('article table, .make-responsive-table table, table.make-responsive-table');
 
 /* 
  * First, check the table structure and assign classes.
@@ -36,7 +36,6 @@ $(document).ready(function() {
   table.addClass('isu-responsive-table table');
 
   // Colspan or Rowspan
-
   /* Remove extranneous colspan and rowspan */
 
   $('th[colspan="1"]').removeAttr('colspan');
@@ -75,7 +74,7 @@ $(document).ready(function() {
   // Cycle through each row...
   $('.isu-table-row tr').each(function() {
     // And cycle through each td in that row...
-   $(this).find('td').each(function(i) {
+    $(this).find('td').each(function(i) {
       // Find the content of the closest th...    
       var rowHeader = $(this).closest('.isu-table-row').find('tr th')[i].innerHTML;
       // And add it as a span in the td.

diff --git a/templates/views/views-view-table.html.twig b/templates/views/views-view-table.html.twig
@@ -35,7 +35,8 @@
     'cols-' ~ header|length,
     responsive ? 'responsive-enabled',
     sticky ? 'sticky-enabled',
-    'table'
+    'table',
+    'isu-view-table'
   ]
 %}
 <table{{ attributes.addClass(table_classes) }}>