Skip to content

Commit a0ca955

Browse files
jakecosgrovejakecosgrove
authored
Merge branch 'main' of https://github.com/NHSDigital/nhs-notify-web-cms-dev into add-onboarding-page
Merges web-cms-dev into branch
2 parents ed314ff + 951893e commit a0ca955

17 files changed

+427
-41
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/components/image-with-caption.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<figure class="nhsuk-image-with-caption {{ include.class | xml_escape }}">
2+
{% assign src = '/assets/images/' | prepend: site.baseurl | append: include.src %}
3+
{% if include.src contains 'https://' %}
4+
<img class="nhsuk-image__img" src='{{ include.src | uri_escape }}' alt='{{ include.alt | xml_escape }}' />
5+
{% else %}
6+
<img class="nhsuk-image__img" src='{{ src }}' alt='{{ include.alt | xml_escape }}' />
7+
{% endif %}
8+
{% if include.caption %}
9+
<figcaption class="nhsuk-image__caption">
10+
{{ include.caption }}
11+
</figcaption>
12+
{% endif %}
13+
</figure>

‎docs/_includes/components/inset-text.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="nhsuk-inset-text">
1+
<div class="nhsuk-inset-text-override">
22
<span class="nhsuk-u-visually-hidden">Information:</span>
33
{{ include.text | markdownify }}
44
</div>

‎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: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,73 @@
11
.nhsnotify-pane {
2-
display: flex;
2+
display: -webkit-box;
3+
display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
4+
display: flex; // sass-lint:disable-line no-duplicate-properties
35
min-height: 0;
46
overflow: inherit;
57
position: relative;
68
}
79

810
.nhsnotify-pane__side-bar {
11+
-ms-flex: 0 0 auto;
12+
-webkit-box-flex: 0;
913
flex: 0 0 auto;
10-
width: 280px;
11-
padding: 0;
14+
width: 220px;
15+
16+
@include mq($until: desktop) {
17+
display: none;
18+
}
1219
}
1320

1421
.nhsnotify-pane__main-content {
15-
display: flex;
22+
-ms-flex: 1 1 100%; // sass-lint:disable-line no-duplicate-properties
23+
-ms-flex-direction: column;
24+
-webkit-box-direction: normal;
25+
-webkit-box-flex: 1;
26+
-webkit-box-orient: vertical;
27+
display: -webkit-box;
28+
display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
29+
display: flex; // sass-lint:disable-line no-duplicate-properties
1630
flex: 1 1 100%;
1731
flex-direction: column;
1832
min-width: 0;
33+
34+
@include mq($from: desktop) {
35+
padding-left: nhsuk-spacing(9);
36+
}
37+
1938
}
2039

2140
.nhsnotify-side-nav__list {
22-
font-size: 1em;
23-
line-height: 1.3;
41+
@include nhsuk-font(16, $line-height: 1.3);
2442
margin-bottom: 0;
43+
44+
@include mq($until: desktop) {
45+
@include nhsuk-font(19, $line-height: 1.3);
46+
margin-bottom: nhsuk-spacing(2);
47+
}
2548
}
2649

2750
.nhsnotify-side-nav__list-section {
28-
@extend .nhsuk-u-font-weight-bold;
29-
color: #4c6272;
30-
margin-bottom: 8px;
31-
padding-bottom: 4px;
32-
font-size: 1em;
51+
@include nhsuk-font(19, $line-height: 1.25, $weight: bold);
52+
color: $nhsuk-secondary-text-color;
53+
margin-bottom: 12px;
54+
padding-top: 4px;
55+
56+
@include mq($until: desktop) {
57+
@include nhsuk-font(24, $line-height: 1.25, $weight: bold);
58+
color: $nhsuk-text-color;
59+
}
3360
}
3461

3562
.nhsnotify-side-nav__item {
36-
padding: 4px 0 0.5em 1.3em;
37-
38-
&:first-child {
39-
padding-left: 0;
63+
padding: 4px 0 0.5em;
4064

4165
&.nhsnotify-side-nav__item--current {
4266
left: -1.2em;
43-
padding-left: 1em;
67+
padding-left: 0.75em;
4468
position: relative;
4569
}
4670
}
47-
}
4871

