style: improve filter modal aesthetics for large screens (Task 11.4)
- Drug modal: size 70%, sm chips in 4-col SimpleGrid layout - Trust modal: size lg, md chips in vertical Stack layout - Directorate modal: size 70%, larger badges and text - CSS: modal title full-width, chip nowrap, scroll padding
This commit is contained in:
Andrew Charlwood
+14
-18
@@ -652,26 +652,22 @@ User feedback after Phase 10 completion. Four layout/aesthetics issues on both P
|
||||
- **Checkpoint**: Patient Pathways chart uses all available vertical space below the filter bar ✓
|
||||
|
||||
### 11.4 Filter modals — improve aesthetics for large screens
|
||||
- [ ] In `dash_app/components/modals.py`:
|
||||
- Drug modal: increase chip `size` from `"xs"` to `"sm"` or `"md"` for readability. Increase modal `size` from `"lg"` to `"xl"` or a fixed width (e.g., `"70%"` or `900px`). Add `dmc.SimpleGrid` or `dmc.Group(wrap="wrap")` with consistent gap to fix spacing/layout of chips.
|
||||
- Trust modal: increase chip `size` from `"xs"` to `"sm"`. Increase modal `size` from `"sm"` to `"md"`. Use `dmc.Stack` for vertical layout of trust chips (7 items don't need wrapping).
|
||||
- Directorate modal: review accordion spacing and text sizes. Ensure indication items and drug badges are clearly readable.
|
||||
- [ ] In `dash_app/assets/nhs.css`, add/update modal CSS:
|
||||
- Ensure `.modal-chips-scroll` has appropriate max-height and padding
|
||||
- Chip labels should use the project font (Source Sans 3) at readable size
|
||||
- Fix any broken text wrapping or extra whitespace between chip options
|
||||
- Consider responsive modal sizing (percentage-based width) so large screens get proportionally larger modals
|
||||
- [ ] **Use the frontend-developer agent** to review the modal layout for optimal aesthetics with 42 drugs, 7 trusts, 19 directorates × 163 indications. The agent should recommend chip sizing, grid layout, spacing, and responsive behavior for large screens (1920px+).
|
||||
- [ ] Verify: Modals look polished — no broken text, consistent spacing, chips are readable at all screen sizes
|
||||
- **Checkpoint**: All three filter modals are visually polished and proportionally sized for large screens
|
||||
- [x] In `dash_app/components/modals.py`:
|
||||
- Drug modal: chip `size` "xs" → "sm", modal `size` "lg" → "70%", added `dmc.SimpleGrid(cols=4)` layout
|
||||
- Trust modal: chip `size` "xs" → "md", modal `size` "sm" → "lg", added `dmc.Stack(gap="xs")` vertical layout
|
||||
- Directorate modal: modal `size` "xl" → "70%", drug fragment badge "sm" → "md", directorate text "sm" → "md", count badge "xs" → "sm"
|
||||
- [x] In `dash_app/assets/nhs.css`: padding-right on scroll container, white-space: nowrap on chip labels, .mantine-Modal-title width: 100%
|
||||
- [x] **Used frontend-developer agent** for UX review: recommended 4-col SimpleGrid for drugs, Stack for trusts, percentage-based modal widths, specific size bumps per component
|
||||
- [x] Verify: App starts cleanly, 20 callbacks, no regressions
|
||||
- **Checkpoint**: All three filter modals are visually polished and proportionally sized for large screens ✓
|
||||
|
||||
### Phase 11 Completion Criteria
|
||||
- [ ] "Clear All Filters" button is left-aligned next to filter buttons
|
||||
- [ ] Trust Comparison charts are readable with no overspill
|
||||
- [ ] Patient Pathways chart fills available viewport height
|
||||
- [ ] Filter modals are aesthetically polished with readable chip sizes
|
||||
- [ ] `python run_dash.py` starts cleanly
|
||||
- [ ] No regressions in existing functionality
|
||||
- [x] "Clear All Filters" button is left-aligned next to filter buttons
|
||||
- [x] Trust Comparison charts are readable with no overspill
|
||||
- [x] Patient Pathways chart fills available viewport height
|
||||
- [x] Filter modals are aesthetically polished with readable chip sizes
|
||||
- [x] `python run_dash.py` starts cleanly
|
||||
- [x] No regressions in existing functionality
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -341,9 +341,14 @@ body {
|
||||
.modal-chips-scroll {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.modal-chips-scroll .mantine-Chip-label {
|
||||
font-family: 'Source Sans 3', Arial, sans-serif;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mantine-Modal-title {
|
||||
width: 100%;
|
||||
}
|
||||
.modal-drug-badge {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -35,7 +35,7 @@ def _make_directorate_accordion_item(directorate: str, indications: dict[str, li
|
||||
frag,
|
||||
id={"type": "drug-fragment", "index": f"{directorate}|{search_term}|{frag}"},
|
||||
variant="light",
|
||||
size="sm",
|
||||
size="md",
|
||||
className="modal-drug-badge",
|
||||
style={"cursor": "pointer"},
|
||||
)
|
||||
@@ -54,10 +54,10 @@ def _make_directorate_accordion_item(directorate: str, indications: dict[str, li
|
||||
dmc.Group(
|
||||
gap="xs",
|
||||
children=[
|
||||
dmc.Text(directorate.title(), fw=600, size="sm"),
|
||||
dmc.Text(directorate.title(), fw=600, size="md"),
|
||||
dmc.Badge(
|
||||
str(len(indications)),
|
||||
size="xs",
|
||||
size="sm",
|
||||
variant="light",
|
||||
color="gray",
|
||||
),
|
||||
@@ -82,7 +82,7 @@ def make_drug_modal():
|
||||
id="drug-modal",
|
||||
opened=False,
|
||||
centered=True,
|
||||
size="lg",
|
||||
size="70%",
|
||||
title=dmc.Group(
|
||||
justify="space-between",
|
||||
style={"width": "100%"},
|
||||
@@ -112,12 +112,19 @@ def make_drug_modal():
|
||||
multiple=True,
|
||||
value=[],
|
||||
children=[
|
||||
dmc.Chip(drug, value=drug, size="xs")
|
||||
dmc.SimpleGrid(
|
||||
cols=4,
|
||||
spacing="sm",
|
||||
verticalSpacing="xs",
|
||||
children=[
|
||||
dmc.Chip(drug, value=drug, size="sm")
|
||||
for drug in drugs
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
dmc.Space(h=12),
|
||||
dmc.Group(
|
||||
justify="flex-end",
|
||||
@@ -143,7 +150,7 @@ def make_trust_modal():
|
||||
id="trust-modal",
|
||||
opened=False,
|
||||
centered=True,
|
||||
size="sm",
|
||||
size="lg",
|
||||
title=dmc.Group(
|
||||
justify="space-between",
|
||||
style={"width": "100%"},
|
||||
@@ -164,10 +171,15 @@ def make_trust_modal():
|
||||
multiple=True,
|
||||
value=[],
|
||||
children=[
|
||||
dmc.Chip(trust, value=trust, size="xs")
|
||||
dmc.Stack(
|
||||
gap="xs",
|
||||
children=[
|
||||
dmc.Chip(trust, value=trust, size="md")
|
||||
for trust in trusts
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
dmc.Space(h=12),
|
||||
dmc.Group(
|
||||
justify="flex-end",
|
||||
@@ -200,7 +212,7 @@ def make_directorate_modal():
|
||||
id="directorate-modal",
|
||||
opened=False,
|
||||
centered=True,
|
||||
size="xl",
|
||||
size="70%",
|
||||
title=dmc.Text("Browse by Directorate", fw=600, size="lg"),
|
||||
overlayProps={"backgroundOpacity": 0.55, "blur": 3},
|
||||
children=[
|
||||
|
||||
Reference in New Issue
Block a user