Skip to content

Commit 2807c2a

Browse files
DemotiveDemotive
authored
Merge pull request #16 from NHSDigital/batches-team-crit-iteration
Batches team crit iteration
2 parents d72298e + 13fc94a commit 2807c2a

4 files changed

Lines changed: 155 additions & 117 deletions

File tree

‎app/assets/sass/main.scss‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
tbody {
4141
display: flex;
4242
width: 100%;
43-
height: 3rem;
43+
min-height: 2rem;
4444
overflow: hidden;
4545
}
4646
/* Each row becomes a segment, sized by its proportion of the total */
@@ -50,6 +50,10 @@
5050
justify-content: left;
5151
overflow: hidden;
5252
}
53+
/* Each row becomes a segment, sized by its proportion of the total */
54+
tbody td {
55+
padding: 0;
56+
}
5357
}
5458
.app-chart-bar-segmented-horizontal--legend {
5559
@include nhsuk-media-query($from: tablet) {
@@ -76,6 +80,23 @@
7680
}
7781
}
7882

83+
// alternate to stacked bar?
84+
.app-segmented-cards {
85+
.nhsuk-card__content {
86+
display: flex;
87+
gap: 8px;
88+
@include nhsuk-responsive-padding(3);
89+
}
90+
.swatch {
91+
display: inline-block;
92+
width: 2rem;
93+
height: 2rem;
94+
flex-shrink: 0;
95+
margin-right: 6px;
96+
vertical-align: middle;
97+
}
98+
}
99+
79100
.app-batch-overview-sparkline {
80101
background-color: #fff;
81102
}
@@ -89,7 +110,6 @@
89110
.app-simple-progress-bar {
90111
width: 100%;
91112
min-width: 200px;
92-
height: 3rem;
93113

94114
&.--thin {
95115
height: auto;

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

Lines changed: 85 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -31,34 +31,34 @@
3131
<section>
3232
<div class="nhsuk-grid-row">
3333
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-6">
34-
<span class="nhsuk-caption-m">BDE-NTDD-202601011200</span>
34+
<span class="nhsuk-caption-m">BDE-NTDD-20260201</span>
3535
<div class="app-card-editable">
3636
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-1">
37-
Harrogate Practices Feb-March 2026 Round 13
37+
Malton Practices Apr-May 26 NTDD RD 13
3838
</h1>
3939
<p class="nhsuk-u-padding-right-5 nhsuk-u-margin-bottom-1"><a href="#">Change</a></p>
4040
</div>
41-
<span class="nhsuk-caption-m">Standard (NTDD) batch imported 1st January 2026</span>
41+
<span class="nhsuk-caption-m">Imported 2 February 2026</span>
4242
</div>
4343
</div>
4444

4545
<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>
46+
<div class="nhsuk-grid-column-one-third">
47+
{% call card({
48+
clickable: true,
49+
heading: "715",
50+
headingClasses: "nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1"
51+
}) %}
52+
<p>
53+
<a href="#" class="nhsuk-card__link"><span class="nhsuk-u-visually-hidden">715</span> total participants</a>
54+
</p>
55+
{% endcall %}
5756
</div>
58-
<div class="nhsuk-grid-column-three-quarters">
57+
<div class="nhsuk-grid-column-two-thirds">
5958
<ul class="nhsuk-list">
60-
<li><a href="#">16 postal outcodes</a></li>
61-
<li><a href="#">4 GP practices</a></li>
59+
<li>Standard (NTDD) batch</li>
60+
<li><a href="#">8 postal outcodes</a></li>
61+
<li><a href="#">2 GP practices</a></li>
6262
</ul>
6363
</div>
6464
</div>
@@ -72,20 +72,20 @@ <h2 class="nhsuk-card__heading nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1">
7272
<div class="nhsuk-grid-column-full">
7373

7474
<h2 class="nhsuk-heading-l">Participant breakdown</h2>
75-
75+
<!--
7676
<figure class="app-chart-bar-segmented-horizontal">
7777
<figcaption class="nhsuk-u-visually-hidden">Participant breakdown by type</figcaption>
7878
7979
<style>
8080
/* Each row takes up an equal share — adjust flex values to reflect real proportions */
8181
tbody tr:nth-child(1) {
82-
flex: 80;
82+
flex: 98;
8383
}
8484
tbody tr:nth-child(2) {
85-
flex: 15;
85+
flex: 1;
8686
}
8787
tbody tr:nth-child(3) {
88-
flex: 5;
88+
flex: 1;
8989
}
9090
</style>
9191
@@ -101,33 +101,36 @@ <h2 class="nhsuk-heading-l">Participant breakdown</h2>
101101
<td class="nhsuk-u-visually-hidden">
102102
Standard
103103
</td>
104-
<td>
104+
<td class="nhsuk-u-padding-2">
105105
{{ tag({
106-
text: "1970",
107-
classes: "nhsuk-tag--green nhsuk-u-margin-left-2"
106+
text: "700",
107+
classes: "nhsuk-tag--green"
108108
}) }}
109+
<span class="nhsuk-u-visually-hidden">700</span>
109110
</td>
110111
</tr>
111112
<tr class="hatching--special">
112113
<td class="nhsuk-u-visually-hidden">
113114
Special Requirements
114115
</td>
115-
<td>
116+
<td class="nhsuk-u-padding-2">
116117
{{ tag({
117-
text: "12",
118-
classes: "nhsuk-tag--orange nhsuk-u-margin-left-2"
118+
text: "10",
119+
classes: "nhsuk-tag--orange"
119120
}) }}
121+
<span class="nhsuk-u-visually-hidden">10</span>
120122
</td>
121123
</tr>
122124
<tr class="hatching--high-risk">
123125
<td class="nhsuk-u-visually-hidden">
124126
Very High Risk
125127
</td>
126-
<td>
128+
<td class="nhsuk-u-padding-2">
127129
{{ tag({
128130
text: "5",
129-
classes: "nhsuk-tag--red nhsuk-u-margin-left-2"
131+
classes: "nhsuk-tag--red"
130132
}) }}
133+
<span class="nhsuk-u-visually-hidden">5</span>
131134
</td>
132135
</tr>
133136
</tbody>
@@ -137,14 +140,14 @@ <h2 class="nhsuk-heading-l">Participant breakdown</h2>
137140
<li>
138141
<div class="swatch hatching--standard" aria-hidden="true"></div>
139142
<div>
140-
<a href="#">1970 standard</a><br>
143+
<a href="#">700 standard</a><br>
141144
<span class="key-label nhsuk-body-s">ready to appoint</span>
142145
</div>
143146
</li>
144147
<li>
145148
<div class="swatch hatching--special" aria-hidden="true"></div>
146149
<div>
147-
<a href="#">12 special requirements</a><br>
150+
<a href="#">10 special requirements</a><br>
148151
<span class="key-label nhsuk-body-s">reasonable adjustments etc.</span>
149152
</div>
150153
</li>
@@ -156,8 +159,44 @@ <h2 class="nhsuk-heading-l">Participant breakdown</h2>
156159
</div>
157160
</li>
158161
</ul>
159-
160162
</figure>
163+
-->
164+
<ul class="nhsuk-grid-row nhsuk-card-group app-segmented-cards">
165+
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
166+
{% call card({
167+
clickable: true
168+
}) %}
169+
<div class="swatch hatching--standard" aria-hidden="true"></div>
170+
<div>
171+
<a href="#" class="nhsuk-card__link">700 standard</a><br>
172+
<span class="nhsuk-body-s nhsuk-u-margin-bottom-0">ready to appoint</span>
173+
</div>
174+
{% endcall %}
175+
</li>
176+
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
177+
{% call card({
178+
clickable: true
179+
}) %}
180+
<div class="swatch hatching--special" aria-hidden="true"></div>
181+
<div>
182+
<a href="#" class="nhsuk-card__link">10 special requirements</a><br>
183+
<span class="nhsuk-body-s nhsuk-u-margin-bottom-0">reasonable adjustments etc.</span>
184+
</div>
185+
{% endcall %}
186+
</li>
187+
<li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
188+
{% call card({
189+
clickable: true
190+
}) %}
191+
<div class="swatch hatching--high-risk" aria-hidden="true"></div>
192+
<div>
193+
<a href="#" class="nhsuk-card__link">5 very high risk (VHR)</a><br>
194+
<span class="nhsuk-body-s nhsuk-u-margin-bottom-0">ready to reconcile</span>
195+
</div>
196+
{% endcall %}
197+
</li>
198+
</il>
199+
161200
</div>
162201
</div>
163202

@@ -181,13 +220,13 @@ <h3 class="nhsuk-heading-s">Participant distribution by next test due date</h3>
181220
<div>
182221
<span class="nhsuk-caption-s">Earliest next test due date:</span>
183222
<h3 class="nhsuk-heading-xs nhsuk-u-font-weight-normal">
184-
28 February 2026
223+
6 April 2026
185224
</h3>
186225
</div>
187226
<div>
188227
<span class="nhsuk-caption-s">Latest:</span>
189228
<h3 class="nhsuk-heading-xs nhsuk-u-font-weight-normal">
190-
31 March 2026
229+
27 May 2026
191230
</h3>
192231
</div>
193232
</div>
@@ -201,10 +240,10 @@ <h3 class="nhsuk-heading-xs nhsuk-u-font-weight-normal">
201240
<div class="nhsuk-grid-row">
202241
<div class="nhsuk-grid-column-full">
203242
<h2 class="nhsuk-heading-l">Batch progress</h2>
204-
<div class="app-simple-progress-bar --generic nhsuk-u-padding-top-2" style="--percentage: 99%;">
243+
<div class="app-simple-progress-bar --generic nhsuk-u-padding-2" style="--percentage: 98%;">
205244
{{ tag({
206-
text: "1970 of 1987 dealt with",
207-
classes: "nhsuk-tag--blue nhsuk-u-margin-left-2"
245+
text: "704 of 715 dealt with",
246+
classes: "nhsuk-tag--blue"
208247
}) }}
209248
</div>
210249
</div>
@@ -218,16 +257,13 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Appoint
218257
</div>
219258
<div class="nhsuk-grid-row nhsuk-u-margin-bottom-3">
220259
<div class="nhsuk-grid-column-two-thirds">
221-
<div class="app-simple-progress-bar --standard nhsuk-u-padding-top-2" style="--percentage: 100%;">
260+
<div class="app-simple-progress-bar --standard nhsuk-u-padding-2" style="--percentage: 100%;">
222261
{{ tag({
223-
text: "100% appointed",
224-
classes: "nhsuk-tag--green nhsuk-u-margin-left-2"
262+
text: "700 of 700 appointed",
263+
classes: "nhsuk-tag--green"
225264
}) }}
226265
</div>
227266
</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>
231267
</div>
232268

233269
<div class="nhsuk-grid-row">
@@ -237,16 +273,13 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Appoint
237273
</div>
238274
<div class="nhsuk-grid-row">
239275
<div class="nhsuk-grid-column-two-thirds">
240-
<div class="app-simple-progress-bar --special nhsuk-u-padding-top-2" style="--percentage: 0%;">
276+
<div class="app-simple-progress-bar --special nhsuk-u-padding-2" style="--percentage: 40%;">
241277
{{ tag({
242-
text: "0% appointed",
243-
classes: "nhsuk-tag--orange nhsuk-u-margin-left-2"
278+
text: "4 of 10 appointed",
279+
classes: "nhsuk-tag--orange"
244280
}) }}
245281
</div>
246282
</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>
250283
</div>
251284

252285
<div class="nhsuk-grid-row">
@@ -257,16 +290,13 @@ <h2 class="nhsuk-heading-s nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-2">Reconci
257290
</div>
258291
<div class="nhsuk-grid-row">
259292
<div class="nhsuk-grid-column-two-thirds">
260-
<div class="app-simple-progress-bar --vhr nhsuk-u-padding-top-2" style="--percentage: 0%;">
293+
<div class="app-simple-progress-bar --vhr nhsuk-u-padding-2" style="--percentage: 0%;">
261294
{{ tag({
262-
text: "0% reconciled",
263-
classes: "nhsuk-tag--red nhsuk-u-margin-left-2"
295+
text: "0 of 5 reconciled",
296+
classes: "nhsuk-tag--red"
264297
}) }}
265298
</div>
266299
</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>
270300
</div>
271301
</section>
272302

0 commit comments

Comments
 (0)