Skip to content

Commit be0609d

Browse files
frankierobertofrankieroberto
authored
Add pagination to Manage users and Vaccine batches (#114)
This adds a pagination component to the bottom of the Manage users page, rather than just displaying all users on a single page. The number of users per page is set at 20, although this could be tweaked. The pagination component is not yet part of the NHS design system, so I’ve borrowed the GOV.UK one and applied NHS styling. This is still work-in-progress, and I’m working on contributing this to the NHS design system here: nhsuk/nhsuk-frontend#1026 ## Screenshots ### Manage users | First page | Middle page | Last page | | ------ | ------ | ------ | | ![manage-users-page-1](https://github.com/user-attachments/assets/79f2e200-f771-4327-bc60-e4e30f706d09) | ![manage-users-page-3](https://github.com/user-attachments/assets/635e8a69-72ab-4f93-8fba-623d484cb225) | ![manage-users-page-5](https://github.com/user-attachments/assets/3ba01ff2-3d6d-48be-be78-5e79ec588794) | ### Vaccine batches (on vaccine product page for a given site) ![pagination-of-vaccine-batches](https://github.com/user-attachments/assets/99772ecc-8a09-4300-935f-0c463f6ae7a2) If there are a lot of pages, then ellipsis would be used to show gaps in the sequence, so that the first page, last page, previous and next page are always included: <img width="608" alt="Screenshot 2024-09-23 at 16 09 43" src="https://github.com/user-attachments/assets/500b8dfd-2ecc-4f69-b8a4-3078642a1fbe">
1 parent 3a5707f commit be0609d

File tree

12 files changed

+1306
-8
lines changed

12 files changed

+1306
-8
lines changed

‎app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const appViews = [
5555
path.join(__dirname, 'node_modules/nhsuk-frontend/packages/macros'),
5656
path.join(__dirname, 'docs/views/'),
5757
path.join(__dirname, 'lib/prototype-admin/'),
58+
path.join(__dirname, 'app/components/'),
5859
];
5960

6061
const nunjucksConfig = {

‎app/assets/sass/main.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ $govuk-brand-colour: $nhsuk-link-color;
2828
@import 'components/table';
2929

3030

31+
@import '../../components/pagination/_pagination';
32+
3133
.autocomplete__wrapper ul > li {
3234
margin-bottom: 0;
3335
}

‎app/components/pagination/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Pagination
2+
3+
This is a work-in-progress modification of the Pagination component to support numbered pages.
4+
5+
See https://github.com/nhsuk/nhsuk-frontend/pull/1026

‎app/components/pagination/_pagination.scss

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
/* ==========================================================================
2+
COMPONENTS / #PAGINATION
3+
========================================================================== */
4+
5+
/**
6+
* 1. Padding to give the icon spacing.
7+
* 2. Append the word 'page' after next and
8+
* previous on print stylesheets to make it easier
9+
* to understand in print context.
10+
*/
11+
12+
// Previous and next pages variant
13+
.nhsuk-pagination {
14+
@include nhsuk-responsive-margin(7, "top");
15+
@include nhsuk-responsive-margin(7, "bottom");
16+
}
17+
18+
.nhsuk-pagination__list {
19+
@include clearfix();
20+
}
21+
22+
.nhsuk-pagination-item--previous {
23+
float: left;
24+
text-align: left;
25+
width: 50%;
26+
27+
.nhsuk-icon {
28+
left: -6px;
29+
}
30+
31+
.nhsuk-pagination__title {
32+
padding-left: nhsuk-spacing(5); /* [1] */
33+
}
34+
}
35+
36+
.nhsuk-pagination-item--next {
37+
float: right;
38+
text-align: right;
39+
width: 50%;
40+
41+
.nhsuk-icon {
42+
right: -6px;
43+
}
44+
45+
.nhsuk-pagination__title {
46+
padding-right: nhsuk-spacing(5); /* [1] */
47+
}
48+
}
49+
50+
.nhsuk-pagination__link {
51+
display: block;
52+
position: relative;
53+
text-decoration: none;
54+
width: 100%;
55+
56+
@include mq($media-type: print) {
57+
color: $color_nhsuk-black;
58+
}
59+
60+
.nhsuk-icon {
61+
position: absolute;
62+
top: -2px;
63+
64+
@include mq($media-type: print) {
65+
color: $color_nhsuk-black;
66+
margin-top: 0;
67+
}
68+
}
69+
70+
&:hover {
71+
color: $nhsuk-link-hover-color;
72+
73+
.nhsuk-icon {
74+
fill: $nhsuk-link-hover-color;
75+
}
76+
77+
.nhsuk-pagination__page {
78+
text-decoration: none;
79+
}
80+
}
81+
82+
&:focus {
83+
@include nhsuk-focused-text;
84+
85+
.nhsuk-pagination__page {
86+
text-decoration: none;
87+
}
88+
89+
&:visited,
90+
&:hover,
91+
&:active {
92+
.nhsuk-icon {
93+
fill: $nhsuk-focus-text-color;
94+
}
95+
}
96+
}
97+
98+
&:visited {
99+
.nhsuk-icon {
100+
fill: $nhsuk-link-visited-color;
101+
}
102+
103+
&:hover {
104+
.nhsuk-icon {
105+
fill: $nhsuk-link-hover-color;
106+
}
107+
}
108+
109+
&:focus {
110+
.nhsuk-icon {
111+
fill: $nhsuk-focus-text-color;
112+
}
113+
}
114+
}
115+
}
116+
117+
.nhsuk-pagination__title {
118+
@include nhsuk-typography-responsive(24);
119+
120+
display: block;
121+
122+
@include mq($media-type: print) {
123+
&:after {
124+
content: " page"; /* [2] */
125+
}
126+
}
127+
}
128+
129+
.nhsuk-pagination__page {
130+
@include nhsuk-typography-responsive(16);
131+
132+
display: block;
133+
text-decoration: underline;
134+
}
135+
136+
// Numbered pages variant
137+
.nhsuk-pagination--numbered {
138+
@include clearfix();
139+
}
140+
141+
// In a numbered list, the previous link, numbered page links,
142+
// and next link should all line up
143+
.nhsuk-pagination--numbered__prev,
144+
.nhsuk-pagination--numbered__next,
145+
.nhsuk-pagination--numbered__item {
146+
@include nhsuk-font(19);
147+
box-sizing: border-box;
148+
position: relative;
149+
min-width: 45px;
150+
min-height: 45px;
151+
padding: nhsuk-spacing(2) nhsuk-spacing(2);
152+
text-align: center;
153+
margin: 0;
154+
float: left;
155+
}
156+
157+
.nhsuk-pagination--numbered__link:visited:hover,
158+
.nhsuk-pagination--numbered__item a:hover {
159+
color: $nhsuk-link-hover-color;
160+
}
161+
162+
.nhsuk-pagination--numbered__prev:hover,
163+
.nhsuk-pagination--numbered__next:hover,
164+
.nhsuk-pagination--numbered__item:hover {
165+
background-color: $color_nhsuk-grey-4;
166+
color: $color_nhsuk-blue;
167+
}
168+
169+
// Container for the list of numbered items
170+
.nhsuk-pagination__list--numbered {
171+
margin: 0;
172+
padding: 0;
173+
list-style: none;
174+
}
175+
176+
// Current number
177+
.nhsuk-pagination--numbered__item--current,
178+
.nhsuk-pagination--numbered__item--current:hover {
179+
background-color: $color_nhsuk-blue;
180+
font-weight: $nhsuk-font-bold;
181+
182+
.nhsuk-pagination--numbered__link {
183+
color: $color_nhsuk-white;
184+
}
185+
186+
.nhsuk-pagination--numbered__link:focus {
187+
color: $color_nhsuk-black;
188+
}
189+
}
190+
191+
.nhsuk-pagination--numbered__item--ellipses {
192+
font-weight: $nhsuk-font-bold;
193+
color: $nhsuk-secondary-text-color;
194+
195+
&:hover {
196+
background-color: transparent;
197+
}
198+
}
199+
200+
.nhsuk-pagination--numbered__link {
201+
min-width: nhsuk-spacing(3);
202+
vertical-align: middle;
203+
color: $color_nhsuk-blue;
204+
205+
// Increase the touch area for the link to the parent element.
206+
@media screen {
207+
&::after {
208+
content: "";
209+
position: absolute;
210+
top: 0;
211+
right: 0;
212+
bottom: 0;
213+
left: 0;
214+
}
215+
}
216+
}
217+
218+
.nhsuk-pagination--numbered .nhsuk-icon {
219+
margin-top: 0;
220+
margin-bottom: -12px;
221+
fill: $color_nhsuk-blue;
222+
}
223+
224+
.nhsuk-pagination--numbered__link:visited .nhsuk-icon {
225+
fill: $nhsuk-link-visited-color;
226+
}
227+
228+
.nhsuk-pagination--numbered__link:hover .nhsuk-icon {
229+
fill: $nhsuk-link-hover-color;
230+
}
231+
232+
.nhsuk-pagination--numbered .nhsuk-icon__arrow-left {
233+
margin-left: -13px;
234+
margin-right: nhsuk-spacing(2);
235+
}
236+
237+
.nhsuk-pagination--numbered .nhsuk-icon__arrow-right {
238+
margin-left: nhsuk-spacing(2);
239+
margin-right: -13px;
240+
}

‎app/components/pagination/macro.njk

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% macro appPagination(params) %}
2+
{%- include './template.njk' -%}
3+
{% endmacro %}

‎app/components/pagination/template.njk

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{% from "../../../node_modules/nhsuk-frontend/packages/macros/attributes.njk" import nhsukAttributes %}
2+
3+
{# There are 2 variants of this component, one for content pages which
4+
has only previous and next links including the titles of those pages,
5+
and one for navigating between pages of items, like search results.
6+
7+
The numbered variable sets which variant is being used, based on the
8+
presence of items (pages). #}
9+
{% set numbered = true if params.items %}
10+
11+
{# Arrow pointing left - used by both variants #}
12+
{%- macro _arrowPrevious() -%}
13+
<svg class="nhsuk-icon nhsuk-icon__arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
14+
<path d="M4.1 12.3l2.7 3c.2.2.5.2.7 0 .1-.1.1-.2.1-.3v-2h11c.6 0 1-.4 1-1s-.4-1-1-1h-11V9c0-.2-.1-.4-.3-.5h-.2c-.1 0-.3.1-.4.2l-2.7 3c0 .2 0 .4.1.6z"></path>
15+
</svg>
16+
{%- endmacro -%}
17+
18+
{# Arrow pointing right - used by both variants #}
19+
{%- macro _arrowNext() -%}
20+
<svg class="nhsuk-icon nhsuk-icon__arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
21+
<path d="M19.6 11.66l-2.73-3A.51.51 0 0 0 16 9v2H5a1 1 0 0 0 0 2h11v2a.5.5 0 0 0 .32.46.39.39 0 0 0 .18 0 .52.52 0 0 0 .37-.16l2.73-3a.5.5 0 0 0 0-.64z"></path>
22+
</svg>
23+
{%- endmacro -%}
24+
25+
{# Numbered page - included as a link within a list item. #}
26+
{%- macro _pageItem(item) -%}
27+
<li class="nhsuk-pagination--numbered__item {%- if item.current %} nhsuk-pagination--numbered__item--current{% endif %} {%- if item.ellipsis %} nhsuk-pagination--numbered__item--ellipses{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
28+
{% if item.ellipsis %}
29+
&ctdot;
30+
{% else %}
31+
<a class="nhsuk-pagination--numbered__link" href="{{ item.href }}" aria-label="{{ item.visuallyHiddenText | default("Page " + item.number) }}"
32+
{%- if item.current %} aria-current="page"{% endif %}
33+
{{- nhsukAttributes(item.attributes) }}>
34+
{{ item.number }}
35+
</a>
36+
{% endif %}
37+
</li>
38+
{%- endmacro -%}
39+
40+
{# Link for the previous or next or next page, displayed at either end of
41+
the numbered variant only, and including an arrow pointing left or right. #}
42+
{%- macro _arrowLink(link, type = "next") %}
43+
{% set arrowType = arrowPrevious if type == "prev" else arrowNext %}
44+
<div class="nhsuk-pagination--numbered__{{ type }}">
45+
<a class="nhsuk-pagination--numbered__link" href="{{ link }}" rel="{{ type }}">
46+
{%- if type == "prev" -%}
47+
{{ _arrowPrevious() }}
48+
{%- endif -%}
49+
{{ caller() | safe }}
50+
{%- if type == "next" -%}
51+
{{ _arrowNext() }}
52+
{%- endif -%}
53+
</a>
54+
</div>
55+
{% endmacro -%}
56+
57+
<nav class="nhsuk-pagination {{ "nhsuk-pagination--numbered" if numbered }}
58+
{%- if params.classes %} {{ params.classes }}{% endif %}" role="navigation" aria-label="Pagination"
59+
{{- nhsukAttributes(params.attributes) }}>
60+
61+
{%- if numbered %}
62+
{% if params.previousUrl %}
63+
{% call _arrowLink(params.previousUrl, "prev") -%}
64+
Previous<span class="nhsuk-u-visually-hidden"> page</span>
65+
{% endcall %}
66+
{% endif %}
67+
68+
<ul class="nhsuk-pagination__list--numbered">
69+
{% for item in params.items %}
70+
{{ _pageItem(item) | indent(2) }}
71+
{% endfor %}
72+
</ul>
73+
74+
{% if params.nextUrl %}
75+
{% call _arrowLink(params.nextUrl, "next") -%}
76+
Next<span class="nhsuk-u-visually-hidden"> page</span>
77+
{%- endcall %}
78+
{% endif %}
79+
80+
{%- else %}
81+
82+
<ul class="nhsuk-list nhsuk-pagination__list">
83+
{%- if params.previousUrl and params.previousPage %}
84+
<li class="nhsuk-pagination-item--previous">
85+
<a class="nhsuk-pagination__link nhsuk-pagination__link--prev" href="{{ params.previousUrl }}">
86+
<span class="nhsuk-pagination__title">Previous</span>
87+
<span class="nhsuk-u-visually-hidden">:</span>
88+
<span class="nhsuk-pagination__page">{{ params.previousPage }}</span>
89+
{{ _arrowPrevious() }}
90+
</a>
91+
</li>
92+
{%- endif %}
93+
{%- if params.nextUrl and params.nextPage %}
94+
<li class="nhsuk-pagination-item--next">
95+
<a class="nhsuk-pagination__link nhsuk-pagination__link--next" href="{{ params.nextUrl }}">
96+
<span class="nhsuk-pagination__title">Next</span>
97+
<span class="nhsuk-u-visually-hidden">:</span>
98+
<span class="nhsuk-pagination__page">{{ params.nextPage }}</span>
99+
{{ _arrowNext() }}
100+
</a>
101+
</li>
102+
103+
{%- endif %}
104+
</ul>
105+
{%- endif %}
106+
</nav>

0 commit comments

Comments
 (0)