Merge pull request #2303 from alphagov/reorder-nav-lists

Reorder the navigation lists vertically

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Add big number component ([PR #2278](https://github.com/alphagov/govuk_publishing_components/pull/2278))
 * Add missing `govuk-template` class to public layout ([PR #2307](https://github.com/alphagov/govuk_publishing_components/pull/2307))
 * Fix sticky hover on search button in navigation header([PR #2304](https://github.com/alphagov/govuk_publishing_components/pull/2304))
+* Reorder the navigation lists vertically ([PR #2303](https://github.com/alphagov/govuk_publishing_components/pull/2303))
 
 ## 27.0.0
 

app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -1,3 +1,97 @@
+/// Set grid row or column value using the fraction unit.
+///
+/// @param {Integer} $number - number of fractions that the grid row or column
+///   needs to be divided into.
+/// @returns {String} - the value
+///
+/// @example scss - Five fractions will return `1fr 1fr 1fr 1fr 1fr`.
+///  .container {
+///    grid-template-rows: fractions(5);
+///  }
+///
+@function fractions($number) {
+  $fractions: "1fr";
+
+  @for $i from 1 to $number {
+    $fractions: $fractions + " 1fr";
+  }
+
+  @return unquote($fractions);
+}
+
+/// Arrange items into vertical columns
+///
+/// @param {Integer} $items - number of items that need to be arranged
+/// @param {Integer} $columns - number of columns required
+/// @param {String} $selector - (optional) the inner element to be targeted.
+///
+/// @example scss - A 7 item 2 column layout.
+///  .container {
+///    @include columns(7, 2);
+///  }
+
+/// @example scss - A 9 item 3 column layout that has `div`s as the inner
+///   elements.
+///  .container {
+///    @include columns(9, 3, "div");
+///  }
+///
+@mixin columns($items, $columns, $selector: "*") {
+  $rows: ceil($items / $columns);
+
+  display: -ms-grid;
+  display: grid;
+  grid-auto-flow: column;
+  -ms-grid-columns: fractions($columns);
+  grid-template-columns: fractions($columns);
+  -ms-grid-rows: fractions($rows);
+  grid-template-rows: fractions($rows);
+
+  // Internet Explorer 10-11 require each element to be placed in the grid -
+  // the `grid-auto-flow` property isn't supported. This means that both the
+  // column and row needs to be set for every element.
+
+  // This creates a list of lists to represent the columns and rows; for
+  // example, a 7 item 2 column list would create this:
+  //   [
+  //     [1, 2, 3, 4 ] // column one
+  //     [5, 6, 7] // column two
+  //   ]
+  $grid: ();
+  $counter: 0;
+
+  @for $column from 1 through $columns {
+    $this-row: ();
+
+    @for $row from 1 through $rows {
+      $counter: $counter + 1;
+
+      @if $counter <= $items {
+        $this-row: append($this-row, $counter);
+      }
+    }
+
+    $grid: append($grid, $this-row, "comma");
+  }
+
+  // Now we can loop through the list of lists to create the rules needed for
+  // the older grid syntax; fist looping through the list to get the number
+  // needed for the column, then looping again to get the number for the grid
+  // row:
+  @for $column_index from 1 through length($grid) {
+    $this-row: nth($grid, $column_index);
+
+    @for $item-index from 1 through length($this-row) {
+      $this-item: nth($this-row, $item-index);
+
+      & > #{$selector}:nth-child(#{$this-item}) {
+        -ms-grid-column: $column_index;
+        -ms-grid-row: $item-index;
+      }
+    }
+  }
+}
+
 $search-icon-size: 20px;
 
 @mixin chevron($colour) {
@@ -599,8 +693,6 @@ $search-icon-size: 20px;
   padding: govuk-spacing(2) 0 govuk-spacing(6) 0;
 
   @include govuk-media-query($from: "desktop") {
-    display: flex;
-    flex-wrap: wrap;
     margin-left: (0 - govuk-spacing(3));
     margin-right: (0 - govuk-spacing(3));
     padding: govuk-spacing(6) 0 govuk-spacing(8) 0;
@@ -610,11 +702,23 @@ $search-icon-size: 20px;
       margin-bottom: 0;
       padding-left: govuk-spacing(3);
       padding-right: govuk-spacing(3);
-      width: 50%;
     }
   }
 }
 
+.gem-c-layout-super-navigation-header__navigation-second-items--topics {
+  @include govuk-media-query($from: "desktop") {
+    @include columns(18, 2, "li");
+  }
+}
+
+.gem-c-layout-super-navigation-header__navigation-second-items--government-activity {
+  @include govuk-media-query($from: "desktop") {
+    @include columns(5, 2, "li");
+    padding-bottom: govuk-spacing(3);
+  }
+}
+
 .gem-c-layout-super-navigation-header__navigation-second-item-link {
   display: inline-block;
   padding: govuk-spacing(2) 0;
@@ -628,8 +732,8 @@ $search-icon-size: 20px;
 
 .gem-c-layout-super-navigation-header__navigation-second-item-link--with-description {
   @include govuk-font($size: 19, $weight: bold);
+  margin-top: govuk-spacing(2);
   margin-bottom: 0;
-  padding-bottom: govuk-spacing(1);
 }
 
 // Dropdown menu footer links.

app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -134,7 +134,7 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to
                     </div>
                     <% if link[:menu_contents].present? %>
                       <div class="govuk-grid-column-two-thirds-from-desktop">
-                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items">
+                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
                             <% link[:menu_contents].each do | item | %>
                               <%
                                 has_description = item[:description].present?

config/locales/en.yml

@@ -47,7 +47,7 @@ en:
       - We also use cookies set by other sites to help us deliver content from their services.
       title: Cookies on GOV.UK
     devolved_nations:
-      applies_to: Applies to  
+      applies_to: Applies to
       england: England
       northern_ireland: Northern Ireland
       scotland: Scotland
@@ -124,7 +124,8 @@ en:
       - label: Topics
         href: "/browse"
         description: Find information and services
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: Benefits
           href: "/browse/benefits"
         - label: Births, death, marriages and care
@@ -166,7 +167,8 @@ en:
       - label: Government activity
         href: "/search/news-and-communications"
         description: Find out what the government is doing
-        menu_contents:
+        menu_contents: # If adding or removing items, remember to update the
+                       # `columns` in the layout-super-navigation-header SCSS.
         - label: News
           href: "/search/news-and-communications"
           description: News stories, speeches, letters and notices