Skip to content

Commit 0ecb5ab

Browse files
jakecosgrovejakecosgrove
authored
This commit includes:
- New breadcrumb.html includes to support navigation - Updated styling to the side navigation to match the NHS Design system - Updated side navigation to exclude parent pages - primary-navigation.html updated to include mobile responsive dropdown (needs future commit to patch) - New override css to remove margin-bottom from breadcrumb
1 parent d30a247 commit 0ecb5ab

File tree

7 files changed

+143
-12
lines changed

7 files changed

+143
-12
lines changed

‎docs/_includes/breadcrumb.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<nav class="nhsnotify-breadcrumb" aria-label="Breadcrumb">
2+
3+
<!-- Desktop breadcrumb -->
4+
5+
<ol class="nhsuk-breadcrumb__list">
6+
<!-- Level 1 -->
7+
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/">Home</a></li>
8+
<!-- Level 2 -->
9+
{% if page.parent == "Features" %}
10+
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/features">Features</a>
11+
</li>
12+
{% endif %}
13+
{% if page.parent == "Pricing" %}
14+
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/pricing">Pricing</a>
15+
</li>
16+
{% endif %}
17+
{% if page.parent == "Using NHS Notify" %}
18+
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/using-nhs-notify">Using
19+
NHS Notify</a>
20+
</li>
21+
{% endif %}
22+
{% if page.parent == "Support" %}
23+
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/support">Support</a>
24+
</li>
25+
{% endif %}
26+
{% if page.parent == "Get started" %}
27+
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/get-started">Get
28+
started</a>
29+
</li>
30+
{% endif %}
31+
</ol>
32+
33+
<!-- Mobile breadcrumb back -->
34+
35+
<p class="nhsuk-breadcrumb__back">
36+
<!-- Features -->
37+
{% if page.title == "Features" %}
38+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
39+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
40+
Home
41+
</a>
42+
{% endif %}
43+
{% if page.parent == "Features" %}
44+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/features">
45+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
46+
Features
47+
</a>
48+
{% endif %}
49+
<!-- Pricing -->
50+
{% if page.title == "Pricing" %}
51+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
52+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
53+
Home
54+
</a>
55+
{% endif %}
56+
{% if page.parent == "Pricing" %}
57+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/pricing">
58+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
59+
Pricing
60+
</a>
61+
{% endif %}
62+
<!-- Using NHS Notify -->
63+
{% if page.title == "Using NHS Notify" %}
64+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
65+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
66+
Home
67+
</a>
68+
{% endif %}
69+
{% if page.parent == "Using NHS Notify" %}
70+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/using-nhs-notify">
71+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
72+
Using NHS Notify
73+
</a>
74+
{% endif %}
75+
<!-- Support -->
76+
{% if page.title == "Support" %}
77+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
78+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
79+
Home
80+
</a>
81+
{% endif %}
82+
<!-- Get started -->
83+
{% if page.title == "Get started" %}
84+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
85+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
86+
Home
87+
</a>
88+
{% endif %}
89+
{% if page.parent == "Get started" %}
90+
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/get-started">
91+
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
92+
Get started
93+
</a>
94+
{% endif %}
95+
</p>
96+
</nav>

‎docs/_includes/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<header class="nhsuk-header" role="banner">
22
<div class="nhsuk-header__container">
33
<div class="nhsuk-header__logo">
4-
<a class="nhsuk-header__link nhsuk-header__link--service" href="{{ site.baseurl }}/" aria-label="NHS homepage">
4+
<a class="nhsuk-header__link nhsuk-header__link--service" href="{{ site.baseurl }}/" aria-label="NHS Notify homepage">
55
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
66
<path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
77
<path class="nhsuk-logo__text" fill="#fff"

‎docs/_includes/primary-navigation.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,17 @@
77
</a>
88
</li>
99
{% endfor -%}
10+
<li class="nhsuk-mobile-menu-container">
11+
<button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
12+
<span class="nhsuk-u-visually-hidden">Browse</span>
13+
More
14+
<svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
15+
aria-hidden="true" focusable="false">
16+
<path
17+
d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z">
18+
</path>
19+
</svg>
20+
</button>
21+
</li>
1022
</ul>
1123
</nav>

