🚧 Responsive tables

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;

scss/components/_table.scss

@@ -0,0 +1,80 @@
+/**
+ This component is based on the NHS design system's responsive
+ tables:
+ https://github.com/nhsuk/nhsuk-frontend/blob/e8928ebe19d39fe6137a5ca046217f9ac043b29b/packages/components/tables/_tables.scss
+
+ * 1. Hiding the thead on tablet
+ * 2. Displaying the thead on tablet
+ * 3. Removing default screen reader behaviour
+ * 4. Assigning role of table-row on tablet to give default screen reader behaviour
+ * 5. Using justify content to space out elements in the row on tablet
+ * 6. Assigning a minimum width in case of black cell
+ * 7. Aligning content to the right on tablet
+ * 8. Aligning tablet header to left to split it from the data
+ * 9. Hiding tablet specific header from tablet view
+ * 10. Adding a display block value due to IE 11 not having full flex support
+ */
+.app-table-responsive {
+  width: 100%;
+
+  thead {
+    @include govuk-media-query($until: tablet) {
+      @include govuk-visually-hidden; /* [1] */
+    }
+  }
+
+  .app-table-responsive__body {
+    .app-table-responsive__heading {
+      @include govuk-typography-weight-bold();
+      padding-right: govuk-spacing(3);
+      text-align: left; /* [8] */
+
+      @include govuk-media-query($from: tablet) {
+        display: none; /* [9] */
+      }
+    }
+
+    .app-table-responsive__row {
+      display: block; /* [3] */
+      margin-bottom: govuk-spacing(4);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      @include govuk-media-query($from: tablet) {
+        display: table-row; /* [4] */
+      }
+
+      th {
+        text-align: right;
+        @include govuk-media-query($from: tablet) {
+          text-align: left;
+        }
+      }
+
+      td {
+        display: block; // For browsers that don't support flexbox
+        display: flex;
+        justify-content: space-between; /* [5] */
+        min-width: 1px; /* [6] */
+        @media all and (-ms-high-contrast: none) {
+          /* [10] */
+          display: block;
+        }
+
+        @include govuk-media-query($from: tablet) {
+          display: table-cell;
+        }
+
+        @include govuk-media-query($until: tablet) {
+          padding-right: 0;
+          text-align: right; /* [7] */
+          &:last-child {
+            border-bottom: 3px solid $govuk-border-colour;
+          }
+        }
+      }
+    }
+  }
+}

templates/details_dashboard.html

@@ -6,24 +6,26 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       {% if charts %}
-        <table class="govuk-table">
+        <table class="govuk-table app-table-responsive">
           <caption class="govuk-table__caption govuk-table__caption--m">{% translate "Dashboard content" %}</caption>
           <thead class="govuk-table__head">
             <tr class="govuk-table__row">
               <th scope="col" class="govuk-table__header app-custom-class">{% translate "Chart name" %}</th>
               <th scope="col" class="govuk-table__header app-custom-class">{% translate "Description" %}</th>
             </tr>
           </thead>
-          <tbody class="govuk-table__body">
+          <tbody class="govuk-table__body app-table-responsive__body">
             {% for chart in charts %}
               {% with chart_type=chart.entity_type|lower %}
-                <tr class="govuk-table__row">
-                  <td class="govuk-table__cell"><a href="{% url 'home:details' result_type=chart_type urn=chart.entity_ref.urn %}" class="govuk-link">{{chart.entity_ref.display_name}}</a></td>
-                  <td class="govuk-table__cell">
+                <tr class="govuk-table__row app-table-responsive__row">
+                  <td class="govuk-table__cell"><span class="app-table-responsive__heading">Chart name:</span><a href="{% url 'home:details' result_type=chart_type urn=chart.entity_ref.urn %}" class="govuk-link">{{chart.entity_ref.display_name}}</a></td>
+                  <td class="govuk-table__cell"><span class="app-table-responsive__heading">Description:</span>
                   {% if chart.description %}
-                    {{ chart.description|markdown:3 }}
+                  <div>
+                    {{ chart.description|markdown:3|truncatewords_html:25 }}
+                  </div>
                   {% else %}
-                    <p class="govuk-visually-hidden">A description for {{chart.entity_ref.display_name}} does not exist</p>
+                  <p class="govuk-visually-hidden">A description for {{chart.entity_ref.display_name}} does not exist</p>
                   {% endif %}
                   </td>
                 </tr>

templates/details_database.html

@@ -6,28 +6,32 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       {% if tables %}
-        <table class="govuk-table">
+        <table class="govuk-table app-table-responsive">
           <caption class="govuk-table__caption govuk-table__caption--m">{% translate "Database content" %}</caption>
           <thead class="govuk-table__head">
             <tr class="govuk-table__row">
               <th scope="col" class="govuk-table__header app-custom-class">{% translate "Table name" %}</th>
               <th scope="col" class="govuk-table__header app-custom-class">{% translate "Description" %}</th>
             </tr>
           </thead>
