From b02b96aa717dacc3f2de534076789a83c6aa3be5 Mon Sep 17 00:00:00 2001 From: Mitch Dawson Date: Thu, 10 Oct 2024 14:48:46 +0100 Subject: [PATCH 1/7] make tables scrollable in results --- templates/details_dashboard.html | 2 +- templates/details_database.html | 2 +- templates/details_table.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/details_dashboard.html b/templates/details_dashboard.html index fb78d066..d20aa87c 100644 --- a/templates/details_dashboard.html +++ b/templates/details_dashboard.html @@ -4,7 +4,7 @@ {% block extra_details %}
-
+
{% if charts %} diff --git a/templates/details_database.html b/templates/details_database.html index 8e59f7ab..1844ce3a 100644 --- a/templates/details_database.html +++ b/templates/details_database.html @@ -4,7 +4,7 @@ {% block extra_details %}
-
+
{% if tables %}
{% translate "Dashboard content" %}
diff --git a/templates/details_table.html b/templates/details_table.html index da9835b7..f4c17d3e 100644 --- a/templates/details_table.html +++ b/templates/details_table.html @@ -4,7 +4,7 @@ {% block extra_details %}
-
+
{% if entity.column_details %}
{% translate "Database content" %}
From 26f32e91b06927f1fd8d17e71f91d13eedf6e20e Mon Sep 17 00:00:00 2001 From: Mitch Dawson Date: Fri, 11 Oct 2024 15:59:48 +0100 Subject: [PATCH 2/7] add css for responsive table --- scss/base.scss | 1 + scss/components/_table.scss | 82 ++++++++++++++++++++++++++++++++ templates/details_dashboard.html | 2 +- templates/details_database.html | 2 +- templates/details_table.html | 10 ++-- 5 files changed, 90 insertions(+), 7 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..76f15724 --- /dev/null +++ b/scss/components/_table.scss @@ -0,0 +1,82 @@ +@media screen and (max-width: 600px) { + table thead { + border: none; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + table tr { + border-bottom: 3px solid #ddd; + display: block; + } + + table td { + border-bottom: 1px solid #ddd; + display: block; + text-align: right; + } + + table td::before { + content: attr(data-label); + float: left; + } +} + +// .govuk-table-responsive { +// font-family: "GDS Transport", arial, sans-serif; +// -webkit-font-smoothing: antialiased; +// -moz-osx-font-smoothing: grayscale; +// font-weight: 400; +// font-size: 1.1875rem; +// line-height: 1.3157894737; +// color: #0b0c0c; +// width: 100%; +// margin-bottom: 20px; +// border-spacing: 0; +// border-collapse: collapse; +// } + + +// @media (max-width: 600px) { + +// .govuk-table-responsive { +// border-collapse: collapse; +// margin:0; +// width:100%; +// } +// // table thead tr { +// // display: none; +// // } +// table thead { +// border-collapse:collapse; +// 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 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 index d20aa87c..fb78d066 100644 --- a/templates/details_dashboard.html +++ b/templates/details_dashboard.html @@ -4,7 +4,7 @@ {% block extra_details %}
-
+
{% if charts %}
{% translate "Table schema" %}
diff --git a/templates/details_database.html b/templates/details_database.html index 1844ce3a..8e59f7ab 100644 --- a/templates/details_database.html +++ b/templates/details_database.html @@ -4,7 +4,7 @@ {% block extra_details %}
-
+
{% if tables %}
{% translate "Dashboard content" %}
diff --git a/templates/details_table.html b/templates/details_table.html index 9978ec0c..8ec5f7d0 100644 --- a/templates/details_table.html +++ b/templates/details_table.html @@ -5,7 +5,7 @@ {% block extra_details %}
-
+
{% if entity.column_details %}
{% translate "Database content" %}
@@ -22,17 +22,17 @@ {% for column in entity.column_details %} - - + {% else %}

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

{% endif %} - + {% switch 'show_is_nullable_in_table_details_column' %} - + {% endswitch %} {% endfor %} From 0efb281a5ef8d99b27345268c724955e9a6a2584 Mon Sep 17 00:00:00 2001 From: Mitch Dawson Date: Mon, 14 Oct 2024 12:26:43 +0100 Subject: [PATCH 3/7] include nhs changes --- scss/components/_table.scss | 141 +++++++++++++++++------------------ templates/details_table.html | 14 ++-- 2 files changed, 77 insertions(+), 78 deletions(-) diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 76f15724..8aecf88a 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -1,82 +1,81 @@ -@media screen and (max-width: 600px) { - table thead { - border: none; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } +/** + 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 - table tr { - border-bottom: 3px solid #ddd; - display: block; - } + * 1. Hiding the thead on mobile + * 2. Displaying the thead on desktop + * 3. Removing default screen reader behaviour + * 4. Assigning role of table-row on desktop to give default screen reader behaviour + * 5. Using justify content to space out elements in the row on mobile + * 6. Assigning a minimum width in case of black cell + * 7. Aligning content to the right on mobile + * 8. Aligning mobile header to left to split it from the data + * 9. Hiding mobile specific header from desktop view + * 10. Adding a display block value due to IE 11 not having full flex support + */ +.app-table-responsive { + margin-bottom: 0; + width: 100%; - table td { - border-bottom: 1px solid #ddd; - display: block; - text-align: right; + thead { + @include govuk-media-query($until: desktop) { + @include govuk-visually-hidden; /* [1] */ + } } - table td::before { - content: attr(data-label); - float: left; - } -} + .app-table-responsive__body { + .app-table-responsive__heading { + font-weight: govuk-typography-weight-bold(); + padding-right: govuk-spacing(3); + text-align: left; /* [8] */ -// .govuk-table-responsive { -// font-family: "GDS Transport", arial, sans-serif; -// -webkit-font-smoothing: antialiased; -// -moz-osx-font-smoothing: grayscale; -// font-weight: 400; -// font-size: 1.1875rem; -// line-height: 1.3157894737; -// color: #0b0c0c; -// width: 100%; -// margin-bottom: 20px; -// border-spacing: 0; -// border-collapse: collapse; -// } + @include govuk-media-query($from: desktop) { + display: none; /* [9] */ + } + } + .app-table-responsive__row { + display: block; /* [3] */ + margin-bottom: govuk-spacing(4); -// @media (max-width: 600px) { + &:last-child { + margin-bottom: 0; + } -// .govuk-table-responsive { -// border-collapse: collapse; -// margin:0; -// width:100%; -// } -// // table thead tr { -// // display: none; -// // } -// table thead { -// border-collapse:collapse; -// border: none; -// clip: rect(0 0 0 0); -// height: 1px; -// margin: -1px; -// overflow: hidden; -// padding: 0; -// position: absolute; -// width:100%; -// } + @include govuk-media-query($from: desktop) { + display: table-row; /* [4] */ + } -// table tbody tr { -// border-bottom: 3px solid #ddd; -// display: block; -// } + th { + text-align: right; + @include govuk-media-query($from: desktop) { + text-align: left; + } + } -// table tbody tr td { -// border-bottom: 1px solid #ddd; -// display: block; -// text-align: right; -// } + 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; + } -// table td::before { -// content: attr(data-label) ": "; -// float: left; -// } -// } + @include govuk-media-query($from: desktop) { + display: table-cell; + } + + @include govuk-media-query($until: desktop) { + padding-right: 0; + text-align: right; /* [7] */ + &:last-child { + border-bottom: 3px solid $govuk-border-colour; + } + } + } + } + } +} diff --git a/templates/details_table.html b/templates/details_table.html index 8ec5f7d0..5177b31a 100644 --- a/templates/details_table.html +++ b/templates/details_table.html @@ -7,7 +7,7 @@
{% if entity.column_details %} -
{% translate "Table schema" %}
{{column.display_name}} + {{column.display_name}} {% if column.description %} {{column.description|default:''|markdown:3|truncatechars_html:300}}{{column.type|title}}{{column.type|title}}{{column.nullable|yesno:"Yes,No,"}}{{column.nullable|yesno:"Yes,No,"}}
+
@@ -19,20 +19,20 @@ {% endswitch %} - + {% for column in entity.column_details %} - - - + + {% else %}

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

{% endif %} - + {% switch 'show_is_nullable_in_table_details_column' %} - + {% endswitch %} {% endfor %} From fab5201116d2c1f52b64fc7a3aaff722d1a54703 Mon Sep 17 00:00:00 2001 From: Mitch Dawson Date: Mon, 14 Oct 2024 14:54:11 +0100 Subject: [PATCH 4/7] update templates --- scss/components/_table.scss | 3 +-- templates/details_dashboard.html | 14 +++++++------- templates/details_database.html | 16 ++++++++-------- templates/details_table.html | 12 ++++++------ .../test_interact_with_search_results.py | 10 +++++++--- 5 files changed, 29 insertions(+), 26 deletions(-) diff --git a/scss/components/_table.scss b/scss/components/_table.scss index 8aecf88a..b5b688a6 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -15,7 +15,6 @@ * 10. Adding a display block value due to IE 11 not having full flex support */ .app-table-responsive { - margin-bottom: 0; width: 100%; thead { @@ -26,7 +25,7 @@ .app-table-responsive__body { .app-table-responsive__heading { - font-weight: govuk-typography-weight-bold(); + @include govuk-typography-weight-bold(); padding-right: govuk-spacing(3); text-align: left; /* [8] */ diff --git a/templates/details_dashboard.html b/templates/details_dashboard.html index fb78d066..9cb07704 100644 --- a/templates/details_dashboard.html +++ b/templates/details_dashboard.html @@ -6,7 +6,7 @@
{% if charts %} -
{% 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,"}}
+
@@ -14,16 +14,16 @@ - + {% 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..f5225449 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 }} {% 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,20 @@ - + {% for table in tables %} {% with table_type=table.entity_type|lower %} - - - + + diff --git a/templates/details_table.html b/templates/details_table.html index 5177b31a..08941026 100644 --- a/templates/details_table.html +++ b/templates/details_table.html @@ -22,17 +22,17 @@ {% for column in entity.column_details %} - - + + {{column.description|default:''|markdown:3|truncatechars_html:300}} {% 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..88fbba35 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") From 623ffed77e21b8417700030b60ccd2283e1e4743 Mon Sep 17 00:00:00 2001 From: Mitch Dawson Date: Tue, 15 Oct 2024 13:29:32 +0100 Subject: [PATCH 5/7] add colons to column names, utilise truncatewords for descriptions & update tests --- .pre-commit-config.yaml | 2 +- templates/details_dashboard.html | 8 +++++--- templates/details_database.html | 12 ++++++++---- templates/details_table.html | 12 +++++++----- .../integration/test_interact_with_search_results.py | 6 +++--- 5 files changed, 24 insertions(+), 16 deletions(-) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 1a879109..8e8f9ada 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -11,7 +11,7 @@ repos: exclude: tf$|j2$ - repo: https://github.com/psf/black - rev: 24.8.0 + rev: 24.10.0 hooks: - id: black name: black formatting diff --git a/templates/details_dashboard.html b/templates/details_dashboard.html index 9cb07704..b51f2ffe 100644 --- a/templates/details_dashboard.html +++ b/templates/details_dashboard.html @@ -18,10 +18,12 @@ {% for chart in charts %} {% with chart_type=chart.entity_type|lower %} - - + - - + {% for column in entity.column_details %} - - + +
+ {{column.description|default:''|markdown:3|truncatechars_html:300}} +
{% else %}

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 88fbba35..5e8c45f3 100644 --- a/tests/integration/test_interact_with_search_results.py +++ b/tests/integration/test_interact_with_search_results.py @@ -52,7 +52,7 @@ def test_table_search_to_details(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( - "Description\ndescription with markdown" + "Description:\ndescription with markdown" ) def test_table_search_to_details_accessibility(self, mock_catalogue): @@ -71,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( - "Description\nA 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): @@ -91,7 +91,7 @@ def test_database_search_to_table_details(self, mock_catalogue, example_database self.verify_database_tables_listed() self.click_on_table() self.verify_i_am_on_the_table_details_page( - "Description\ndescription with markdown" + "Description:\ndescription with markdown" ) def start_on_the_search_page(self): From 7d330425a923b29d116527d7730bdfbf330117ee Mon Sep 17 00:00:00 2001 From: Mitch Dawson Date: Tue, 15 Oct 2024 14:24:12 +0100 Subject: [PATCH 6/7] change to tablet resolution and use truncatewords_html post markdown --- scss/components/_table.scss | 26 +++++++++++++------------- templates/details_dashboard.html | 2 +- templates/details_database.html | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/scss/components/_table.scss b/scss/components/_table.scss index b5b688a6..6e3efe8b 100644 --- a/scss/components/_table.scss +++ b/scss/components/_table.scss @@ -3,22 +3,22 @@ tables: https://github.com/nhsuk/nhsuk-frontend/blob/e8928ebe19d39fe6137a5ca046217f9ac043b29b/packages/components/tables/_tables.scss - * 1. Hiding the thead on mobile - * 2. Displaying the thead on desktop + * 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 desktop to give default screen reader behaviour - * 5. Using justify content to space out elements in the row on mobile + * 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 mobile - * 8. Aligning mobile header to left to split it from the data - * 9. Hiding mobile specific header from desktop view + * 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: desktop) { + @include govuk-media-query($until: tablet) { @include govuk-visually-hidden; /* [1] */ } } @@ -29,7 +29,7 @@ padding-right: govuk-spacing(3); text-align: left; /* [8] */ - @include govuk-media-query($from: desktop) { + @include govuk-media-query($from: tablet) { display: none; /* [9] */ } } @@ -42,13 +42,13 @@ margin-bottom: 0; } - @include govuk-media-query($from: desktop) { + @include govuk-media-query($from: tablet) { display: table-row; /* [4] */ } th { text-align: right; - @include govuk-media-query($from: desktop) { + @include govuk-media-query($from: tablet) { text-align: left; } } @@ -63,11 +63,11 @@ display: block; } - @include govuk-media-query($from: desktop) { + @include govuk-media-query($from: tablet) { display: table-cell; } - @include govuk-media-query($until: desktop) { + @include govuk-media-query($until: tablet) { padding-right: 0; text-align: right; /* [7] */ &:last-child { diff --git a/templates/details_dashboard.html b/templates/details_dashboard.html index b51f2ffe..cfaa1229 100644 --- a/templates/details_dashboard.html +++ b/templates/details_dashboard.html @@ -22,7 +22,7 @@
{% 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|slice:":200"|add:"..."|markdown:3 }} {% else %} - {{ table.description|markdown:3 }} + {{ 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 %}
Column name {{column.display_name}}Description + Column name{{column.display_name}}Description {% if column.description %} - {{column.description|default:''|markdown:3|truncatechars_html:300}}Type {{column.type|title}}Type{{column.type|title}}Is Nullable {{column.nullable|yesno:"Yes,No,"}}Is Nullable{{column.nullable|yesno:"Yes,No,"}}
Chart name{{chart.entity_ref.display_name}}Description + Chart name:{{chart.entity_ref.display_name}}Description: {% if chart.description %} - {{ chart.description|markdown:3 }} +
+ {{ chart.description|truncatewords:25|markdown:3 }} +
{% else %}

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

{% endif %} diff --git a/templates/details_database.html b/templates/details_database.html index f5225449..4f6bcfd9 100644 --- a/templates/details_database.html +++ b/templates/details_database.html @@ -18,13 +18,17 @@ {% for table in tables %} {% with table_type=table.entity_type|lower %}
Table name{{table.entity_ref.display_name}}Description + 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|truncatewords:25|markdown:3 }} +
{% else %} - {{ table.description|markdown:3 }} +
+ {{ table.description|markdown:3 }} +
{% endif %} {% else %}

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

diff --git a/templates/details_table.html b/templates/details_table.html index 08941026..5b025ac0 100644 --- a/templates/details_table.html +++ b/templates/details_table.html @@ -22,17 +22,19 @@
Column name{{column.display_name}}Description + Column name:{{column.display_name}}Description: {% if column.description %} - {{column.description|default:''|markdown:3|truncatechars_html:300}}Type{{column.type|title}}Type:{{column.type|title}}Is Nullable{{column.nullable|yesno:"Yes,No,"}}Is Nullable:{{column.nullable|yesno:"Yes,No,"}}
Description: {% if chart.description %}
- {{ chart.description|truncatewords:25|markdown:3 }} + {{ chart.description|markdown:3|truncatewords_html:25 }}
{% else %}

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

diff --git a/templates/details_database.html b/templates/details_database.html index 4f6bcfd9..260f6300 100644 --- a/templates/details_database.html +++ b/templates/details_database.html @@ -23,7 +23,7 @@ {% if table.description %} {% if table.description|length > 200 %}
- {{ table.description|truncatewords:25|markdown:3 }} + {{ table.description|markdown:3|truncatewords_html:25 }}
{% else %}
From 47c5dd9daab0adaba44d3452ac1d5bcff6af2169 Mon Sep 17 00:00:00 2001 From: Mitch Dawson Date: Thu, 17 Oct 2024 14:54:04 +0100 Subject: [PATCH 7/7] remove truncation of table description --- templates/details_table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/details_table.html b/templates/details_table.html index 5b025ac0..f257c8ef 100644 --- a/templates/details_table.html +++ b/templates/details_table.html @@ -26,7 +26,7 @@
Description: {% if column.description %}
- {{column.description|default:''|markdown:3|truncatechars_html:300}} + {{column.description|default:''|markdown:3}}
{% else %}

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