From 4c4ad0937fa64e7c5f309445712e95c4926b9f81 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Wed, 14 May 2025 18:05:25 +0100 Subject: [PATCH 1/9] Add JS for responsive tables in long text fields --- js/responsive-tables.js | 35 +++++++++++++++++++++++++++++++++++ localgov_base.libraries.yml | 8 ++++++++ 2 files changed, 43 insertions(+) create mode 100644 js/responsive-tables.js diff --git a/js/responsive-tables.js b/js/responsive-tables.js new file mode 100644 index 00000000..f83ed9f3 --- /dev/null +++ b/js/responsive-tables.js @@ -0,0 +1,35 @@ +/** + * @file JS file for the responsive tables component. + */ + +(function responsiveTablesScript(Drupal, once) { + Drupal.behaviors.responsiveTables = { + attach(context) { + const tables = []; + const tablesInTextWithSummaryFields = once( + 'allResponsiveTables', + '.field--type-text-with-summary table', + context, + ); + const tablesInTextLongFields = once( + 'responsiveTables', + '.field--type-text-long table', + context, + ); + + // Push all tables into the tables array. + tables.push(...tablesInTextWithSummaryFields); + tables.push(...tablesInTextLongFields); + tables.forEach((table) => { + // Clone the table to avoid modifying the original. + const clonedTable = table.cloneNode(true); + // Add a div around the cloned table. + const wrapper = document.createElement('div'); + wrapper.classList.add('lgd-responsive-table'); + wrapper.appendChild(clonedTable); + // Replace the original table with the wrapper. + table.parentNode.replaceChild(wrapper, table); + }); + }, + }; +})(Drupal, once); diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml index 8edbe080..f2732a90 100644 --- a/localgov_base.libraries.yml +++ b/localgov_base.libraries.yml @@ -23,6 +23,7 @@ global: - localgov_base/callout - localgov_base/secondary-menu - localgov_base/wysiwyg-styles + - localgov_base/responsive-tables grid: css: @@ -363,3 +364,10 @@ accordion: css: theme: css/components/accordion.css: {} + +responsive-tables: + js: + js/responsive-tables.js: {} + dependencies: + - core/drupal + - core/once From c02daaeef24a1485434acb84df1721c37f661577 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Wed, 14 May 2025 18:07:51 +0100 Subject: [PATCH 2/9] Add CSS --- css/components/responsive-tables.css | 3 +++ localgov_base.libraries.yml | 3 +++ 2 files changed, 6 insertions(+) create mode 100644 css/components/responsive-tables.css diff --git a/css/components/responsive-tables.css b/css/components/responsive-tables.css new file mode 100644 index 00000000..a97823a0 --- /dev/null +++ b/css/components/responsive-tables.css @@ -0,0 +1,3 @@ +.lgd-responsive-table { + overflow-y: auto; +} diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml index f2732a90..f4376b08 100644 --- a/localgov_base.libraries.yml +++ b/localgov_base.libraries.yml @@ -366,6 +366,9 @@ accordion: css/components/accordion.css: {} responsive-tables: + css: + theme: + css/components/responsive-tables.css: {} js: js/responsive-tables.js: {} dependencies: From 77ef640e40ef3c4cef8d26a841390b36d75be33a Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Thu, 15 May 2025 18:38:37 +0100 Subject: [PATCH 3/9] Add theme setting for responsive tables --- config/install/localgov_base.settings.yml | 1 + config/schema/localgov_base.schema.yml | 5 +++++ localgov_base.libraries.yml | 1 - localgov_base.theme | 15 +++++++++++++++ 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/config/install/localgov_base.settings.yml b/config/install/localgov_base.settings.yml index 735191d1..f8942bb3 100644 --- a/config/install/localgov_base.settings.yml +++ b/config/install/localgov_base.settings.yml @@ -7,3 +7,4 @@ localgov_base_header_behaviour: 'default' localgov_base_localgov_guides_stacked_heading: FALSE localgov_base_localgov_guides_vertical_navigation: TRUE localgov_base_mobile_breakpoint_js: '768' +localgov_base_responsive_wysiwyg_tables: TRUE diff --git a/config/schema/localgov_base.schema.yml b/config/schema/localgov_base.schema.yml index 0cc12eb2..530c92bc 100644 --- a/config/schema/localgov_base.schema.yml +++ b/config/schema/localgov_base.schema.yml @@ -36,3 +36,8 @@ localgov_base.settings: label: 'Mobile breakpoint for JS' description: 'The mobile breakpoint for JS. This is used to determine when to apply mobile styles.' default_value: '768' + localgov_base_responsive_wysiwyg_tables: + type: boolean + label: 'Responsive WYSIWYG tables' + description: 'Choose whether to make WYSIWYG tables responsive or not.' + default_value: TRUE diff --git a/localgov_base.libraries.yml b/localgov_base.libraries.yml index f4376b08..5bc30c91 100644 --- a/localgov_base.libraries.yml +++ b/localgov_base.libraries.yml @@ -23,7 +23,6 @@ global: - localgov_base/callout - localgov_base/secondary-menu - localgov_base/wysiwyg-styles - - localgov_base/responsive-tables grid: css: diff --git a/localgov_base.theme b/localgov_base.theme index 202ad760..ab591047 100644 --- a/localgov_base.theme +++ b/localgov_base.theme @@ -99,6 +99,14 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa ], ]; + $form['localgov_base_responsive_wysiwyg_tables'] = [ + '#type' => 'checkbox', + '#title' => t('Make WYSIWYG tables responsive.'), + '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables'), + '#description' => t('Places tables inserted via WYSIWYG into a responsive container, so they can scroll horizontally on small screens.'), + '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables') ? theme_get_setting('localgov_base_responsive_wysiwyg_tables') : FALSE, + ]; + $form['#validate'][] = 'localgov_base_theme_settings_validate'; } @@ -147,6 +155,13 @@ function localgov_base_preprocess_html(&$variables): void { } } } + + // Add the 'localgov_base_responsive_wysiwyg_tables' value to drupalSettings. + if (!empty(theme_get_setting('localgov_base_responsive_wysiwyg_tables'))) { + if (theme_get_setting('localgov_base_responsive_wysiwyg_tables') === TRUE || 1) { + $variables['#attached']['library'][] = 'localgov_base/responsive-tables'; + } + } } /** From d5f13203de682ec2b358e566aa30017422c77915 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Tue, 15 Oct 2024 11:27:11 +0100 Subject: [PATCH 4/9] adds support for facet forms --- css/components/form-items.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/css/components/form-items.css b/css/components/form-items.css index 54b5187d..b9bdca88 100644 --- a/css/components/form-items.css +++ b/css/components/form-items.css @@ -380,3 +380,21 @@ input[type="file"]:hover, gap: var(--spacing); align-items: center; } + +.facets-form fieldset { + padding: 0; + border: none; +} + +.facets-form .facets-widget > ul, +.facets-form .facets-widget > ul ul { + list-style: none; + padding: 0; +} + +.facets-form .form-actions { + display: flex; + flex-wrap: wrap; + gap: var(--spacing); + align-items: center; +} From 5f4a8dffca70754b15d32bcaad17e1d694d76711 Mon Sep 17 00:00:00 2001 From: Mark Conroy Date: Tue, 15 Oct 2024 12:06:07 +0100 Subject: [PATCH 5/9] adds more space between items --- css/components/form-items.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/components/form-items.css b/css/components/form-items.css index b9bdca88..3dfe8293 100644 --- a/css/components/form-items.css +++ b/css/components/form-items.css @@ -392,6 +392,10 @@ input[type="file"]:hover, padding: 0; } +.facets-form .facets-widget > ul > li + li { + margin-block-start: var(--spacing-largest); +} + .facets-form .form-actions { display: flex; flex-wrap: wrap; From a51c95281e07c469282734eee8e0f5e3d5ba3e63 Mon Sep 17 00:00:00 2001 From: Finn Date: Thu, 29 May 2025 16:09:11 +0100 Subject: [PATCH 6/9] Revert "Update .lgd-row classes to use CSS grid (#778)" This reverts commit ffa1c45f8da710a169ab71d9ea85cd672a84b16b. --- css/layout/grid.css | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/css/layout/grid.css b/css/layout/grid.css index 08f066ad..e9020298 100644 --- a/css/layout/grid.css +++ b/css/layout/grid.css @@ -17,11 +17,9 @@ - .lgd-row--thirds - direct descendants are all 33% each - .lgd-row--quarters - direct descendants are all 25% each */ - .lgd-row { - display: grid; - gap: var(--grid-column-spacing); - grid-template-columns: repeat(12, 1fr); + display: flex; + flex-wrap: wrap; } .lgd-row--centered { @@ -32,6 +30,10 @@ align-items: center; } +.lgd-row > * { + margin-inline: calc(var(--grid-column-spacing) / 2); +} + .lgd-row__one-quarter, .lgd-row--quarters > *, .lgd-row__one-third, @@ -41,8 +43,7 @@ .lgd-row__two-thirds, .lgd-row__three-quarters, .lgd-row__full { - grid-column: span 12; - width: 100%; + width: calc(100% - var(--grid-column-spacing)); } @media screen and (min-width: 48rem) { @@ -54,26 +55,27 @@ .lgd-row--halves > *, .lgd-row__two-thirds, .lgd-row__three-quarters { - grid-column: span 6; + width: calc(50% - var(--grid-column-spacing)); } } @media screen and (min-width: 60rem) { .lgd-row__one-quarter, .lgd-row--quarters > * { - grid-column: span 3; + width: calc(25% - var(--grid-column-spacing)); } .lgd-row__one-third, .lgd-row--thirds > * { - grid-column: span 4; + width: calc((100% / 3) - var(--grid-column-spacing)); } .lgd-row__two-thirds { - grid-column: span 8; + width: calc((100% / 3 * 2) - var(--grid-column-spacing)); } + .lgd-row__three-quarters { - grid-column: span 9; + width: calc(75% - var(--grid-column-spacing)); } } From 9426dacef1b2966b1b2dc7cbdb5ecb4d28d11c90 Mon Sep 17 00:00:00 2001 From: Finn Date: Thu, 29 May 2025 16:18:43 +0100 Subject: [PATCH 7/9] Revert "adds more space between items" This reverts commit 5f4a8dffca70754b15d32bcaad17e1d694d76711. --- css/components/form-items.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/css/components/form-items.css b/css/components/form-items.css index 3dfe8293..b9bdca88 100644 --- a/css/components/form-items.css +++ b/css/components/form-items.css @@ -392,10 +392,6 @@ input[type="file"]:hover, padding: 0; } -.facets-form .facets-widget > ul > li + li { - margin-block-start: var(--spacing-largest); -} - .facets-form .form-actions { display: flex; flex-wrap: wrap; From d95ec801346e9ffb44a01242f5f9b4e5f5d0be8a Mon Sep 17 00:00:00 2001 From: Finn Date: Thu, 29 May 2025 16:20:02 +0100 Subject: [PATCH 8/9] Revert "adds support for facet forms" This reverts commit d5f13203de682ec2b358e566aa30017422c77915. --- css/components/form-items.css | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/css/components/form-items.css b/css/components/form-items.css index b9bdca88..54b5187d 100644 --- a/css/components/form-items.css +++ b/css/components/form-items.css @@ -380,21 +380,3 @@ input[type="file"]:hover, gap: var(--spacing); align-items: center; } - -.facets-form fieldset { - padding: 0; - border: none; -} - -.facets-form .facets-widget > ul, -.facets-form .facets-widget > ul ul { - list-style: none; - padding: 0; -} - -.facets-form .form-actions { - display: flex; - flex-wrap: wrap; - gap: var(--spacing); - align-items: center; -} From f618f1ef989ee64bdb8dfa765024088c51528b18 Mon Sep 17 00:00:00 2001 From: Tony Barker <4941711+tonypaulbarker@users.noreply.github.com> Date: Mon, 9 Jun 2025 17:51:44 +0100 Subject: [PATCH 9/9] Remove repeated #default_value code of wysiwyg tables form --- localgov_base.theme | 1 - 1 file changed, 1 deletion(-) diff --git a/localgov_base.theme b/localgov_base.theme index ab591047..445a0e06 100644 --- a/localgov_base.theme +++ b/localgov_base.theme @@ -102,7 +102,6 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa $form['localgov_base_responsive_wysiwyg_tables'] = [ '#type' => 'checkbox', '#title' => t('Make WYSIWYG tables responsive.'), - '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables'), '#description' => t('Places tables inserted via WYSIWYG into a responsive container, so they can scroll horizontally on small screens.'), '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables') ? theme_get_setting('localgov_base_responsive_wysiwyg_tables') : FALSE, ];