‎docs/_layouts/page.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,12 @@
1919
| sort: 'name', 'last'
2020
-%}
2121
<div class="nhsuk-width-container">
22-
<main class="nhsuk-main-wrapper" id="maincontent" role="main">
22+
{%- include breadcrumb.html -%}
23+
<main class="nhsuk-main-wrapper--s" id="maincontent" role="main">
2324
<div class="nhsuk-grid-row">
2425
<div class="nhsuk-grid-column-full">
2526
<div class="nhsnotify-pane">
26-
<div class="nhsnotify-pane__side-bar nhsuk-grid-column-one-quarter">
27+
<div class="nhsnotify-pane__side-bar">
2728
<nav class="nhsnotify-side-nav">
2829
<ul class="nhsuk-list nhsnotify-side-nav__list">
2930
{% for section in first_level %}
@@ -32,6 +33,7 @@
3233
{% endif %}
3334
{% assign sorted = section.items | sort: 'nav_order' %}
3435
{% for post in sorted %}
36+
{% unless post.has_children %}
3537
<li class="
3638
nhsnotify-side-nav__item
3739
{% if post.url == page.url %}
@@ -40,13 +42,14 @@
4042
">
4143
<a class="nhsnotify-side-nav__link" href="{{ site.baseurl | append: post.url }}">{{ post.title }}</a>
4244
</li>
45+
{% endunless %}
4346
{% endfor %}
4447
{% endfor %}
4548
</ul>
4649

4750
</nav>
4851
</div>
49-
<div class="nhsnotify-pane__main-content nhsuk-grid-column-three-quarters">
52+
<div class="nhsnotify-pane__main-content">
5053
{% if page.section != undefined %}
5154
<heading class="nhsuk-heading-s" style="margin-bottom: 0; color: #4c6272">{{ page.section }}</heading>
5255
{% endif %}

‎docs/_sass/_nhsnotify-side-nav.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464

6565
&.nhsnotify-side-nav__item--current {
6666
left: -1.2em;
67-
padding-left: 1em;
67+
padding-left: 0.75em;
6868
position: relative;
6969
}
7070
}
@@ -96,14 +96,14 @@
9696
}
9797
}
9898

99+
// Mobile navigation
100+
.nhsnotify-index-navigation {
101+
@include nhsuk-responsive-padding(4, 'top');
102+
}
103+
99104
// Hide content on desktop
100105
.nhsnotify-u-hide-desktop {
101106
@include mq($from: desktop) {
102107
display: none;
103108
}
104109
}
105-
106-
// Mobile navigation
107-
.nhsnotify-index-navigation {
108-
@include nhsuk-responsive-padding(4, 'top');
109-
}

‎docs/_sass/_nhsnotify.scss‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,18 @@
6868
}
6969

7070
.nhsuk-header__navigation-list {
71-
justify-content: flex-centre;
71+
display: flex;
7272
}
7373

7474
.nhsuk-header__navigation-link {
7575
text-decoration: underline;
76+
padding-left: 0px;
77+
padding-right: 0px;
78+
79+
@include mq($until: desktop) {
80+
padding-left: 16px;
81+
padding-right: 16px;
82+
}
7683

7784
&:hover {
7885
text-decoration: none;
@@ -145,3 +152,16 @@
145152
@include nhsuk-responsive-margin(0, "top"); /* [4] */
146153
}
147154
}
155+
156+
// Breadcrumb spacing override
157+
158+
.nhsnotify-breadcrumb {
159+
@include print-hide();
160+
161+
padding-top: 20px;
162+
163+
+ .nhsuk-width-container .nhsuk-main-wrapper {
164+
margin-top: 20px;
165+
}
166+
167+
}

‎docs/pages/using-nhs-notify/using-nhs-notify.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
layout: page
66
title: Using NHS Notify
7-
nav_order: 4
7+
nav_order: 1
88
has_children: true
99
permalink: /using-nhs-notify/
1010
---

0 commit comments

Comments
 (0)