From a95c4dc17d2e3c7c258f0b1510a91752b9e9e911 Mon Sep 17 00:00:00 2001 From: Patrick Cartlidge Date: Fri, 1 Sep 2023 11:21:03 +0100 Subject: [PATCH 1/6] Change layout of homepage This is part of a live test of several incremental changes being made to the homepage. - Services and information and Featured sections are now in a grid layout. - Font size of the header of the promotion slot cards has been changed to 's', the same size as those in the Services and information section. - Use the new image-card two thirds variation for promotion slots - Change Popular on GOV.UK links to a 3 column grid layout --- app/assets/stylesheets/views/_homepage.scss | 56 +++++++++---------- app/views/homepage/_body.html.erb | 10 ++++ .../homepage/_government_activity.html.erb | 16 +++--- app/views/homepage/_head.html.erb | 2 + app/views/homepage/_links_and_search.html.erb | 8 +-- app/views/homepage/_promotion-slots.html.erb | 12 ++-- app/views/homepage/index.html.erb | 9 +-- 7 files changed, 58 insertions(+), 55 deletions(-) create mode 100644 app/views/homepage/_body.html.erb create mode 100644 app/views/homepage/_head.html.erb diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss index a0a00ee3dc..797c698f3f 100644 --- a/app/assets/stylesheets/views/_homepage.scss +++ b/app/assets/stylesheets/views/_homepage.scss @@ -145,28 +145,9 @@ } .homepage-services-and-info__list { - @include columns($items: 16, $columns: 1, $selector: "li"); list-style: none; margin: 0 govuk-spacing(-3); padding: 0; - - @include govuk-media-query($from: "tablet") { - @include columns($items: 16, $columns: 2, $selector: "li"); - } - - @include govuk-media-query($from: "desktop") { - @include columns($items: 16, $columns: 3, $selector: "li"); - } - - .homepage-section__government-activity & { - @include columns($items: 6, $columns: 1, $selector: "li"); - margin-bottom: govuk-spacing(4); - - @include govuk-media-query($from: "tablet") { - @include columns($items: 6, $columns: 2, $selector: "li"); - margin-bottom: 0; - } - } } .chevron-card { @@ -181,7 +162,7 @@ } .chevron-card__description { - margin: 0 govuk-spacing(-6) 0 0; + margin: 0 govuk-spacing(6) 0 0; } .chevron-card__link { @@ -206,7 +187,7 @@ height: $dimension; position: absolute; right: govuk-spacing(1); - top: govuk-spacing(3); + top: 50%; @include prefixed-transform($rotate: 45deg); width: $dimension; } @@ -228,6 +209,10 @@ padding: govuk-spacing(4) 0 govuk-spacing(6); } +.homepage-section--promotion-slots { + padding-top: govuk-spacing(6); +} + .homepage-section--links-and-search { background: govuk-colour("light-grey"); padding: govuk-spacing(6) 0 govuk-spacing(8); @@ -235,6 +220,10 @@ .homepage-section--services-and-info { padding: govuk-spacing(6) 0 0; + + @include govuk-media-query($from: "desktop") { + padding-right: govuk-spacing(4); + } } .homepage-section__heading { @@ -277,19 +266,26 @@ padding-bottom: 0; } - & > li { - margin-bottom: govuk-spacing(4); - - @include govuk-media-query($from: "desktop") { - margin-bottom: govuk-spacing(3); - } - } - - & > li:last-child { + & > div:last-child li:last-child { margin-bottom: 0; } } .homepage-most-viewed-list__item { + margin-bottom: govuk-spacing(4); + + @include govuk-media-query($from: "desktop") { + margin-bottom: govuk-spacing(6); + padding-right: govuk-spacing(8); + } +} + +.homepage-most-viewed-list__item-link { @include govuk-font($size: 19, $weight: "bold"); } + +.homepage-section__government-activity { + @include govuk-media-query($from: "desktop") { + padding-right: govuk-spacing(4); + } +} diff --git a/app/views/homepage/_body.html.erb b/app/views/homepage/_body.html.erb new file mode 100644 index 0000000000..fe06eb4260 --- /dev/null +++ b/app/views/homepage/_body.html.erb @@ -0,0 +1,10 @@ +
+
+ <%= render "homepage/services_and_information" %> +
+
+ <%= render "homepage/promotion-slots" %> +
+
+<%= render "homepage/government_activity" %> +<%= render "homepage/more_on_govuk" %> diff --git a/app/views/homepage/_government_activity.html.erb b/app/views/homepage/_government_activity.html.erb index 126209b225..c561674df2 100644 --- a/app/views/homepage/_government_activity.html.erb +++ b/app/views/homepage/_government_activity.html.erb @@ -1,6 +1,6 @@ -
-
-
+
+
+
<%= render "govuk_publishing_components/components/heading", { @@ -35,9 +35,11 @@ } %> <% end %> -
+
+
-
+
+
<%= render "govuk_publishing_components/components/heading", { font_size: "m", @@ -105,6 +107,6 @@ }, } %>
-
+
- + diff --git a/app/views/homepage/_head.html.erb b/app/views/homepage/_head.html.erb new file mode 100644 index 0000000000..4766e5e2a4 --- /dev/null +++ b/app/views/homepage/_head.html.erb @@ -0,0 +1,2 @@ +<%= render "homepage/inverse_header" %> +<%= render "homepage/links_and_search" %> diff --git a/app/views/homepage/_links_and_search.html.erb b/app/views/homepage/_links_and_search.html.erb index 862e7c1d90..ad0ea6723a 100644 --- a/app/views/homepage/_links_and_search.html.erb +++ b/app/views/homepage/_links_and_search.html.erb @@ -32,7 +32,7 @@
-
+
<%= render "govuk_publishing_components/components/heading", { font_size: "m", margin_bottom: 4, @@ -43,9 +43,9 @@ } %>
    <% t("homepage.index.popular_links").each_with_index do | item, index | %> -
  • +
  • <%= link_to(item[:text], item[:href], { - class: "govuk-link homepage-most-viewed-list__item", + class: "govuk-link homepage-most-viewed-list__item-link", data: { track_category: "homepageClicked", track_action: "popularLink", @@ -72,4 +72,4 @@
- \ No newline at end of file + diff --git a/app/views/homepage/_promotion-slots.html.erb b/app/views/homepage/_promotion-slots.html.erb index bb6bd20b27..0931369821 100644 --- a/app/views/homepage/_promotion-slots.html.erb +++ b/app/views/homepage/_promotion-slots.html.erb @@ -3,20 +3,17 @@ See: https://docs.publishing.service.gov.uk/repos/frontend/update-homepage-promotion-slots.html %> -
-
+
<%= render "govuk_publishing_components/components/heading", { text: t("homepage.index.featured"), font_size: "m", + margin_bottom: 6, data_attributes: { ga4_scroll_marker: true, }, } %> -
-
<% t("homepage.index.promotion_slots").each_with_index do | item, index | %> -
<%= render "govuk_publishing_components/components/image_card", { href: item[:href], href_data_attributes: { @@ -43,12 +40,11 @@ image_loading: "lazy", heading_level: 3, heading_text: item[:title], + two_thirds: true, description: item[:text], - font_size: "m", + font_size: "s", sizes: "(max-width: 640px) 100vw, (max-width: 1020px) 33vw, 300px", srcset: item.fetch(:srcset, {}).stringify_keys.transform_keys { |k| image_path(k) }.presence } %> -
<% end %> -
diff --git a/app/views/homepage/index.html.erb b/app/views/homepage/index.html.erb index 7ac80a4e15..b86e8b2cc1 100644 --- a/app/views/homepage/index.html.erb +++ b/app/views/homepage/index.html.erb @@ -13,13 +13,10 @@ <%# The GA4 tracking on the homepage depends on some hardcoded values for index. If a section is added or removed, these values will need to be updated. Specifically 'index_section_count' (the total number of sections) and potentially 'index_section' (the index of the section e.g. 2 for the 2nd second). %> - <%= render "homepage/inverse_header" %> - <%= render "homepage/links_and_search" %> + + <%= render "homepage/head" %>
- <%= render "homepage/services_and_information" %> - <%= render "homepage/promotion-slots" %> - <%= render "homepage/government_activity" %> - <%= render "homepage/more_on_govuk" %> + <%= render "homepage/body" %>
From 9ea065d54a2cda679aa47cc0814562d390a5dea7 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Thu, 21 Sep 2023 15:18:47 +0100 Subject: [PATCH 2/6] Remove top border from image-card --- app/assets/stylesheets/views/_homepage.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss index 797c698f3f..43a3abd0ed 100644 --- a/app/assets/stylesheets/views/_homepage.scss +++ b/app/assets/stylesheets/views/_homepage.scss @@ -289,3 +289,10 @@ padding-right: govuk-spacing(4); } } + +// temp override to remove the top border, +// will need to update the image-card component in the gem +// this can then be removed +.homepage-section--promotion-slots .gem-c-image-card__image { + border-top: none; +} From 42ccdc7c364955409b1e581cb093860baa8c0504 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Thu, 21 Sep 2023 15:34:37 +0100 Subject: [PATCH 3/6] Copy CSS grid from gem cards to popular links The CSS is used for the grid is taken from the `cards` component. --- app/assets/stylesheets/views/_homepage.scss | 35 ++++++++++++++------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss index 43a3abd0ed..2785b46493 100644 --- a/app/assets/stylesheets/views/_homepage.scss +++ b/app/assets/stylesheets/views/_homepage.scss @@ -259,25 +259,36 @@ .homepage-most-viewed-list { list-style: none; - margin: 0; padding: 0; + // Remove the outermost left and right margin from the internal margin of the list items. + margin: 0 govuk-spacing(-3); - @include govuk-media-query($from: "tablet") { - padding-bottom: 0; - } + display: grid; + grid-auto-flow: row; // Use CSS grid to calculate the number of rows + grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid + grid-template-columns: fractions(1); - & > div:last-child li:last-child { - margin-bottom: 0; + @include govuk-media-query($from: "desktop") { + // Note that browsers that don't support CSS grid display the component as one column on all + // breakpoints + grid-template-columns: fractions(3); + + // For browsers that don't support CSS grid, constrain the width to 50% to improve usability + // especially for screen magnifier users + width: 50%; + + // Reset the width for browsers that support CSS grid + @supports (display: grid) { + width: initial; + } } } .homepage-most-viewed-list__item { - margin-bottom: govuk-spacing(4); - - @include govuk-media-query($from: "desktop") { - margin-bottom: govuk-spacing(6); - padding-right: govuk-spacing(8); - } + // We use grid to split the container into column widths, so manage the horizontal spacing with + // internal margins. + margin: 0 govuk-spacing(3); + padding: 0 govuk-spacing(4) govuk-spacing(4) 0; } .homepage-most-viewed-list__item-link { From 17d2335eb88313fd4088263cc7cb121db73a7e76 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Fri, 22 Sep 2023 10:07:44 +0100 Subject: [PATCH 4/6] Fix spacing issue on popular links - Ensures that the total padding-bottom on desktop underneath Popular links is 50px (30px + 20px from the popular links) - Removed grid-auto-rows: fraction(1) as it is not required --- app/assets/stylesheets/views/_homepage.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss index 2785b46493..e63620eead 100644 --- a/app/assets/stylesheets/views/_homepage.scss +++ b/app/assets/stylesheets/views/_homepage.scss @@ -216,6 +216,10 @@ .homepage-section--links-and-search { background: govuk-colour("light-grey"); padding: govuk-spacing(6) 0 govuk-spacing(8); + + @include govuk-media-query($from: "desktop") { + padding-bottom: govuk-spacing(6); + } } .homepage-section--services-and-info { @@ -265,7 +269,6 @@ display: grid; grid-auto-flow: row; // Use CSS grid to calculate the number of rows - grid-auto-rows: fractions(1); // Set all rows to same fractional height of the complete grid grid-template-columns: fractions(1); @include govuk-media-query($from: "desktop") { @@ -289,6 +292,10 @@ // internal margins. margin: 0 govuk-spacing(3); padding: 0 govuk-spacing(4) govuk-spacing(4) 0; + + &:last-of-type { + padding-bottom: 0; + } } .homepage-most-viewed-list__item-link { From 5d8bdbde499f9b5b6b0dad4b09c99316ffc18df4 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Fri, 22 Sep 2023 13:42:12 +0100 Subject: [PATCH 5/6] Improve layout of featured cards on small screens Temp style overrides to the image card component from the gem to: - Ensure the space between the image card and the text remains at 15px on mobile, this was previously 30px on mobile. - Ensure the featured image cards have 15px padding to the left and right when this screen width is =< 319px. --- app/assets/stylesheets/views/_homepage.scss | 32 ++++++++++++++++----- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss index e63620eead..33e8bd042f 100644 --- a/app/assets/stylesheets/views/_homepage.scss +++ b/app/assets/stylesheets/views/_homepage.scss @@ -211,6 +211,31 @@ .homepage-section--promotion-slots { padding-top: govuk-spacing(6); + + // temp style overrides, will need to update the image-card component in the gem + // so these can be removed + .gem-c-image-card { + @include govuk-media-query($until: "mobile") { + padding: 0 govuk-spacing(3); + } + } + + // temp style override to ensure image has spacing between the text + .gem-c-image-card__image-wrapper { + @include govuk-media-query($until: "mobile") { + margin-bottom: govuk-spacing(2); + } + } + + // temp override to remove the top border + .gem-c-image-card__image { + border-top: none; + } + + // temp override to reduce white space on mobile between image and text + .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds { + padding-left: 0; + } } .homepage-section--links-and-search { @@ -307,10 +332,3 @@ padding-right: govuk-spacing(4); } } - -// temp override to remove the top border, -// will need to update the image-card component in the gem -// this can then be removed -.homepage-section--promotion-slots .gem-c-image-card__image { - border-top: none; -} From 4363b402e820797bf68edcf87905260fe401ef78 Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Fri, 22 Sep 2023 14:11:13 +0100 Subject: [PATCH 6/6] Ensure the featured heading is styled correctly on mobile --- app/assets/stylesheets/views/_homepage.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss index 33e8bd042f..a7f9f628a1 100644 --- a/app/assets/stylesheets/views/_homepage.scss +++ b/app/assets/stylesheets/views/_homepage.scss @@ -212,6 +212,16 @@ .homepage-section--promotion-slots { padding-top: govuk-spacing(6); + @include govuk-media-query($until: "desktop") { + .gem-c-heading { + border-top-style: solid; + border-top-width: 2px; + border-top-color: $govuk-text-colour; + margin: 0 0 govuk-spacing(6); + padding: govuk-spacing(3) 0 0; + } + } + // temp style overrides, will need to update the image-card component in the gem // so these can be removed .gem-c-image-card {