diff --git a/CHANGELOG.md b/CHANGELOG.md index 4845a0fb08..92f14f2322 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss index ff1bbd7438..c569b64e41 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +++ b/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. 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 index 115af61d59..ac547f89bb 100644 --- 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 @@ -134,7 +134,7 @@ show_navigation_menu_text = t("components.layout_super_navigation_header.menu_to <% if link[:menu_contents].present? %>
-