-          <tbody class="govuk-table__body">
+          <tbody class="govuk-table__body app-table-responsive__body">
             {% for table in tables %}
               {% with table_type=table.entity_type|lower %}
-                <tr class="govuk-table__row">
-                  <td class="govuk-table__cell"><a href="{% url 'home:details' result_type=table_type urn=table.entity_ref.urn %}" class="govuk-link">{{table.entity_ref.display_name}}</a></td>
-                  <td class="govuk-table__cell">
+                <tr class="govuk-table__row app-table-responsive__row">
+                  <td class="govuk-table__cell"><span class="app-table-responsive__heading">Table name:</span><a href="{% url 'home:details' result_type=table_type urn=table.entity_ref.urn %}" class="govuk-link">{{table.entity_ref.display_name}}</a></td>
+                  <td class="govuk-table__cell"><span class="app-table-responsive__heading">Description:</span>
                   {% if table.description %}
                     {% if table.description|length > 200 %}
-                      {{ table.description|slice:":200"|add:"..."|markdown:3 }}
+                    <div>
+                      {{ table.description|markdown:3|truncatewords_html:25 }}
+                    </div>
                     {% else %}
+                    <div>
                       {{ table.description|markdown:3 }}
+                    </div>
                     {% endif %}
                   {% else %}
-                    <p class="govuk-visually-hidden">A description for {{table.entity_ref.display_name}} does not exist</p>
+                  <p class="govuk-visually-hidden">A description for {{table.entity_ref.display_name}} does not exist</p>
                   {% endif %}
                   </td>
                 </tr>

templates/details_table.html

@@ -7,7 +7,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       {% if entity.column_details %}
-        <table class="govuk-table">
+        <table class="govuk-table app-table-responsive">
           <caption class="govuk-table__caption govuk-table__caption--m">{% translate "Table schema" %}</caption>
           <thead class="govuk-table__head">
             <tr class="govuk-table__row">
@@ -19,20 +19,22 @@
               {% endswitch %}
             </tr>
           </thead>
-          <tbody class="govuk-table__body">
+          <tbody class="govuk-table__body app-table-responsive__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">
+              <tr class="govuk-table__row app-table-responsive__row">
+                <td class="govuk-table__cell"><span class="app-table-responsive__heading">Column name:</span>{{column.display_name}}</td>
+                <td class="govuk-table__cell column-description"><span class="app-table-responsive__heading">Description:</span>
                 {% if column.description %}
-                  {{column.description|default:''|markdown:3|truncatechars_html:300}}</td>
+                <div>
+                  {{column.description|default:''|markdown:3}}
+                </div>
                 {% else %}
-                  <p class="govuk-visually-hidden">A description for {{column.display_name}} does not exist</p>
+                <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 class="govuk-table__cell"><span class="app-table-responsive__heading">Type:</span>{{column.type|title}}</td>
                 {% switch 'show_is_nullable_in_table_details_column' %}
-                  <td class="govuk-table__cell">{{column.nullable|yesno:"Yes,No,"}}</td>
+                  <td class="govuk-table__cell"><span class="app-table-responsive__heading">Is Nullable:</span>{{column.nullable|yesno:"Yes,No,"}}</td>
                 {% endswitch %}
               </tr>
             {% endfor %}

tests/integration/test_interact_with_search_results.py

@@ -51,7 +51,9 @@ def test_table_search_to_details(self, mock_catalogue):
         self.start_on_the_search_page()
         self.enter_a_query_and_submit("court timeliness")
         self.click_on_the_first_result()
-        self.verify_i_am_on_the_table_details_page("description with markdown")
+        self.verify_i_am_on_the_table_details_page(
+            "Description:\ndescription with markdown"
+        )
 
     def test_table_search_to_details_accessibility(self, mock_catalogue):
         """
@@ -69,7 +71,7 @@ def test_table_search_to_details_accessibility(self, mock_catalogue):
         self.enter_a_query_and_submit("court timeliness")
         self.click_on_the_first_result()
         self.verify_i_am_on_the_table_details_page(
-            "A description for urn does not exist"
+            "Description:\nA description for urn does not exist"
         )
 
     def test_database_search_to_table_details(self, mock_catalogue, example_database):
@@ -88,7 +90,9 @@ def test_database_search_to_table_details(self, mock_catalogue, example_database
         self.verify_database_details()
         self.verify_database_tables_listed()
         self.click_on_table()
-        self.verify_i_am_on_the_table_details_page("description with markdown")
+        self.verify_i_am_on_the_table_details_page(
+            "Description:\ndescription with markdown"
+        )
 
     def start_on_the_search_page(self):
         self.selenium.get(f"{self.live_server_url}/search?new=True")