4972
.nhsnotify-side-nav__item--current {
5073
font-weight: 600;
@@ -55,6 +78,10 @@
5578
.nhsnotify-side-nav__link {
5679
text-decoration: none;
5780

81+
@include mq($until: desktop) {
82+
text-decoration: underline;
83+
}
84+
5885
&:visited {
5986
color: $blue-000;
6087
}
@@ -68,3 +95,15 @@
6895
color: #212b32;
6996
}
7097
}
98+
99+
// Mobile navigation
100+
.nhsnotify-index-navigation {
101+
@include nhsuk-responsive-padding(4, 'top');
102+
}
103+
104+
// Hide content on desktop
105+
.nhsnotify-u-hide-desktop {
106+
@include mq($from: desktop) {
107+
display: none;
108+
}
109+
}

‎docs/_sass/_nhsnotify.scss‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,21 @@
6767
margin: 0;
6868
}
6969

70-
.nhsuk-header__navigation-list {
71-
justify-content: flex-centre;
70+
.nhsuk-header__navigation-item {
71+
padding-left: 0;
72+
padding-right: 0;
73+
}
74+
75+
.nhsuk-header__navigation-item:first-child .nhsuk-header__navigation-link {
76+
padding-left: 0;
77+
}
78+
79+
.nhsuk-header__navigation-item:nth-child(5) .nhsuk-header__navigation-link {
80+
padding-right: 0;
81+
}
82+
83+
.nhsuk-header__drop-down .nhsuk-header__navigation-item:first-child .nhsuk-header__navigation-link {
84+
padding-left: 16px;
7285
}
7386

7487
.nhsuk-header__navigation-link {
@@ -77,6 +90,7 @@
7790
&:hover {
7891
text-decoration: none;
7992
}
93+
8094
}
8195

8296
.nhsuk-phase-banner {
@@ -107,3 +121,54 @@
107121
line-height: 1.25;
108122
padding-left: 0.5em;
109123
}
124+
125+
.nhsuk-inset-text-override {
126+
@include top-and-bottom(); /* [1] */
127+
@include reading-width(); /* [2] */
128+
129+
@include nhsuk-responsive-margin(7, "bottom");
130+
@include nhsuk-responsive-margin(4, "top");
131+
@include nhsuk-responsive-padding(4);
132+
133+
border-left: $nhsuk-border-width-inset-text solid $color_nhsuk-blue;
134+
135+
@include mq($media-type: print) {
136+
border-color: $nhsuk-print-text-color;
137+
}
138+
}
139+
140+
.nhsuk-image-with-caption {
141+
background-color: $color_nhsuk-white;
142+
border-bottom: 1px solid $color_nhsuk-grey-4;
143+
144+
margin-left: 0; /* [1] */
145+
margin-right: 0; /* [1] */
146+
147+
@include nhsuk-responsive-margin(6, "bottom");
148+
@include nhsuk-responsive-margin(3, "top");
149+
150+
@include mq($from: desktop) {
151+
width: 100%; /* [2] */
152+
}
153+
154+
@include mq($media-type: print) {
155+
width: 50%; /* [3] */
156+
}
157+
158+
& + .nhsuk-image {
159+
@include nhsuk-responsive-margin(0, "top"); /* [4] */
160+
}
161+
}
162+
163+
// Breadcrumb spacing override
164+
165+
.nhsnotify-breadcrumb {
166+
@include print-hide();
167+
168+
padding-top: 20px;
169+
170+
+ .nhsuk-width-container .nhsuk-main-wrapper {
171+
margin-top: 20px;
172+
}
173+
174+
}

‎docs/assets/images/email-sender-name-example-nhs-notify.png‎

147 KB
Loading

‎docs/assets/images/nhs-app-sender-name-example-nhs-notify-1.png‎

226 KB
Loading

0 commit comments

Comments
 (0)