From 1d3aeab34b30d1214227f1469d4e6e2db60bdbe1 Mon Sep 17 00:00:00 2001 From: Kevin Dew Date: Mon, 9 Dec 2024 15:14:14 +0000 Subject: [PATCH 1/2] Fix indentation on shared/_browse_header component This had an indentation of 3 characters rather than 2. I'm fixing this before making further changes to the file. --- app/views/shared/_browse_header.html.erb | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/views/shared/_browse_header.html.erb b/app/views/shared/_browse_header.html.erb index acf040302..8092631e9 100644 --- a/app/views/shared/_browse_header.html.erb +++ b/app/views/shared/_browse_header.html.erb @@ -1,15 +1,15 @@ <% - two_thirds ||= false - margin_bottom ||= 0 - padding_top ||= false + two_thirds ||= false + margin_bottom ||= 0 + padding_top ||= false - header_wrapper_classes = %w(browse__header-wrapper) - header_wrapper_classes << "govuk-!-margin-bottom-#{margin_bottom}" if !margin_bottom.zero? + header_wrapper_classes = %w(browse__header-wrapper) + header_wrapper_classes << "govuk-!-margin-bottom-#{margin_bottom}" if !margin_bottom.zero? - header_wrapper_classes << "govuk-!-padding-top-#{padding_top}" if padding_top.is_a? Numeric + header_wrapper_classes << "govuk-!-padding-top-#{padding_top}" if padding_top.is_a? Numeric - column_classes = %w() - column_classes << (two_thirds ? "govuk-grid-column-two-thirds" : "govuk-grid-column-full") + column_classes = %w() + column_classes << (two_thirds ? "govuk-grid-column-two-thirds" : "govuk-grid-column-full") %>
From 61087e76e3c6d2cedabc3060b23f0d1e8fee3937 Mon Sep 17 00:00:00 2001 From: Kevin Dew Date: Mon, 9 Dec 2024 17:03:09 +0000 Subject: [PATCH 2/2] Full width version of GOV.UK chat banner on browse pages There is a desire to change the design of the GOV.UK Chat promo on just the mainstream browse pages to be a full width one. This design is intended to last only until 20th December when the banners will be removed so this implementation priorities pace of delivery over reusability. To achieve this full width approach I have put the existing component within a banner and done a couple of style overrides. This does have an undesirable consequence that a change to the component will break this app - however as this is expected to only be around for a matter of days this risk seems tolerable. In removing the other positioning of the banner I have gone to efforts to restore the HTML to how it was before any chat banners were added. --- app/assets/stylesheets/views/_browse.scss | 13 ++++--- app/views/browse/show.html.erb | 15 +++----- .../show_a_to_z.html.erb | 9 +---- .../show_curated.html.erb | 16 ++++----- app/views/shared/_browse_header.html.erb | 34 ++++++++++++++++--- 5 files changed, 47 insertions(+), 40 deletions(-) diff --git a/app/assets/stylesheets/views/_browse.scss b/app/assets/stylesheets/views/_browse.scss index d33c34392..bdb39b022 100644 --- a/app/assets/stylesheets/views/_browse.scss +++ b/app/assets/stylesheets/views/_browse.scss @@ -95,13 +95,12 @@ $browse-header-background-colour: #263135; } .browse__govuk-chat-promo { - @include govuk-media-query($until: "tablet") { - padding-top: govuk-spacing(4); - } -} + background-color: govuk-tint(govuk-colour("blue"), 90%); + padding: govuk-spacing(4) 0; -.browse__govuk-chat-promo--second-level { - @include govuk-media-query($until: "tablet") { - padding-top: 0; + // we're using this component in an unconventional way so need to undo + // basic styling + .gem-c-chat-entry { + padding: 0; } } diff --git a/app/views/browse/show.html.erb b/app/views/browse/show.html.erb index ca1fa5b82..5c29dd094 100644 --- a/app/views/browse/show.html.erb +++ b/app/views/browse/show.html.erb @@ -20,7 +20,10 @@ } %> <% end %> -<%= render "shared/browse_header", { margin_bottom: page.slug == "benefits" ? 7 : 9 } do %> +<%= render "shared/browse_header", { + margin_bottom: page.slug == "benefits" ? 7 : 9, + govuk_chat_promo: show_govuk_chat_promo?(page.base_path), +} do %> <%= render "govuk_publishing_components/components/heading", { text: page.title, inverse: true, @@ -38,7 +41,7 @@
-
"> +
<%= render "govuk_publishing_components/components/heading", { text: t("browse.popular_tasks"), margin_bottom: 6, @@ -52,14 +55,6 @@ <% end %>
- - <% if show_govuk_chat_promo?(page.base_path) %> -
-
- <%= render "govuk_publishing_components/components/chat_entry" %> -
-
- <% end %>
diff --git a/app/views/second_level_browse_page/show_a_to_z.html.erb b/app/views/second_level_browse_page/show_a_to_z.html.erb index 2bd307a9a..195c86418 100644 --- a/app/views/second_level_browse_page/show_a_to_z.html.erb +++ b/app/views/second_level_browse_page/show_a_to_z.html.erb @@ -20,6 +20,7 @@ <%= render "shared/browse_header", { margin_bottom: 8, two_thirds: true, + govuk_chat_promo: show_govuk_chat_promo?(page.base_path), } do %> <%= render "govuk_publishing_components/components/heading", { font_size: "xl", @@ -49,13 +50,5 @@
<% end %>
- - <% if show_govuk_chat_promo?(page.base_path) %> -
-
- <%= render "govuk_publishing_components/components/chat_entry" %> -
-
- <% end %> diff --git a/app/views/second_level_browse_page/show_curated.html.erb b/app/views/second_level_browse_page/show_curated.html.erb index 194dbaae1..9aa562ad1 100644 --- a/app/views/second_level_browse_page/show_curated.html.erb +++ b/app/views/second_level_browse_page/show_curated.html.erb @@ -17,7 +17,11 @@ <%= render "shared/browse_breadcrumbs" %> <% end %> -<%= render "shared/browse_header", { two_thirds: true, margin_bottom: 8 } do %> +<%= render "shared/browse_header", { + two_thirds: true, + margin_bottom: 8, + govuk_chat_promo: show_govuk_chat_promo?(page.base_path), +} do %> <%= render "govuk_publishing_components/components/heading", { font_size: "xl", heading_level: 1, @@ -34,16 +38,8 @@
-
+
<%= render partial: curated_partial, locals: { page: page } %>
- - <% if show_govuk_chat_promo?(page.base_path) %> -
-
- <%= render "govuk_publishing_components/components/chat_entry" %> -
-
- <% end %>
diff --git a/app/views/shared/_browse_header.html.erb b/app/views/shared/_browse_header.html.erb index 8092631e9..237bcd255 100644 --- a/app/views/shared/_browse_header.html.erb +++ b/app/views/shared/_browse_header.html.erb @@ -2,8 +2,9 @@ two_thirds ||= false margin_bottom ||= 0 padding_top ||= false + govuk_chat_promo ||= false - header_wrapper_classes = %w(browse__header-wrapper) + header_wrapper_classes = [] header_wrapper_classes << "govuk-!-margin-bottom-#{margin_bottom}" if !margin_bottom.zero? header_wrapper_classes << "govuk-!-padding-top-#{padding_top}" if padding_top.is_a? Numeric @@ -13,11 +14,34 @@ %>
-
-
-
- <%= yield %> + <%# + .browse__header-wrapper is a separate element to enable the govuk-chat + promo, once this is disabled we can remove this element and add the + ".browse__header-wrapper" class back to the array of header_wrapper_classes + %> +
+
+
+
+ <%= yield %> +
+ + <% if govuk_chat_promo %> +
+
+
+
+ <%= render "govuk_publishing_components/components/chat_entry", { + margin_bottom: 0, + heading_text: "Ask GOV.UK Chat about business and tax", + description_text: "Get quick, tailored answers with GOV.UK’s experimental AI chat", + } %> +
+
+
+
+ <% end %>