diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss index a0a00ee3dc..a7f9f628a1 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,13 +209,60 @@ padding: govuk-spacing(4) 0 govuk-spacing(6); } +.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 { + @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 { 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 { padding: govuk-spacing(6) 0 0; + + @include govuk-media-query($from: "desktop") { + padding-right: govuk-spacing(4); + } } .homepage-section__heading { @@ -270,26 +298,47 @@ .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-template-columns: fractions(1); + + @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); - & > li { - margin-bottom: govuk-spacing(4); + // For browsers that don't support CSS grid, constrain the width to 50% to improve usability + // especially for screen magnifier users + width: 50%; - @include govuk-media-query($from: "desktop") { - margin-bottom: govuk-spacing(3); + // Reset the width for browsers that support CSS grid + @supports (display: grid) { + width: initial; } } +} - & > li:last-child { - margin-bottom: 0; +.homepage-most-viewed-list__item { + // 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; + + &:last-of-type { + padding-bottom: 0; } } -.homepage-most-viewed-list__item { +.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" %>