From 13b69b18e86b2bbdb4167027a277719f67078770 Mon Sep 17 00:00:00 2001 From: Mitch Dawson <86007219+mitchdawson1982@users.noreply.github.com> Date: Mon, 28 Oct 2024 10:48:55 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Responsive=20tables=20(#934)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * make tables scrollable in results * add css for responsive table * include nhs changes * update templates * add colons to column names, utilise truncatewords for descriptions & update tests * change to tablet resolution and use truncatewords_html post markdown * remove truncation of table description --- scss/base.scss | 1 + scss/components/_table.scss | 80 +++++++++++++++++++ templates/details_dashboard.html | 16 ++-- templates/details_database.html | 18 +++-- templates/details_table.html | 20 ++--- .../test_interact_with_search_results.py | 10 ++- 6 files changed, 119 insertions(+), 26 deletions(-) create mode 100644 scss/components/_table.scss diff --git a/scss/base.scss b/scss/base.scss index 9f15638e..6386e81f 100644 --- 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 new file mode 100644 index 00000000..6e3efe8b --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/templates/details_dashboard.html b/templates/details_dashboard.html index 26341c98..5e180fce 100644 --- a/templates/details_dashboard.html +++ b/templates/details_dashboard.html @@ -6,7 +6,7 @@
{% if charts %} - +
@@ -14,16 +14,18 @@ - + {% for chart in charts %} {% with chart_type=chart.entity_type|lower %} - - - + + diff --git a/templates/details_database.html b/templates/details_database.html index 8e59f7ab..260f6300 100644 --- a/templates/details_database.html +++ b/templates/details_database.html @@ -6,7 +6,7 @@
{% if tables %} -
{% translate "Dashboard content" %}
{% translate "Description" %}
{{chart.entity_ref.display_name}} +
Chart name:{{chart.entity_ref.display_name}}Description: {% if chart.description %} - {{ chart.description|markdown:3 }} +
+ {{ chart.description|markdown:3|truncatewords_html:25 }} +
{% else %} -

A description for {{chart.entity_ref.display_name}} does not exist

+

A description for {{chart.entity_ref.display_name}} does not exist

{% endif %}
+
@@ -14,20 +14,24 @@ - + {% for table in tables %} {% with table_type=table.entity_type|lower %} - - - + + diff --git a/templates/details_table.html b/templates/details_table.html index fbe10eda..f257c8ef 100644 --- a/templates/details_table.html +++ b/templates/details_table.html @@ -7,7 +7,7 @@
{% if entity.column_details %} -
{% translate "Database content" %}
{% translate "Description" %}
{{table.entity_ref.display_name}} +
Table name:{{table.entity_ref.display_name}}Description: {% if table.description %} {% if table.description|length > 200 %} - {{ table.description|slice:":200"|add:"..."|markdown:3 }} +
+ {{ table.description|markdown:3|truncatewords_html:25 }} +
{% else %} +
{{ table.description|markdown:3 }} +
{% endif %} {% else %} -

A description for {{table.entity_ref.display_name}} does not exist

+

A description for {{table.entity_ref.display_name}} does not exist

{% endif %}
+
@@ -19,20 +19,22 @@ {% endswitch %} - + {% for column in entity.column_details %} - - - + + +
+ {{column.description|default:''|markdown:3}} +
{% else %} -

A description for {{column.display_name}} does not exist

+

A description for {{column.display_name}} does not exist

{% endif %} - + {% switch 'show_is_nullable_in_table_details_column' %} - + {% endswitch %} {% endfor %} diff --git a/tests/integration/test_interact_with_search_results.py b/tests/integration/test_interact_with_search_results.py index 9eea5875..5e8c45f3 100644 --- a/tests/integration/test_interact_with_search_results.py +++ b/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")
{% translate "Table schema" %}
{{column.display_name}} +
Column name:{{column.display_name}}Description: {% if column.description %} - {{column.description|default:''|markdown:3|truncatechars_html:300}}{{column.type|title}}Type:{{column.type|title}}{{column.nullable|yesno:"Yes,No,"}}Is Nullable:{{column.nullable|yesno:"Yes,No,"}}