Skip to content

Commit 1ae4e1a

Browse files
rivaleeedwardhorsford
rivalee
and
edwardhorsford
authored
Add record breast features medical annotation component (#104)
* Add record breast features medical annotation component * Add breast features component styles * Fix aspect ratio, heading hierarchy, make it possible to edit features, add breast reduction scar as default option * Fix aspect ratio * Move css to the right place * Move line to correct place * Integrate Danny's content changes * Fix hyphenated labels * Add locations, add clear link * Update locations and styling of locations * Add link to breast features component to the index * Fix editing popover * Remove conditional JS we don't need * Display locations test * Add location toggle feature for testing * Hide button to show location borders for now * Make it possible to click on the key to edit features * Add temporary marker when adding features * Update appointment cannot proceed link to include 'save' * Update link to breast features component from record medical info page * Update href so we return to the right place --------- Co-authored-by: Ed Horsford <[email protected]>
1 parent 7ec417d commit 1ae4e1a

File tree

5 files changed

+1528
-4
lines changed

5 files changed

+1528
-4
lines changed

‎app/assets/sass/components/breast-features.scss‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
2+
.breast-features-diagram-marker {
3+
position: absolute;
4+
width: 40px;
5+
height: 40px;
6+
background-color: #005eb8;
7+
border: 2px solid #ffffff;
8+
border-radius: 2px;
9+
z-index: 101;
10+
pointer-events: all;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
color: #ffffff;
15+
font-size: 18px;
16+
font-weight: bold;
17+
cursor: pointer;
18+
}
19+
20+
.breast-features-diagram-container {
21+
position: relative;
22+
max-width: 950px;
23+
margin: 0 auto;
24+
background: #ffffff;
25+
padding: 32px;
26+
border: 0px solid #d8dde0;
27+
}
28+
29+
.breast-features-diagram-header {
30+
margin-bottom: 16px;
31+
}
32+
33+
.breast-features-diagram-side-labels {
34+
display: flex;
35+
justify-content: space-between;
36+
margin-bottom: 8px;
37+
font-weight: 600;
38+
font-size: 19px;
39+
color: #212b32;
40+
}
41+
42+
.breast-features-diagram-diagram-container {
43+
position: relative;
44+
border: 3px solid #000000;
45+
background: #ffffff;
46+
margin: 0;
47+
padding: 10px 0;
48+
cursor: crosshair;
49+
overflow: hidden; /* CRITICAL: Prevent markers from escaping container */
50+
}
51+
52+
.breast-features-diagram-diagram-svg {
53+
width: 100%;
54+
height: 230px;
55+
cursor: inherit;
56+
pointer-events: all;
57+
display: block;
58+
}
59+
60+
.breast-features-diagram-popover {
61+
position: fixed;
62+
background: #ffffff;
63+
border: 4px solid #005eb8;
64+
padding: 32px;
65+
box-shadow: 0 4px 16px rgba(33, 43, 50, 0.16);
66+
z-index: 1000;
67+
min-width: 350px;
68+
max-width: 400px;
69+
display: none;
70+
border-radius: 4px;
71+
max-height: 80vh;
72+
overflow-y: auto;
73+
}
74+
75+
.breast-features-diagram-marker {
76+
position: absolute;
77+
width: 40px;
78+
height: 40px;
79+
background-color: #005eb8;
80+
border: 2px solid #ffffff;
81+
border-radius: 2px;
82+
z-index: 101;
83+
pointer-events: all;
84+
display: flex;
85+
align-items: center;
86+
justify-content: center;
87+
color: #ffffff;
88+
font-size: 18px;
89+
font-weight: bold;
90+
cursor: pointer;
91+
}
92+
93+
.breast-features-diagram-marker-label {
94+
background: #ffffff;
95+
border: 2px solid #212b32;
96+
padding: 4px 8px;
97+
font-size: 14px;
98+
font-weight: 600;
99+
color: #212b32;
100+
position: absolute;
101+
white-space: nowrap;
102+
z-index: 100;
103+
line-height: 1.2;
104+
cursor: grab;
105+
user-select: none;
106+
border-radius: 2px;
107+
left: 45px;
108+
top: -10px;
109+
}
110+
111+
.breast-features-diagram-marker-label:hover {
112+
background: #f0f4f5;
113+
}
114+
115+
.breast-features-diagram-marker-label.dragging {
116+
cursor: grabbing;
117+
opacity: 0.8;
118+
z-index: 200;
119+
transform: scale(1.05);
120+
box-shadow: 0 4px 12px rgba(33, 43, 50, 0.3);
121+
}
122+
123+
/* Key section styles */
124+
.features-list {
125+
margin-top: 20px;
126+
}
127+
128+
.feature-item {
129+
display: flex;
130+
align-items: center;
131+
justify-content: space-between;
132+
padding: 12px 0;
133+
border-bottom: 1px solid #4c6272;
134+
gap: 12px;
135+
}
136+
137+
.feature-item:last-child {
138+
border-bottom: none;
139+
}
140+
141+
.feature-left {
142+
display: flex;
143+
align-items: center;
144+
gap: 12px;
145+
}
146+
147+
.feature-number {
148+
position: relative;
149+
width: 40px;
150+
height: 40px;
151+
flex-shrink: 0;
152+
background-color: #005eb8;
153+
border: 2px solid #ffffff;
154+
border-radius: 2px;
155+
display: flex;
156+
align-items: center;
157+
justify-content: center;
158+
color: #ffffff;
159+
font-size: 18px;
160+
font-weight: bold;
161+
}
162+
163+
.feature-label {
164+
font-weight: 600;
165+
color: #212b32;
166+
font-size: 16px;
167+
}
168+
169+
.feature-position {
170+
color: #212b32;
171+
font-size: 14px;
172+
font-weight: normal;
173+
}
174+
175+
/* Responsive adjustments */
176+
@media (max-width: 768px) {
177+
.breast-features-diagram-container {
178+
padding: 16px;
179+
}
180+
181+
.breast-features-diagram-popover {
182+
min-width: 280px;
183+
max-width: 90vw;
184+
padding: 20px;
185+
}
186+
}
187+
188+
189+
/* Border toggle styles - only show borders for axilla regions */
190+
#anatomical-regions .anatomical-region {
191+
stroke: #4c6272;
192+
stroke-width: 1px;
193+
stroke-dasharray: 5,5;
194+
fill: none;
195+
opacity: 0;
196+
pointer-events: all;
197+
}
198+
199+
/* Only show borders for axilla regions when toggled */
200+
#anatomical-regions.show-borders .anatomical-region[data-region="axilla"] {
201+
opacity: 1 !important;
202+
}

