Merge pull request #2442 from alphagov/update-government-activity-layout

Update "Government activity" submenu layout
alphagov · Nov 17, 2021 · d163c9e · d163c9e
2 parents 047c213 + 47f91a2
commit d163c9e
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 78 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 * Fix layout glitch seen when scrollbar is permanently visible ([PR #2444](https://github.com/alphagov/govuk_publishing_components/pull/2444 ))
 * Add draggable=false to links disguised as buttons ([PR #2448](https://github.com/alphagov/govuk_publishing_components/pull/2448))
 * Remove summary styling from govspeak ([PR #2447](https://github.com/alphagov/govuk_publishing_components/pull/2447))
+* Update "Government activity" dropdown menu layout ([PR #2442](https://github.com/alphagov/govuk_publishing_components/pull/2442 ))
 
 ## 27.12.0
 

diff --git a/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -284,7 +284,7 @@ $search-width-or-height: $black-bar-height;
     font-size: govuk-px-to-rem(19px);
   }
   font-weight: bold;
-  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
+  margin: govuk-spacing(3) 0;
 
   @include govuk-media-query($from: "desktop") {
     display: block;
@@ -838,29 +838,26 @@ $search-width-or-height: $black-bar-height;
 
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
-  margin: 0 0 0 $chevron-indent-spacing;
-  padding: govuk-spacing(2) 0;
+  box-sizing: border-box;
+  padding: 0 0 govuk-spacing(4) 0;
   position: relative;
-
-  @include govuk-media-query($from: "desktop") {
-    margin: 0;
-    padding: govuk-spacing(2) 0;
-  }
 }
 
 // Navigation menu items.
 .gem-c-layout-super-navigation-header__navigation-second-items {
-  margin: 0 auto;
-  padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
+  margin: 0;
+  padding: govuk-spacing(6) govuk-spacing(4);
+
+  & > li {
+    margin: 0;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin-left: (0 - govuk-spacing(3));
-    margin-right: (0 - govuk-spacing(3));
-    padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(7) 0 govuk-spacing(8) 0;
 
     & > li {
-      box-sizing: border-box;
-      margin: 0 govuk-spacing(3) govuk-spacing(2) govuk-spacing(3);
+      margin: 0 govuk-spacing(3);
     }
   }
 }
@@ -873,61 +870,24 @@ $search-width-or-height: $black-bar-height;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
-  & > li:first-child {
-    margin-bottom: govuk-spacing(7);
-  }
-
   @include govuk-media-query($from: "desktop") {
-    @include columns(7, 2, "li");
+    @include columns(6, 2, "li");
+    @include columns-children(6, 2, "li");
     padding-bottom: 0;
 
-    & > li,
-    & > li:first-child {
-      margin-bottom: govuk-spacing(4);
-    }
-
-    @supports (display: grid) {
-      & > li:first-child {
-        grid-column: span 2;
-      }
-    }
-
-    & > li:first-child {
-      border-bottom: 1px solid $govuk-border-colour;
-      padding-bottom: 0;
-      -ms-grid-column-span: 2;
-      -ms-grid-column: 1;
-      -ms-grid-row: 1;
-    }
-
-    & > li:nth-child(2) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(3) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 3;
-    }
-
-    & > li:nth-child(4) {
-      -ms-grid-column: 1;
-      -ms-grid-row: 4;
-    }
-
-    & > li:nth-child(5) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 2;
-    }
-
-    & > li:nth-child(6) {
-      -ms-grid-column: 2;
-      -ms-grid-row: 3;
+    & > li {
+      box-sizing: border-box;
+      padding-bottom: govuk-spacing(4);
     }
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+
   &:after {
     @include make-selectable-area-bigger;
   }
@@ -943,9 +903,11 @@ $search-width-or-height: $black-bar-height;
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
-  @include govuk-font($size: 19, $weight: bold);
-  margin-bottom: 0;
-  margin-top: govuk-spacing(2);
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  font-weight: bold;
 }
 
 // Dropdown menu footer links.
@@ -957,28 +919,31 @@ $search-width-or-height: $black-bar-height;
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-list {
   list-style: none;
-  padding: 0 0 govuk-spacing(8) 0;
+  padding: 0 0 govuk-spacing(8) govuk-spacing(4);
 
   @include govuk-media-query($from: "desktop") {
-    margin: 0 (0 - govuk-spacing(3)) 0 (0 - govuk-spacing(3));
-    padding: govuk-spacing(8) 0 govuk-spacing(9) 0;
     @include columns(2, 2, "li");
     @include columns-children(2, 2, "li");
+    margin: 0 (0 - govuk-spacing(3));
+    padding: govuk-spacing(6) 0 govuk-spacing(7) 0;
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-item {
-  padding: govuk-spacing(2) 0 govuk-spacing(2) $chevron-indent-spacing;
+  padding: govuk-spacing(2) 0;
   position: relative;
 
   @include govuk-media-query($from: "desktop") {
-    padding: 0 govuk-spacing(3) 0 govuk-spacing(3);
+    padding: 0 govuk-spacing(3);
   }
 }
 
 .gem-c-layout-super-navigation-header__navigation-second-footer-link {
-  @include govuk-font($size: 19, $weight: normal);
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
   margin: govuk-spacing(1) 0;
 
   &:after {
@@ -987,9 +952,21 @@ $search-width-or-height: $black-bar-height;
 
   @include govuk-media-query($from: "desktop") {
     display: inline;
-    font-weight: bold;
     padding: 0;
+
+    &:after {
+      content: none;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-item-description {
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
   }
+  font-weight: normal;
+  margin: govuk-spacing(1) 0 0 0;
 }
 
 // Search dropdown.
@@ -1017,12 +994,34 @@ $search-width-or-height: $black-bar-height;
 }
 
 // Popular links.
+.gem-c-layout-super-navigation-header__popular-item {
+  position: relative;
+  padding: govuk-spacing(1) 0;
+}
+
 .gem-c-layout-super-navigation-header__popular-link {
-  padding: govuk-spacing(2) 0;
   display: inline-block;
+  font-size: 16px;
+  @if $govuk-typography-use-rem {
+    font-size: govuk-px-to-rem(16px);
+  }
+  padding: 0;
+
+  &:after {
+    @include make-selectable-area-bigger;
+  }
 
   @include govuk-media-query($from: "desktop") {
-    margin: govuk-spacing(1) 0;
-    padding: 0;
+    &:after {
+      content: none;
+    }
+  }
+}
+
+// To be used with .govuk-width-container - we only need the margins from
+// desktop onwards.
+.gem-c-layout-super-navigation-header__width-container {
+  @include govuk-media-query($until: "desktop") {
+    margin: 0;
   }
 }
diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
@@ -133,7 +133,7 @@
                 class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
                 id="super-navigation-menu__section-<%= unique_id %>"
               >
-                <div class="govuk-width-container">
+                <div class="govuk-width-container gem-c-layout-super-navigation-header__width-container">
                   <div class="govuk-grid-row">
                     <div class="govuk-grid-column-one-third-from-desktop">
                       <% if link[:description].present? %>
@@ -163,7 +163,7 @@
                                     track_dimension_index: "29",
                                   }
                                 } %>
-                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0 govuk-!-margin-top-1" if has_description %>
+                                <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
                               </li>
                             <% end %>
                           </ul>

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -177,7 +177,7 @@ en:
           description: Consultations and strategy
         - label: Transparency
           href: "/search/transparency-and-freedom-of-information-releases"
-          description: Government data, Freedom of Information releases and corporate reports
+          description: Data, Freedom of Information releases and corporate reports
         footer_links:
         - label: How government works
           href: "/government/how-government-works"