Merge pull request #3743 from alphagov/change-layout-of-homepage

Change layout of homepage

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);
+  }
+}

app/views/homepage/_body.html.erb

@@ -0,0 +1,10 @@
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop">
+    <%= render "homepage/services_and_information" %>
+  </div>
+  <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+    <%= render "homepage/promotion-slots" %>
+  </div>
+</div>
+<%= render "homepage/government_activity" %>
+<%= render "homepage/more_on_govuk" %>

app/views/homepage/_government_activity.html.erb

@@ -1,6 +1,6 @@
-<section class="homepage-section homepage-section__government-activity">
-  <div class="govuk-grid-row">
-    <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop" data-module="gem-track-click ga4-link-tracker">
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full govuk-grid-column-two-thirds-from-desktop" data-module="gem-track-click ga4-link-tracker">
+    <section class="homepage-section homepage-section__government-activity">
       <div class="homepage-section__heading">
         <div class="homepage-section__heading-wrapper">
           <%= render "govuk_publishing_components/components/heading", {
@@ -35,9 +35,11 @@
           } %>
         <% end %>
       </ul>
-    </div>
+    </section>
+  </div>
 
-    <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+  <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+    <section class="homepage-section homepage-section__departments-organisations">
       <div class="homepage-section__heading">
         <%= render "govuk_publishing_components/components/heading", {
           font_size: "m",
@@ -105,6 +107,6 @@
           },
         } %>
       </div>
-    </div>
+    </section>
   </div>
-</section>
+</div>

app/views/homepage/_head.html.erb

@@ -0,0 +1,2 @@
+<%= render "homepage/inverse_header" %>
+<%= render "homepage/links_and_search" %>

app/views/homepage/_links_and_search.html.erb

@@ -32,7 +32,7 @@
       </div>
     </div>
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-half homepage-popular">
+      <div class="govuk-grid-column-full homepage-popular">
         <%= render "govuk_publishing_components/components/heading", {
           font_size: "m",
           margin_bottom: 4,
@@ -43,9 +43,9 @@
         } %>
         <ul class="homepage-most-viewed-list" data-module="gem-track-click ga4-link-tracker">
           <% t("homepage.index.popular_links").each_with_index do | item, index | %>
-            <li>
+            <li class="homepage-most-viewed-list__item">
               <%= 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 @@
       </div>
     </div>
   </div>
-</section>
+</section>

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
 %>
 
-<section class="homepage-section">
-  <div class="homepage-section__heading">
+<section class="homepage-section homepage-section--promotion-slots">
     <%= render "govuk_publishing_components/components/heading", {
       text: t("homepage.index.featured"),
       font_size: "m",
+      margin_bottom: 6,
       data_attributes: {
         ga4_scroll_marker: true,
       },
     } %>
-  </div>
 
-  <div class="govuk-grid-row">
     <% t("homepage.index.promotion_slots").each_with_index do | item, index | %>
-      <div class="govuk-grid-column-one-third">
         <%= 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
         } %>
-      </div>
     <% end %>
-  </div>
 </section>

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" %>
 
   <div class="govuk-width-container">
-    <%= render "homepage/services_and_information" %>
-    <%= render "homepage/promotion-slots" %>
-    <%= render "homepage/government_activity" %>
-    <%= render "homepage/more_on_govuk" %>
+    <%= render "homepage/body" %>
   </div>
 </main>