Skip to content

Commit 5de3d30

Browse files
alexcolbeck1RossBugginsNHS
alexcolbeck1
authored and
RossBugginsNHS
committed
Fixing breadbrumbs, back links and padding between columns
Signed-off-by: Ross Buggins <[email protected]>
1 parent e642f7a commit 5de3d30

File tree

7 files changed

+167
-48
lines changed

7 files changed

+167
-48
lines changed

‎docs/_includes/breadcrumb.html‎

Lines changed: 29 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,119 @@
1-
<nav class="nhsnotify-breadcrumb" aria-label="Breadcrumb">
1+
<nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
22

33
<!-- Desktop breadcrumb -->
44

55
<ol class="nhsuk-breadcrumb__list">
6+
67
<!-- Level 1 -->
78
<li class="nhsuk-breadcrumb__item">
89
<a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/">Home</a>
9-
1010
</li>
11-
<svg class='nhsuk-icon nhsnotify-breadcrumb-chevron' xmlns='http://www.w3.org/2000/svg' fill='#aeb7bd' height='18'
12-
width='18' viewBox='0 0 24 24' aria-hidden='true'>
13-
<path
14-
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'>
15-
</path>
16-
</svg>
11+
1712
<!-- Level 2 -->
1813
{% if page.parent == "Features" %}
19-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/features">Features</a>
14+
<li class="nhsuk-breadcrumb__item">
15+
<a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/features">Features</a>
2016
</li>
21-
<svg class='nhsuk-icon nhsnotify-breadcrumb-chevron' xmlns='http://www.w3.org/2000/svg' fill='#aeb7bd' height='18'
22-
width='18' viewBox='0 0 24 24' aria-hidden='true'>
23-
<path
24-
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'>
25-
</path>
26-
</svg>
2717
{% endif %}
18+
2819
{% if page.parent == "Pricing" %}
29-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/pricing">Pricing</a>
20+
<li class="nhsuk-breadcrumb__item">
21+
<a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/pricing">Pricing</a>
3022
</li>
31-
<svg class='nhsuk-icon nhsnotify-breadcrumb-chevron' xmlns='http://www.w3.org/2000/svg' fill='#aeb7bd' height='18'
32-
width='18' viewBox='0 0 24 24' aria-hidden='true'>
33-
<path
34-
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'>
35-
</path>
36-
</svg>
3723
{% endif %}
24+
3825
{% if page.parent == "Using NHS Notify" %}
39-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/using-nhs-notify">Using
40-
NHS Notify</a>
26+
<li class="nhsuk-breadcrumb__item">
27+
<a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/using-nhs-notify">Using NHS Notify</a>
4128
</li>
42-
<svg class='nhsuk-icon nhsnotify-breadcrumb-chevron' xmlns='http://www.w3.org/2000/svg' fill='#aeb7bd' height='18'
43-
width='18' viewBox='0 0 24 24' aria-hidden='true'>
44-
<path
45-
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'>
46-
</path>
47-
</svg>
4829
{% endif %}
30+
4931
{% if page.parent == "Support" %}
50-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/support">Support</a>
32+
<li class="nhsuk-breadcrumb__item">
33+
<a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/support">Support</a>
5134
</li>
52-
<svg class='nhsuk-icon nhsnotify-breadcrumb-chevron' xmlns='http://www.w3.org/2000/svg' fill='#aeb7bd' height='18'
53-
width='18' viewBox='0 0 24 24' aria-hidden='true'>
54-
<path
55-
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'>
56-
</path>
57-
</svg>
5835
{% endif %}
36+
5937
{% if page.parent == "Get started" %}
60-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/get-started">Get
61-
started</a>
38+
<li class="nhsuk-breadcrumb__item">
39+
<a class="nhsuk-breadcrumb__link" href="{{site.baseurl}}/get-started">Get started</a>
6240
</li>
63-
<svg class='nhsuk-icon nhsnotify-breadcrumb-chevron' xmlns='http://www.w3.org/2000/svg' fill='#aeb7bd' height='18'
64-
width='18' viewBox='0 0 24 24' aria-hidden='true'>
65-
<path
66-
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'>
67-
</path>
68-
</svg>
6941
{% endif %}
42+
7043
</ol>
7144

7245
<!-- Mobile breadcrumb back -->
7346

7447
<p class="nhsuk-breadcrumb__back">
48+
7549
<!-- Features -->
7650
{% if page.title == "Features" %}
7751
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
7852
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
7953
Home
8054
</a>
8155
{% endif %}
56+
8257
{% if page.parent == "Features" %}
8358
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/features">
8459
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
8560
Features
8661
</a>
8762
{% endif %}
63+
8864
<!-- Pricing -->
8965
{% if page.title == "Pricing" %}
9066
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
9167
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
9268
Home
9369
</a>
9470
{% endif %}
71+
9572
{% if page.parent == "Pricing" %}
9673
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/pricing">
9774
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
9875
Pricing
9976
</a>
10077
{% endif %}
78+
10179
<!-- Using NHS Notify -->
10280
{% if page.title == "Using NHS Notify" %}
10381
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
10482
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
10583
Home
10684
</a>
10785
{% endif %}
86+
10887
{% if page.parent == "Using NHS Notify" %}
10988
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/using-nhs-notify">
11089
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
11190
Using NHS Notify
11291
</a>
11392
{% endif %}
93+
11494
<!-- Support -->
11595
{% if page.title == "Support" %}
11696
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
11797
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
11898
Home
11999
</a>
120100
{% endif %}
101+
121102
<!-- Get started -->
122103
{% if page.title == "Get started" %}
123104
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/">
124105
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
125106
Home
126107
</a>
127108
{% endif %}
109+
128110
{% if page.parent == "Get started" %}
129111
<a class="nhsuk-breadcrumb__backlink" href="{{site.baseurl}}/get-started">
130112
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
131113
Get started
132114
</a>
133115
{% endif %}
116+
134117
</p>
118+
135119
</nav>

