Add accordion + active-filter chip bar for mobile repertoire

- repertoire-index.php: wrap each filter column in rep-accordion with toggle
  button, chevron, badge (active filter count); add rep-chip-bar with
  removable active-filter chips above the columns
- repertoire.css: mobile (≤640px) accordion mode — columns collapse to
  single-open accordion sections with 48px touch targets; chip bar becomes
  sticky; desktop/tablet layout unchanged via display:none on toggle elements
- repertoire.php: JS for single-accordion-open behavior on mobile, HTMX
  re-init after swap, resize-breakpoint cleanup
- docs/repertoire-mobile-propositions.md: analysis + 4 architecture proposals
This commit is contained in:
Pontoporeia
2026-06-22 15:45:58 +02:00
parent cca3d08f05
commit ecb90ba5dd
5 changed files with 529 additions and 45 deletions

View File

@@ -1,9 +1,11 @@
# TODO
> Last updated: 2026-06-21
> Context: Migrate all <img>-based icons to inline SVG via PHP helper so CSS color cascade works
> Last updated: 2026-06-22
> Context: Add mobile-responsive accordion + chip bar to repertoire filter index (column headings restored)
## Pending
- [ ] #rep-student-touch Replace hover student popover with tap-to-open drawer for mobile `(repertoire.php, repertoire.css)`
- [ ] #rep-polish Polish: scroll-position memory on HTMX swap, animation tuning `(repertoire.css)`
- [ ] #icon-color-verify Verify icon colors render correctly across all pages (header, admin tables, forms, dialogs, cleanup modal)
## Completed