Give pages shared sections, a danger zone and label-value detail lists closes #618

simon commented

2026-10-26 11:03:27 +01:00

Owner

closes #618, closes #255

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Page sections, danger zone, callouts and form controls: forms, settings and record pages now share one page structure — content in bordered sections on a darker page ground, one Save in each form's section footer, record details as label and value lists, and destructive actions in a danger zone at the end of the page.

What has been changed?

Build every mailto link through one encoding helper so names cannot inject headers
Add section, danger zone and detail list components for page content
Give hand-built dropdowns a shared floating panel that owns the shadow
Show the tiles flat with a base-300 border instead of a shadow
End every form and record page with the shared danger zone
Save forms from a single Save in the section footer instead of the header
Save each settings section from its own footer and ignore empty saves of environment-managed fields
Split the page into a default settings form and a fee types section
Show data and member fields as sections with their actions in the section header
Let the import hint and file field reflow on narrow screens inside a section
Show record details as label and value lists in sections on one page column
Remove the form section and list components that section and detail list replace
Reject shadows and named fixed widths in page content
Show the page components, the floating panel and page headers without Save
Set the danger zone heading as a header row inside its red box like a section
Set page content on a base-200 ground so sections and tables stand out as surfaces
Document the page components, the Save placement and the page ground
Give the app frame a base-100 surface with a base-300 divider towards the page ground

Definition of Done

Code Quality

No new technical depths
Linting passed
Documentation is added were needed

Accessibility

New elements are properly defined with html-tags
Colour contrast follows WCAG criteria
Aria labels are added when needed
Everything is accessible by keyboard
Tab-Order is comprehensible
All interactive elements have a visible focus

Testing

Tests for new code are written
All tests pass
axe-core dev tools show no critical or major issues

Additional Notes

Backtrack from tdd to requirements: the specs asked for browser-level tests the project has no driver for; the evidence moved to the acceptance test.
Backtrack from accept to requirements: acceptance round 1 changed the danger zone heading, the detail page width, the section header actions and the page ground; the implementation was extended, not redone.
The review loop ran its full 4 iterations; the last one was clean.
Large commits: F1 (14 files), F2 (14 files), F5 (28 files), F6 (16 files), F7 (10 files), F9 (10 files), F11 (29 files), F16 (12 files) — each migrates many pages to the same component.
Not yet covered: a second acceptance round after the last visual changes, and the light focus-ring halo on the darker page ground (planned for U6).

closes #618, closes #255 ## Description of the implemented changes The changes were: - [x] Bugfixing - [x] New Feature - [ ] Breaking Change - [x] Refactoring Page sections, danger zone, callouts and form controls: forms, settings and record pages now share one page structure — content in bordered sections on a darker page ground, one Save in each form's section footer, record details as label and value lists, and destructive actions in a danger zone at the end of the page. ## What has been changed? - Build every mailto link through one encoding helper so names cannot inject headers - Add section, danger zone and detail list components for page content - Give hand-built dropdowns a shared floating panel that owns the shadow - Show the tiles flat with a base-300 border instead of a shadow - End every form and record page with the shared danger zone - Save forms from a single Save in the section footer instead of the header - Save each settings section from its own footer and ignore empty saves of environment-managed fields - Split the page into a default settings form and a fee types section - Show data and member fields as sections with their actions in the section header - Let the import hint and file field reflow on narrow screens inside a section - Show record details as label and value lists in sections on one page column - Remove the form section and list components that section and detail list replace - Reject shadows and named fixed widths in page content - Show the page components, the floating panel and page headers without Save - Set the danger zone heading as a header row inside its red box like a section - Set page content on a base-200 ground so sections and tables stand out as surfaces - Document the page components, the Save placement and the page ground - Give the app frame a base-100 surface with a base-300 divider towards the page ground ## Definition of Done ### Code Quality - [ ] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [ ] New elements are properly defined with html-tags - [ ] Colour contrast follows WCAG criteria - [ ] Aria labels are added when needed - [ ] Everything is accessible by keyboard - [ ] Tab-Order is comprehensible - [ ] All interactive elements have a visible focus ### Testing - [x] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes - Backtrack from tdd to requirements: the specs asked for browser-level tests the project has no driver for; the evidence moved to the acceptance test. - Backtrack from accept to requirements: acceptance round 1 changed the danger zone heading, the detail page width, the section header actions and the page ground; the implementation was extended, not redone. - The review loop ran its full 4 iterations; the last one was clean. - Large commits: F1 (14 files), F2 (14 files), F5 (28 files), F6 (16 files), F7 (10 files), F9 (10 files), F11 (29 files), F16 (12 files) — each migrates many pages to the same component. - Not yet covered: a second acceptance round after the last visual changes, and the light focus-ring halo on the darker page ground (planned for U6).

simon added 19 commits

2026-10-26 11:03:27 +01:00

feat(mailto): build every mailto link through one encoding helper so names cannot inject headers 25eb47c8c2

feat(page): add section, danger zone and detail list components for page content 40cd05ab78

refactor(overlay): give hand-built dropdowns a shared floating panel that owns the shadow 378eca47e1

style(statistics): show the tiles flat with a base-300 border instead of a shadow 86a0c8f88e

feat(web): end every form and record page with the shared danger zone 3954f0eed8

feat(web): save forms from a single Save in the section footer instead of the header d66df9c508

feat(settings): save each settings section from its own footer and ignore empty saves of environment-managed fields fe5877d50c

feat(fee-settings): split the page into a default settings form and a fee types section a39003692d

feat(datafields): show data and member fields as sections with their actions in the section header b217c8d108

fix(import): let the import hint and file field reflow on narrow screens inside a section 1c56d33669