Skip to content

Commit a7f2822

Browse files
DemotiveDemotive
committed
Adding a card alternate for breakdown
1 parent cbec4ef commit a7f2822

2 files changed

Lines changed: 64 additions & 96 deletions

File tree

‎app/assets/sass/main.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,22 @@
8080
}
8181
}
8282

83+
.app-segmented-cards {
84+
.nhsuk-card__content {
85+
display: flex;
86+
gap: 8px;
87+
@include nhsuk-responsive-padding(3);
88+
}
89+
.swatch {
90+
display: inline-block;
91+
width: 2rem;
92+
height: 2rem;
93+
flex-shrink: 0;
94+
margin-right: 6px;
95+
vertical-align: middle;
96+
}
97+
}
98+
8399
.app-batch-overview-sparkline {
84100
background-color: #fff;
85101
}

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

Lines changed: 48 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -43,19 +43,18 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-1">
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-
715
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">
6059
<li>Standard (NTDD) batch</li>
6160
<li><a href="#">8 postal outcodes</a></li>
@@ -137,89 +136,6 @@ <h2 class="nhsuk-heading-l">Participant breakdown</h2>
137136
</tbody>
138137
</table>
139138

140-
<!--
141-
<style>
142-
table.bar-chart {
143-
border-collapse: collapse;
144-
width: 100%;
145-
}
146-
147-
table.bar-chart tbody {
148-
display: flex;
149-
flex-direction: row;
150-
align-items: flex-end;
151-
gap: 24px;
152-
height: 100px;
153-
}
154-
155-
table.bar-chart tbody tr {
156-
display: flex;
157-
flex-direction: column;
158-
align-items: center;
159-
justify-content: flex-end;
160-
flex: 1;
161-
height: 100%;
162-
position: relative;
163-
}
164-
165-
table.bar-chart tbody tr::before {
166-
content: '';
167-
display: block;
168-
width: 100%;
169-
height: calc(var(--value) / var(--max) * 100%);
170-
}
171-
tbody tr:nth-child(1)::before {
172-
background: var(--standard-chart-hatch);
173-
}
174-
tbody tr:nth-child(2)::before {
175-
background: var(--special-chart-hatch);
176-
}
177-
tbody tr:nth-child(3)::before {
178-
background: var(--vhr-chart-hatch-1), var(--vhr-chart-hatch-2);
179-
}
180-
table.bar-chart tbody td.bar-label {
181-
}
182-
183-
table.bar-chart tbody td.bar-value {
184-
}
185-
</style>
186-
<table class="bar-chart" aria-describedby="chart-key">
187-
<thead class="nhsuk-u-visually-hidden">
188-
<tr>
189-
<th scope="col">Category</th>
190-
<th scope="col">Count</th>
191-
</tr>
192-
</thead>
193-
<tbody>
194-
<tr style="--value: 700; --max: 700;">
195-
<td class="bar-value">
196-
{{ tag({
197-
text: "700 standard",
198-
classes: "nhsuk-tag--green"
199-
}) }}
200-
</td>
201-
</tr>
202-
<tr style="--value: 10; --max: 700;">
203-
<td class="bar-value">
204-
{{ tag({
205-
text: "10 special requirements",
206-
classes: "nhsuk-tag--orange"
207-
}) }}
208-
</td>
209-
</tr>
210-
<tr style="--value: 5; --max: 700;">
211-
<td class="bar-value">
212-
{{ tag({
213-
text: "5 very high risk (VHR)",
214-
classes: "nhsuk-tag--red"
215-
}) }}
216-
</td>
217-
</tr>
218-
</tbody>
219-
</table>
220-
-->
221-
222-
223139
<ul id="chart-key" aria-label="Chart key" class="nhsuk-list nhsuk-u-margin-0 app-chart-bar-segmented-horizontal--legend">
224140
<li>
225141
<div class="swatch hatching--standard" aria-hidden="true"></div>
@@ -243,8 +159,44 @@ <h2 class="nhsuk-heading-l">Participant breakdown</h2>
243159
</div>
244160
</li>
245161
</ul>
246-
247162
</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+
248200
</div>
249201
</div>
250202

0 commit comments

Comments
 (0)