‎docs/_sass/_breadcrumbs.scss‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
////
2+
/// Breadcrumb component
3+
///
4+
/// 1. Hide the breadcrumb on print stylesheets.
5+
/// 3. Don't show the full breadcrumb below tablet size.
6+
/// 4. Typography sizing mixin, see core/tools/_typography
7+
/// 5. and core/settings/_typography for size maps.
8+
/// .. but show a back to index page link.
9+
/// 6. Spacing to align the chevron with breadcrumb items
10+
///
11+
/// @group components
12+
////
13+
14+
.nhsuk-breadcrumb {
15+
@include print-hide; // [1]
16+
margin-top: nhsuk-spacing(3);
17+
18+
@include mq($from: tablet) {
19+
margin-top: nhsuk-spacing(4);
20+
}
21+
}
22+
23+
.nhsuk-breadcrumb__list {
24+
@include mq($until: tablet) {
25+
display: none; // [3]
26+
}
27+
28+
@include nhsuk-font(16); // [4]
29+
list-style: none;
30+
margin: 0;
31+
padding: 0;
32+
}
33+
34+
.nhsuk-breadcrumb__item {
35+
@include nhsuk-font(16); // [4]
36+
display: inline-block;
37+
margin-bottom: 0;
38+
39+
&:not(:last-child)::after {
40+
background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__chevron-right' xmlns='http://www.w3.org/2000/svg' fill='%23aeb7bd' height='18' width='18' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cpath 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'%3E%3C/path%3E%3C/svg%3E")
41+
right 0 top 0 no-repeat;
42+
content: "";
43+
display: inline-block;
44+
height: 19px; // [6]
45+
margin-left: 9px; // [6]
46+
margin-right: 2px; // [6]
47+
vertical-align: middle; // [6]
48+
width: 18px; // [6]
49+
}
50+
}
51+
52+
.nhsuk-breadcrumb__link {
53+
&:visited {
54+
color: $nhsuk-link-color;
55+
56+
&:hover {
57+
color: $nhsuk-link-hover-color;
58+
}
59+
}
60+
61+
&:focus {
62+
&:hover {
63+
color: $nhsuk-focus-text-color;
64+
}
65+
}
66+
}
67+
68+
.nhsuk-breadcrumb__back {
69+
@include nhsuk-font(16); // [4]
70+
margin: 0;
71+
padding-left: nhsuk-spacing(3);
72+
position: relative;
73+
74+
@include mq($from: tablet) {
75+
display: none; // [5]
76+
}
77+
78+
&::before {
79+
background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__chevron-left' xmlns='http://www.w3.org/2000/svg' fill='%23005eb8' height='24' width='24' viewBox='8 0 24 24' aria-hidden='true'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E")
80+
no-repeat;
81+
content: "";
82+
display: inline-block;
83+
height: 18px;
84+
left: 0;
85+
position: absolute;
86+
top: -1px;
87+
width: 10px;
88+
}
89+
}
90+
91+
.nhsuk-breadcrumb__backlink {
92+
text-decoration: none;
93+
94+
&:visited {
95+
color: $nhsuk-link-color;
96+
97+
&:hover {
98+
color: $nhsuk-link-hover-color;
99+
}
100+
}
101+
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@
1212
-webkit-box-flex: 0;
1313
flex: 0 0 auto;
1414
width: 220px;
15+
margin-right: nhsuk-spacing(9);
1516

1617
@include mq($until: desktop) {
1718
display: none;
1819
}
20+
1921
}
2022

2123
.nhsnotify-pane__main-content {
@@ -31,9 +33,9 @@
3133
flex-direction: column;
3234
min-width: 0;
3335

34-
@include mq($from: desktop) {
36+
/*@include mq($from: desktop) {
3537
padding-left: nhsuk-spacing(9);
36-
}
38+
}*/
3739

3840
}
3941

‎docs/_sass/_nhsnotify.scss‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@
161161
}
162162

163163
// Breadcrumb spacing override
164-
164+
/*
165165
.nhsnotify-breadcrumb {
166166
@include print-hide();
167167
@@ -190,3 +190,32 @@
190190
.nhsnotify-breadcrumb-chevron:last-child {
191191
display: none;
192192
}
193+
*/
194+
195+
196+
197+
198+
// Custom breadcrumb styles
199+
200+
.nhsuk-breadcrumb {
201+
margin-top: 0;
202+
padding-bottom: 0;
203+
204+
@include mq($from: tablet) {
205+
margin-top: 0;
206+
}
207+
}
208+
209+
.nhsuk-breadcrumb__item {
210+
211+
&:not(:last-child)::after {
212+
background: url(/assets/images/icon-chevron-right__breadcrumb.svg) top left no-repeat;
213+
}
214+
}
215+
216+
.nhsuk-breadcrumb__back {
217+
218+
&::before {
219+
background: url(/assets/images/icon-chevron-left__back_link.svg) top left no-repeat;
220+
}
221+
}

‎docs/assets/css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
---
33
@import "../../node_modules/nhsuk-frontend/packages/nhsuk";
44
@import "nhs-colours";
5+
@import "breadcrumbs";
56
@import "nhsnotify";
67
@import "nhsnotify-side-nav";

‎docs/assets/images/icon-chevron-left__back_link.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/assets/images/icon-chevron-right__breadcrumb.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)