Change layout of 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. This is part of a live test of several incremental changes being made to the homepage.
alphagov · Sep 11, 2023 · ab3f8f1 · ab3f8f1
1 parent 55d69d5
commit ab3f8f1
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 168 deletions.
diff --git 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,21 @@
   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);
 }
 
 .homepage-section--services-and-info {
   padding: govuk-spacing(6) 0 0;
+
+  @include govuk-media-query($from: "desktop") {
+    padding-right: 32px;
+  }
 }
 
 .homepage-section__heading {
@@ -245,6 +234,10 @@
   padding: govuk-spacing(3) 0 0;
 }
 
+.homepage-section__container {
+  padding-right: 32px;
+}
+
 .homepage-section__heading-wrapper {
   margin-bottom: govuk-spacing(1);
 
@@ -277,19 +270,21 @@
     padding-bottom: 0;
   }
 
-  & > li {
+  & > div li {
     margin-bottom: govuk-spacing(4);
 
     @include govuk-media-query($from: "desktop") {
-      margin-bottom: govuk-spacing(3);
+      margin-bottom: govuk-spacing(6);
+      padding-right: govuk-spacing(4);
     }
   }
 
-  & > li:last-child {
+  & > div:last-child li:last-child {
     margin-bottom: 0;
   }
 }
 
-.homepage-most-viewed-list__item {
+.homepage-most-viewed-list__item-link {
+  padding-right: govuk-spacing(8);
   @include govuk-font($size: 19, $weight: "bold");
 }
diff --git a/app/views/homepage/_government_activity.html.erb b/app/views/homepage/_government_activity.html.erb
@@ -1,110 +1,111 @@
 <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="homepage-section__heading">
-        <div class="homepage-section__heading-wrapper">
+      <div class="homepage-section__container">
+        <div class="homepage-section__heading">
+          <div class="homepage-section__heading-wrapper">
+            <%= render "govuk_publishing_components/components/heading", {
+              font_size: "m",
+              text: t("homepage.index.government_activity"),
+              data_attributes: {
+                ga4_scroll_marker: true,
+              },
+            } %>
+          </div>
+
+          <%= render "govuk_publishing_components/components/lead_paragraph", {
+            text: t("homepage.index.government_activity_description"),
+            margin_bottom: 0
+          } %>
+        </div>
+
+        <ul class="homepage-services-and-info__list">
+          <% t("homepage.government_activity").each_with_index do | item, index | %>
+            <%= render partial: "homepage/chevron_card", locals: {
+              description: item[:description],
+              link: item[:link],
+              title: item[:title],
+              track_action: "governmentactivityLink",
+              index_values: {
+                index_section: 3,
+                index_link: index + 1,
+                index_section_count: 6,
+              },
+              index_total: t("homepage.government_activity").length,
+              section: t("homepage.index.government_activity", locale: :en)
+            } %>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+      <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
+        <div class="homepage-section__heading">
           <%= render "govuk_publishing_components/components/heading", {
             font_size: "m",
-            text: t("homepage.index.government_activity"),
+            text: t("homepage.index.departments_and_organisations"),
             data_attributes: {
               ga4_scroll_marker: true,
             },
           } %>
         </div>
 
-        <%= render "govuk_publishing_components/components/lead_paragraph", {
-          text: t("homepage.index.government_activity_description"),
-          margin_bottom: 0
-        } %>
-      </div>
-
-      <ul class="homepage-services-and-info__list">
-        <% t("homepage.government_activity").each_with_index do | item, index | %>
-          <%= render partial: "homepage/chevron_card", locals: {
-            description: item[:description],
-            link: item[:link],
-            title: item[:title],
-            track_action: "governmentactivityLink",
-            index_values: {
-              index_section: 3,
-              index_link: index + 1,
-              index_section_count: 6,
+        <%#
+          The "big number" component links below are hardcoded separately (i.e. not in a loop in this instance) and therefore their 'index' properties are also hardcoded. If a new "big number" component is added or removed, this will need to be reflected in the 'index_link' and 'index_total' properties to ensure that they remain accurate for tracking/analytics purposes.
+        %>     
+        <div class="homepage-section__depts" data-module="gem-track-click ga4-link-tracker">
+          <%= render "govuk_publishing_components/components/big_number", {
+            number: t("homepage.index.ministerial_departments_count"),
+            label: t("homepage.index.ministerial_departments"),
+            href: "/government/organisations#ministerial_departments",
+            margin_bottom: 6,
+            data_attributes: {
+              "track-category": "homepageClicked",
+              "track-action": "departmentsLink",
+              "track-label": "/government/organisations#ministerial_departments",
+              "track-dimension": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments")}",
+              "track-dimension-index": 29,
+              "track-value": 1,
+              "ga4_link": {
+                "event_name": "navigation",
+                "type": "homepage",
+                "index": {
+                  "index_section": 4,
+                  "index_link": 1,
+                  "index_section_count": 6,
+                },
+                "index_total": 2,
+                "section": t("homepage.index.departments_and_organisations", locale: :en),
+                "text": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments", locale: :en)}"
+              }
             },
-            index_total: t("homepage.government_activity").length,
-            section: t("homepage.index.government_activity", locale: :en)
           } %>
-        <% end %>
-      </ul>
-    </div>
-
-    <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop">
-      <div class="homepage-section__heading">
-        <%= render "govuk_publishing_components/components/heading", {
-          font_size: "m",
-          text: t("homepage.index.departments_and_organisations"),
-          data_attributes: {
-            ga4_scroll_marker: true,
-          },
-        } %>
-      </div>
-
-      <%#
-        The "big number" component links below are hardcoded separately (i.e. not in a loop in this instance) and therefore their 'index' properties are also hardcoded. If a new "big number" component is added or removed, this will need to be reflected in the 'index_link' and 'index_total' properties to ensure that they remain accurate for tracking/analytics purposes.
-      %>     
-      <div class="homepage-section__depts" data-module="gem-track-click ga4-link-tracker">
-        <%= render "govuk_publishing_components/components/big_number", {
-          number: t("homepage.index.ministerial_departments_count"),
-          label: t("homepage.index.ministerial_departments"),
-          href: "/government/organisations#ministerial_departments",
-          margin_bottom: 6,
-          data_attributes: {
-            "track-category": "homepageClicked",
-            "track-action": "departmentsLink",
-            "track-label": "/government/organisations#ministerial_departments",
-            "track-dimension": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments")}",
-            "track-dimension-index": 29,
-            "track-value": 1,
-            "ga4_link": {
-              "event_name": "navigation",
-              "type": "homepage",
-              "index": {
-                "index_section": 4,
-                "index_link": 1,
-                "index_section_count": 6,
-              },
-              "index_total": 2,
-              "section": t("homepage.index.departments_and_organisations", locale: :en),
-              "text": "#{t("homepage.index.ministerial_departments_count")} #{t("homepage.index.ministerial_departments", locale: :en)}"
-            }
-          },
-        } %>
-        <%= render "govuk_publishing_components/components/big_number", {
-          number: t("homepage.index.other_agencies_count"),
-          label: t("homepage.index.other_agencies"),
-          href: "/government/organisations#agencies_and_other_public_bodies",
-          margin_bottom: 6,
-          data_attributes: {
-            "track-category": "homepageClicked",
-            "track-action": "departmentsLink",
-            "track-label": "/government/organisations#agencies_and_other_public_bodies",
-            "track-dimension": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies")}",
-            "track-dimension-index": 29,
-            "track-value": 1,
-            "ga4_link": {
-              "event_name": "navigation",
-              "type": "homepage",
-              "index": {
-                "index_section": 4,
-                "index_link": 2,
-                "index_section_count": 6,
-              },
-              "index_total": 2,
-              "section": t("homepage.index.departments_and_organisations", locale: :en),
-              "text": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies", locale: :en)}"
-            }
-          },
-        } %>
-      </div>
-    </div>
+          <%= render "govuk_publishing_components/components/big_number", {
+            number: t("homepage.index.other_agencies_count"),
+            label: t("homepage.index.other_agencies"),
+            href: "/government/organisations#agencies_and_other_public_bodies",
+            margin_bottom: 6,
+            data_attributes: {
+              "track-category": "homepageClicked",
+              "track-action": "departmentsLink",
+              "track-label": "/government/organisations#agencies_and_other_public_bodies",
+              "track-dimension": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies")}",
+              "track-dimension-index": 29,
+              "track-value": 1,
+              "ga4_link": {
+                "event_name": "navigation",
+                "type": "homepage",
+                "index": {
+                  "index_section": 4,
+                  "index_link": 2,
+                  "index_section_count": 6,
+                },
+                "index_total": 2,
+                "section": t("homepage.index.departments_and_organisations", locale: :en),
+                "text": "#{t("homepage.index.other_agencies_count")} #{t("homepage.index.other_agencies", locale: :en)}"
+              }
+            },
+          } %>
+        </div>        
+      </div>    
   </div>
 </section>