add css for responsive table

ministryofjustice · Oct 11, 2024 · 283d614 · 283d614
1 parent c5b8459
commit 283d614
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 7 deletions.
diff --git a/scss/base.scss b/scss/base.scss
@@ -13,6 +13,7 @@ $govuk-new-typography-scale: true;
 @import "./components/masthead";
 @import "./glossary";
 @import "./details";
+@import "./components/table";
 
 .js-required {
   display: none;

diff --git a/scss/components/_table.scss b/scss/components/_table.scss
@@ -0,0 +1,35 @@
+@media (max-width: 600px) {
+  // table thead tr {
+  //   display: none;
+  // }
+    table thead {
+      border: none;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width:100%;
+    }
+
+    table tbody tr {
+      border-bottom: 3px solid #ddd;
+      display: block;
+    }
+
+    // table th, table td {
+    //   padding: .5em;
+    // }
+
+    table tbody tr td {
+      border-bottom: 1px solid #ddd;
+      display: block;
+      text-align: right;
+    }
+
+    table td::before {
+      content: attr(data-label) ": ";
+      float: left;
+    }
+  }
diff --git a/templates/details_dashboard.html b/templates/details_dashboard.html
@@ -4,7 +4,7 @@
 
 {% block extra_details %}
   <div class="govuk-grid-row">
-    <div class="moj-scrollable-pane">
+    <div class="govuk-grid-column-full">
       {% if charts %}
         <table class="govuk-table">
           <caption class="govuk-table__caption govuk-table__caption--m">{% translate "Dashboard content" %}</caption>

diff --git a/templates/details_database.html b/templates/details_database.html
@@ -4,7 +4,7 @@
 
 {% block extra_details %}
   <div class="govuk-grid-row">
-    <div class="moj-scrollable-pane">
+    <div class="govuk-grid-column-full">
       {% if tables %}
         <table class="govuk-table">
           <caption class="govuk-table__caption govuk-table__caption--m">{% translate "Database content" %}</caption>

diff --git a/templates/details_table.html b/templates/details_table.html
@@ -5,7 +5,7 @@
 
 {% block extra_details %}
   <div class="govuk-grid-row">
-    <div class="moj-scrollable-pane">
+    <div class="govuk-grid-column-full">
       {% if entity.column_details %}
         <table class="govuk-table">
           <caption class="govuk-table__caption govuk-table__caption--m">{% translate "Table schema" %}</caption>
@@ -22,17 +22,17 @@
           <tbody class="govuk-table__body">
             {% for column in entity.column_details %}
               <tr class="govuk-table__row">
-                <td class="govuk-table__cell">{{column.display_name}}</td>
-                <td class="govuk-table__cell column-description">
+                <td data-label="Column name" class="govuk-table__cell">{{column.display_name}}</td>
+                <td data-label="Description" class="govuk-table__cell column-description">
                 {% if column.description %}
                   {{column.description|default:''|markdown:3|truncatechars_html:300}}</td>
                 {% else %}
                   <p class="govuk-visually-hidden">A description for {{column.display_name}} does not exist</p>
                 {% endif %}
                 </td>
-                <td class="govuk-table__cell">{{column.type|title}}</td>
+                <td data-label="Type" class="govuk-table__cell">{{column.type|title}}</td>
                 {% switch 'show_is_nullable_in_table_details_column' %}
-                  <td class="govuk-table__cell">{{column.nullable|yesno:"Yes,No,"}}</td>
+                  <td data-label="Is Nullable" class="govuk-table__cell">{{column.nullable|yesno:"Yes,No,"}}</td>
                 {% endswitch %}
               </tr>
             {% endfor %}