Skip to content

Commit 2f2a503

Browse files
DemotiveDemotive
committed
super rough listing and in-progress prototypes
1 parent fbd380d commit 2f2a503

6 files changed

Lines changed: 447 additions & 42 deletions

File tree

‎app/assets/sass/main.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
// Batch (for now) view bar charts and legends
1818

1919
:root {
20+
--generic-chart-hatch: repeating-linear-gradient(45deg, #005eb8, #005eb8 1px, #ccdff1 1px, #ccdff1 12px);
2021
--standard-chart-hatch: repeating-linear-gradient(45deg, #004c23, #004c23 1px, #cce5d8 1px, #cce5d8 12px);
2122
--special-chart-hatch: repeating-linear-gradient(-45deg, #4d3708, #4d3708 1px, #ffdc8e 1px, #ffdc8e 12px);
2223
--vhr-chart-hatch-1: repeating-linear-gradient(-45deg, #6b140e, #6b140e 1px, transparent 1px, transparent 12px);
@@ -87,8 +88,17 @@
8788

8889
.app-simple-progress-bar {
8990
width: 100%;
91+
min-width: 200px;
9092
height: 3rem;
9193

94+
&.--thin {
95+
height: auto;
96+
}
97+
98+
&.--generic {
99+
background: var(--generic-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
100+
}
101+
92102
&.--standard {
93103
background: var(--standard-chart-hatch) 0 0 / var(--percentage) 100% no-repeat,#fff;
94104
}

‎app/views/_includes/primary-navigation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
active: activeItem === "Dashboard"
3131
},
3232
{
33-
href: "#",
33+
href: "/batches/",
3434
text: "Manage batches",
3535
active: activeItem === "Manage batches"
3636
},
@@ -40,7 +40,7 @@
4040
active: activeItem === "Manage clinics"
4141
},
4242
{
43-
href: "#",
43+
href: "/bso-objects/",
4444
text: "Manage other stuff",
4545
active: activeItem === "Manage other stuff"
4646
},

‎app/views/batches/batch-detail-in-progress.html‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
2+
{% extends 'layout.html' %}
3+
4+
5+
{% set pageName = "West Berks mobile screening unit name" %}
6+
7+
{% from "_includes/primary-navigation.html" import primaryNavigation %}
8+
{% block header %}
9+
{{ primaryNavigation("Manage batches", serviceName) }}
10+
{% endblock %}
11+
12+
{% block beforeContent %}
13+
{{ breadcrumb({
14+
items: [
15+
{
16+
href: "#",
17+
text: "Home"
18+
},
19+
{
20+
href: "/batches/",
21+
text: "Manage batches"
22+
}
23+
]
24+
}) }}
25+
{% endblock %}
26+
27+
<!-- For adding page content -->
28+
<!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
29+
{% block content %}
30+
31+
<section>
32+
<div class="nhsuk-grid-row">
33+
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-6">
34+
<span class="nhsuk-caption-m">BDE-NTDD-202601011200</span>
35+
<div class="app-card-editable">
36+
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-1">
37+
Harrogate Practices Feb-March 2026 Round 13
38+
</h1>
39+
<p class="nhsuk-u-padding-right-5 nhsuk-u-margin-bottom-1"><a href="#">Change</a></p>
40+
</div>
41+
<span class="nhsuk-caption-m">Standard (NTDD) batch imported 1st January 2026</span>
42+
</div>
43+
</div>
44+
45+
<div class="nhsuk-grid-row">
46+
<div class="nhsuk-grid-column-one-quarter">
47+
<div class="nhsuk-card nhsuk-card--clickable">
48+
<div class="nhsuk-card__content nhsuk-u-padding-3">
49+
<h2 class="nhsuk-card__heading nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1">
50+
<span role="text">
51+
1987
52+
</span>
53+
</h2>
54+
<a href="#" class="nhsuk-card__link">total participants</a>
55+
</div>
56+
</div>
57+
</div>
58+
<div class="nhsuk-grid-column-three-quarters">
59+
<ul class="nhsuk-list">
60+
<li><a href="#">16 postal outcodes</a></li>
61+
<li><a href="#">4 GP practices</a></li>
62+
</ul>
63+
</div>
64+
</div>
65+
66+
</section>
67+
68+
<hr class="nhsuk-u-margin-0 nhsuk-u-margin-bottom-4">
69+
70+
<section>
71+
<div class="nhsuk-grid-row">
72+
<div class="nhsuk-grid-column-full">
73+
74+
<h2 class="nhsuk-heading-l">Participant breakdown</h2>
75+
76+
<figure class="app-chart-bar-segmented-horizontal">
77+
<figcaption class="nhsuk-u-visually-hidden">Participant breakdown by type</figcaption>
78+
79+
<style>
80+
/* Each row takes up an equal share — adjust flex values to reflect real proportions */
81+
tbody tr:nth-child(1) {
82+
flex: 80;
83+
}
84+
tbody tr:nth-child(2) {
85+
flex: 15;
86+
}
87+
tbody tr:nth-child(3) {
88+
flex: 5;
89+
}
90+
</style>
91+
92+
<table aria-describedby="chart-key" class="nhsuk-u-margin-bottom-4">
93+
<thead class="nhsuk-u-visually-hidden">
94+
<tr>
95+
<th scope="col">Category</th>
96+
<th scope="col">Count</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
<tr class="hatching--standard">
101+
<td class="nhsuk-u-visually-hidden">
102+
Standard
103+
</td>
104+
<td>
105+
{{ tag({
106+
text: "1970",
107+
classes: "nhsuk-tag--green nhsuk-u-margin-left-2"
108+
}) }}
109+
</td>
110+
</tr>
111+
<tr class="hatching--special">
112+
<td class="nhsuk-u-visually-hidden">
113+
Special Requirements
114+
</td>
115+
<td>
116+
{{ tag({
117+
text: "12",
118+
classes: "nhsuk-tag--orange nhsuk-u-margin-left-2"
119+
}) }}
120+
</td>
121+
</tr>
122+
<tr class="hatching--high-risk">
123+
<td class="nhsuk-u-visually-hidden">
124+
Very High Risk
125+
</td>
126+
<td>
127+
{{ tag({
128+
text: "5",
129+
classes: "nhsuk-tag--red nhsuk-u-margin-left-2"
130+
}) }}
131+
</td>
132+
</tr>
133+
</tbody>
134+
</table>
135+
136+
<ul id="chart-key" aria-label="Chart key" class="nhsuk-list nhsuk-u-margin-0 app-chart-bar-segmented-horizontal--legend">
137+
<li>
138+
<div class="swatch hatching--standard" aria-hidden="true"></div>
139+
<div>
140+
<a href="#">1970 standard</a><br>
141+
<span class="key-label nhsuk-body-s">ready to import</span>
142+
</div>
143+
</li>
144+
<li>
145+
<div class="swatch hatching--special" aria-hidden="true"></div>
146+
<div>
147+
<a href="#">12 special requirements</a><br>
148+
<span class="key-label nhsuk-body-s">reasonable adjustments etc.</span>
149+
</div>
150+
</li>
151+
<li>
152+
<div class="swatch hatching--high-risk" aria-hidden="true"></div>
153+
<div>
154+
<a href="#">5 very high risk (VHR)</a><br>
155+
<span class="key-label nhsuk-body-s">ready to reconcile</span>
156+
</div>
157+
</li>
158+
</ul>
159+
160+
</figure>
161+
</div>
162+
</div>
163+
164+
<div class="nhsuk-grid-row">
165+
<div class="nhsuk-grid-column-full">
166+
<h3 class="nhsuk-heading-s">Participant distribution by next test due date</h3>
167+
</div>
168+
</div>
169+
<div class="nhsuk-grid-row">
170+
<div class="nhsuk-grid-column-full">
171+
<div class="app-batch-overview-sparkline">
172+
<svg viewBox="0 0 960 64" width="960" height="64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="display:block;">
173+
<defs>
174+
<clipPath id="clip"><rect width="960" height="64"/></clipPath>
175+
</defs>
176+
<polygon points="0,64 0,26 96,24 192,10 288,28 384,38 480,12 576,30 672,40 768,26 864,24 960,24 960,64" fill="rgba(0,94,184,0.25)" clip-path="url(#clip)"/>
177+
<polyline points="0,26 96,24 192,10 288,28 384,38 480,12 576,30 672,40 768,26 864,24 960,24" fill="none" stroke="#005eb8" stroke-width="3" stroke-linejoin="round" stroke-linecap="round" clip-path="url(#clip)"/>
178+
</svg>
179+
</div>
180+
<div class="app-u-one-left-one-right nhsuk-u-margin-top-3">
181+
<div>
182+
<span class="nhsuk-caption-s">Earliest next test due date:</span>
183+
<h3 class="nhsuk-heading-xs nhsuk-u-font-weight-normal">
184+
28 February 2026
185+
</h3>
186+
</div>
187+
<div>
188+
<span class="nhsuk-caption-s">Latest:</span>
189+
<h3 class="nhsuk-heading-xs nhsuk-u-font-weight-normal">
190+
31 March 2026
191+
</h3>
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
</section>
197+
198+
<hr class="nhsuk-u-margin-0 nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-4">
199+
200+
<section>
201+
<div class="nhsuk-grid-row">
202+
<div class="nhsuk-grid-column-full">
203+
<h2 class="nhsuk-heading-l">Batch progress</h2>
204+
<div class="app-simple-progress-bar --generic nhsuk-u-padding-top-2" style="--percentage: 99%;">
205+
{{ tag({
206+
text: "1970 of 1987 dealt with",
207+
classes: "nhsuk-tag--blue nhsuk-u-margin-left-2"
208+
}) }}
209+
</div>
210+
</div>
211+
</div>
212+
213+
<div class="nhsuk-grid-row">
214+
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-2">
215+
<h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Appointed</h2>
216+
<a href="#" class="nhsuk-u-font-size-19">Standard</a>
217+
</div>
218+
</div>
219+
<div class="nhsuk-grid-row nhsuk-u-margin-bottom-3">
220+
<div class="nhsuk-grid-column-two-thirds">
221+
<div class="app-simple-progress-bar --standard nhsuk-u-padding-top-2" style="--percentage: 100%;">
222+
{{ tag({
223+
text: "100% appointed",
224+
classes: "nhsuk-tag--green nhsuk-u-margin-left-2"
225+
}) }}
226+
</div>
227+
</div>
228+
<div class="nhsuk-grid-column-one-third">
229+
<p class="nhsuk-u-margin-0 nhsuk-u-padding-top-2">1970 of 1970 appointed</p>
230+
</div>
231+
</div>
232+
233+
<div class="nhsuk-grid-row">
234+
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-2">
235+
<a href="#" class="nhsuk-u-font-size-19">Special requirements</a>
236+
</div>
237+
</div>
238+
<div class="nhsuk-grid-row">
239+
<div class="nhsuk-grid-column-two-thirds">
240+
<div class="app-simple-progress-bar --special nhsuk-u-padding-top-2" style="--percentage: 0%;">
241+
{{ tag({
242+
text: "0% appointed",
243+
classes: "nhsuk-tag--orange nhsuk-u-margin-left-2"
244+
}) }}
245+
</div>
246+
</div>
247+
<div class="nhsuk-grid-column-one-third">
248+
<p class="nhsuk-u-margin-0 nhsuk-u-padding-top-2">0 of 12 appointed</p>
249+
</div>
250+
</div>
251+
252+
<div class="nhsuk-grid-row">
253+
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-2">
254+
<h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Reconciled</h2>
255+
<a href="#" class="nhsuk-u-font-size-19">Very high risk (VHR)</a>
256+
</div>
257+
</div>
258+
<div class="nhsuk-grid-row">
259+
<div class="nhsuk-grid-column-two-thirds">
260+
<div class="app-simple-progress-bar --vhr nhsuk-u-padding-top-2" style="--percentage: 0%;">
261+
{{ tag({
262+
text: "0% reconciled",
263+
classes: "nhsuk-tag--red nhsuk-u-margin-left-2"
264+
}) }}
265+
</div>
266+
</div>
267+
<div class="nhsuk-grid-column-one-third">
268+
<p class="nhsuk-u-margin-0 nhsuk-u-padding-top-2">0 of 5 reconciled</p>
269+
</div>
270+
</div>
271+
</section>
272+
273+
<hr class="nhsuk-u-margin-0 nhsuk-u-margin-top-6 nhsuk-u-margin-bottom-4">
274+
275+
<section>
276+
<div class="nhsuk-grid-row">
277+
<div class="nhsuk-grid-column-two-thirds">
278+
{% call details({
279+
summaryHtml: '<h2 class="nhsuk-body-m">Clinics associated with this batch</h2>'
280+
}) %}
281+
<p>No clinics associated with this batch</p>
282+
{% endcall %}
283+
</div>
284+
</div>
285+
</section>
286+
287+
{% endblock %}

0 commit comments

Comments
 (0)