‎app/assets/sass/main.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

1717
@forward 'components/overrides';
1818
@forward 'components/checkboxes';
19+
@forward 'components/breast-features';
20+
1921

2022
@forward 'components/annotation';
2123

@@ -26,6 +28,7 @@
2628
@forward 'typography';
2729
@forward 'utils';
2830

31+
2932
///////////////////////////////////////////
3033
// Add your custom CSS/Sass styles below...
3134
///////////////////////////////////////////

‎app/views/_includes/cards/medical-information/breast-features.njk‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22

33
{% set breastFeaturesHtml %}
4-
{% if useFakeBreastFeaturesCard %}
4+
{# {% if useFakeBreastFeaturesCard %}
55
{% set tattooHtml %}
66
Tattoo<br>
77
{{ "(Manchester united badge)" | asHint }}
@@ -52,16 +52,20 @@
5252
}) }}
5353
5454
<p><a href="#">Add a feature</a></p>
55-
{% else %}
55+
{% else %} #}
5656
{% set insetHtml %}
5757
<p>No breast features have been recorded for this participant. Add any scars, moles, warts or lumps observed or reported during the appointment.</p>
5858
{% endset %}
5959
{{ insetText({
6060
html: insetHtml
6161
}) }}
6262

63-
<p><a href="#">Add a feature</a></p>
64-
{% endif %}
63+
{% set linkHref %}
64+
{{ "./medical-information/record-breast-features" | urlWithReferrer(currentUrl) }}
65+
{% endset %}
66+
67+
<p><a href="{{ linkHref }}">Add a feature</a></p>
68+
{# {% endif %} #}
6569
{% endset %}
6670

6771
{{ card({

0 commit comments

Comments
 (0)