Skip to content

Commit 3b270e6

Browse files
edwardhorsfordedwardhorsford
authored
Move automatic repeats question to separate page (#272)
* Move automatic repeats question to separate page * Populate with mammogram image sets * Move image display to include, adopt styles from image reading * Swap card sass so the columns look better * Add image specific seed profile and make sure it gets applied to in-flight applications
1 parent 1b3605b commit 3b270e6

14 files changed

Lines changed: 595 additions & 526 deletions

File tree

‎app/assets/sass/_misc.scss‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,5 @@
11
@use "nhsuk-frontend/dist/nhsuk/core" as *;
22

3-
.app-mammogram-image--placeholder {
4-
background-color: black;
5-
width: 125px;
6-
// height: 150px;
7-
8-
outline: 1px solid rgba(255, 255, 255, 0.2);
9-
10-
p {
11-
color: white;
12-
margin-left: 5px;
13-
}
14-
}
15-
16-
.app-mammogram-image--missing {
17-
background-color: nhsuk-colour("grey-5");
18-
display: flex;
19-
align-items: center;
20-
justify-content: center;
21-
width: 125px;
22-
height: 187.5px;
23-
border: 2px dashed nhsuk-colour("grey-2");
24-
}
25-
26-
.app-mammogram-image--missing-content {
27-
text-align: center;
28-
font-size: 16px;
29-
}
30-
313
// Progressive enhancement helpers
324
.app-js-only {
335
display: none;

‎app/assets/sass/components/_mammogram-images.scss‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
@use "nhsuk-frontend/dist/nhsuk/core" as *;
2+
3+
// app/assets/sass/components/_mammogram-images.scss
4+
// Styles for mammogram image display - used across images, reading, and other views
5+
6+
// Two-card flex layout for breast image cards - sizes to content not grid column
7+
.app-mammogram-cards {
8+
display: flex;
9+
flex-wrap: nowrap;
10+
@include nhsuk-responsive-margin(4, "bottom");
11+
}
12+
13+
.app-mammogram-card {
14+
// Size to content (thumbnail + card padding), but cap at 50% on narrow viewports
15+
width: fit-content;
16+
max-width: 50%;
17+
min-width: 0;
18+
19+
&:first-child {
20+
@include nhsuk-responsive-margin(4, "right");
21+
}
22+
}
23+
24+
// View wrapper — one per standard mammogram view (e.g. RCC, RMLO)
25+
.app-mammogram-view--right,
26+
.app-mammogram-view--left {
27+
// Spacing between consecutive views
28+
&:not(:last-child) {
29+
@include nhsuk-responsive-margin(4, "bottom");
30+
}
31+
32+
// Spacing between multiple images of the same view
33+
.app-mammogram-thumbnail__image-wrapper + .app-mammogram-thumbnail__image-wrapper {
34+
@include nhsuk-responsive-margin(4, "top");
35+
}
36+
}
37+
38+
// Headings (view label text e.g. "1× RCC") align towards centre
39+
.app-mammogram-view--right h3 {
40+
text-align: right;
41+
}
42+
43+
// Thumbnail grid for the reading opinion page
44+
.app-mammogram-thumbnails {
45+
display: inline-grid;
46+
grid-template-columns: auto auto;
47+
gap: 8px;
48+
}
49+
50+
// Right and left breast thumbnail columns
51+
.app-mammogram-thumbnail--right {
52+
display: flex;
53+
flex-direction: column;
54+
align-items: flex-end;
55+
}
56+
57+
.app-mammogram-thumbnail--left {
58+
display: flex;
59+
flex-direction: column;
60+
align-items: flex-start;
61+
}
62+
63+
// Individual image wrapper
64+
.app-mammogram-thumbnail__image-wrapper {
65+
position: relative;
66+
// Scales to fill card width, up to the natural thumbnail size
67+
width: 100%;
68+
max-width: 120px;
69+
aspect-ratio: 4 / 5;
70+
background-color: #000;
71+
overflow: hidden;
72+
display: flex;
73+
align-items: flex-start;
74+
}
75+
76+
// Right breast images align right (inwards), left breast align left (inwards)
77+
.app-mammogram-thumbnail--right .app-mammogram-thumbnail__image-wrapper {
78+
justify-content: flex-end;
79+
}
80+
81+
.app-mammogram-thumbnail--left .app-mammogram-thumbnail__image-wrapper {
82+
justify-content: flex-start;
83+
}
84+
85+
// Large size variant - used on dedicated image pages where thumbnails are primary content
86+
.app-mammogram-thumbnail__image-wrapper--large {
87+
max-width: 200px;
88+
89+
.app-mammogram-thumbnail__label {
90+
font-size: 18px;
91+
padding: 3px 10px;
92+
}
93+
}
94+
95+
.app-mammogram-thumbnail__image {
96+
max-width: 100%;
97+
max-height: 100%;
98+
display: block;
99+
cursor: default;
100+
}
101+
102+
// Slight smoothing for diagram thumbnails to reduce moiré
103+
.app-mammogram-thumbnail__image--diagram {
104+
filter: blur(0.5px);
105+
}
106+
107+
// Blue label badge overlaid on the image (e.g. "RCC")
108+
.app-mammogram-thumbnail__label {
109+
position: absolute;
110+
top: 4px;
111+
background-color: nhsuk-colour("blue");
112+
color: #fff;
113+
padding: 2px 6px;
114+
font-size: 11px;
115+
font-weight: 600;
116+
z-index: 1;
117+
}
118+
119+
// Labels align to outer edge - right breast labels on left, left breast labels on right
120+
.app-mammogram-thumbnail--right .app-mammogram-thumbnail__label {
121+
left: 4px;
122+
}
123+
124+
.app-mammogram-thumbnail--left .app-mammogram-thumbnail__label {
125+
right: 4px;
126+
}
127+
128+
// Missing image placeholder
129+
.app-mammogram-thumbnail__missing {
130+
width: 100%;
131+
height: 100%;
132+
border: 2px dashed nhsuk-colour("grey-2");
133+
background-color: nhsuk-colour("grey-5");
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
box-sizing: border-box;
138+
}
139+
140+
.app-mammogram-thumbnail__missing-text {
141+
font-size: 16px;
142+
color: nhsuk-colour("grey-2");
143+
}
144+
145+
// Zoom overlay for expanded thumbnail view
146+
.app-mammogram-zoom {
147+
position: fixed;
148+
top: 0;
149+
left: 0;
150+
right: 0;
151+
bottom: 0;
152+
background-color: rgba(0, 0, 0, 0.95);
153+
z-index: 9999;
154+
display: flex;
155+
align-items: center;
156+
justify-content: center;
157+
cursor: default;
158+
}
159+
160+
.app-mammogram-zoom__image {
161+
max-width: 95%;
162+
max-height: 95%;
163+
object-fit: contain;
164+
}
165+
166+
.app-mammogram-zoom__label {
167+
position: absolute;
168+
top: 16px;
169+
left: 16px;
170+
background-color: nhsuk-colour("blue");
171+
color: #fff;
172+
padding: 8px 16px;
173+
font-size: 14px;
174+
font-weight: 600;
175+
}

‎app/assets/sass/components/_reading.scss‎

Lines changed: 0 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -11,133 +11,6 @@
1111
padding: 10px;
1212
}
1313

14-
// Mammogram thumbnail grid for reading pages
15-
.app-mammogram-thumbnails {
16-
display: inline-grid;
17-
grid-template-columns: auto auto;
18-
gap: 8px;
19-
}
20-
21-
.app-mammogram-thumbnail--right {
22-
display: flex;
23-
flex-direction: column;
24-
align-items: flex-end;
25-
gap: 8px;
26-
}
27-
28-
.app-mammogram-thumbnail--left {
29-
display: flex;
30-
flex-direction: column;
31-
align-items: flex-start;
32-
gap: 8px;
33-
}
34-
35-
// Individual image wrapper (contains image + label)
36-
.app-mammogram-thumbnail__image-wrapper {
37-
position: relative;
38-
// Fixed dimensions for consistent sizing
39-
width: 120px;
40-
height: 150px;
41-
background-color: #000;
42-
overflow: hidden;
43-
// Use flexbox for image alignment
44-
display: flex;
45-
align-items: flex-start;
46-
}
47-
48-
// Right breast images align right (inwards), left breast align left (inwards)
49-
.app-mammogram-thumbnail--right .app-mammogram-thumbnail__image-wrapper {
50-
justify-content: flex-end;
51-
}
52-
53-
.app-mammogram-thumbnail--left .app-mammogram-thumbnail__image-wrapper {
54-
justify-content: flex-start;
55-
}
56-
57-
.app-mammogram-thumbnail__image {
58-
max-width: 100%;
59-
max-height: 100%;
60-
display: block;
61-
cursor: default;
62-
}
63-
64-
// Slight smoothing for diagram thumbnails to reduce moiré
65-
.app-mammogram-thumbnail__image--diagram {
66-
filter: blur(0.5px);
67-
}
68-
69-
.app-mammogram-thumbnail__label {
70-
position: absolute;
71-
top: 4px;
72-
background-color: nhsuk-colour("blue");
73-
color: #fff;
74-
padding: 2px 6px;
75-
font-size: 11px;
76-
font-weight: 600;
77-
z-index: 1;
78-
}
79-
80-
// Labels align to outer edge - right breast labels on left, left breast labels on right
81-
.app-mammogram-thumbnail--right .app-mammogram-thumbnail__label {
82-
left: 4px;
83-
}
84-
85-
.app-mammogram-thumbnail--left .app-mammogram-thumbnail__label {
86-
right: 4px;
87-
}
88-
89-
// Missing image placeholder
90-
.app-mammogram-thumbnail__missing {
91-
width: 100%;
92-
height: 100%;
93-
border: 2px dashed nhsuk-colour("grey-2");
94-
background-color: nhsuk-colour("grey-5");
95-
display: flex;
96-
align-items: center;
97-
justify-content: center;
98-
box-sizing: border-box;
99-
}
100-
101-
.app-mammogram-thumbnail__missing-text {
102-
font-size: 12px;
103-
color: nhsuk-colour("grey-2");
104-
}
105-
106-
// Zoom overlay for thumbnails
107-
.app-mammogram-zoom {
108-
position: fixed;
109-
top: 0;
110-
left: 0;
111-
right: 0;
112-
bottom: 0;
113-
background-color: rgba(0, 0, 0, 0.95);
114-
z-index: 9999;
115-
display: flex;
116-
align-items: center;
117-
justify-content: center;
118-
cursor: default;
119-
}
120-
121-
.app-mammogram-zoom__image {
122-
max-width: 95%;
123-
max-height: 95%;
124-
object-fit: contain;
125-
}
126-
127-
.app-mammogram-zoom__label {
128-
position: absolute;
129-
top: 16px;
130-
left: 16px;
131-
background-color: nhsuk-colour("blue");
132-
color: #fff;
133-
padding: 8px 16px;
134-
font-size: 14px;
135-
font-weight: 600;
136-
}
137-
138-
// Todo: should this be merged with app-status-bar.scss?
139-
// Todo: otherwise refctor so classes aren't created with &
140-
14114
.app-reading-status {
14215
background-color: nhsuk-shade(nhsuk-colour("blue"), 40%);
14316
color: $nhsuk-reverse-text-colour;

‎app/assets/sass/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $nhsuk-page-width: 1260px;
2020
@forward "components/status-bar";
2121
@forward "components/summary-card";
2222
@forward "components/reading";
23+
@forward "components/mammogram-images";
2324
@forward "components/environment";
2425

2526
@forward "components/overrides";

‎app/lib/generators/seed-profiles.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,35 @@ const SEED_DATA_PROFILE_DEFINITIONS = [
247247
probabilityOfSymptoms: 1
248248
}
249249
}
250+
},
251+
{
252+
key: 'imageIssues',
253+
label: 'Image issues',
254+
description:
255+
'High rates of extra images, technical repeats, incomplete and imperfect mammograms',
256+
settings: {
257+
mammogram: {
258+
scenarioWeights: {
259+
standard: 0.1,
260+
extraImages: 0.25,
261+
technicalRepeat: 0.25,
262+
incomplete: 0.25,
263+
incompleteImperfect: 0.15
264+
},
265+
imperfectChanceForTechnicalOrIncomplete: 0.6,
266+
notesForReaderChanceWithoutImperfect: 0.2
267+
},
268+
imageSetSelection: {
269+
contextualTagWeights: {
270+
default: {
271+
normal: 0.3,
272+
abnormal: 0.2,
273+
indeterminate: 0.1,
274+
technical: 0.4
275+
}
276+
}
277+
}
278+
}
250279
}
251280
]
252281

0 commit comments

Comments
 (0)