Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reorder the navigation lists vertically #2303

Merged
merged 3 commits into from
Sep 15, 2021
Merged

Reorder the navigation lists vertically #2303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94a2b51
Reorder the navigation lists vertically
injms Sep 9, 2021
5c785b7
Add mixin for more robust navigation updates
injms Sep 14, 2021
ca56385
Update changelog
injms Sep 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
112 changes: 108 additions & 4 deletions ...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down
8 changes: 5 additions & 3 deletions config/locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down