[OCaml] High Intensity Training Online
feat animate routine accordion open
Fade and slide the disclosed panel down when a routine accordion opens. Reduced-motion users get the panel instantly via the global prefers-reduced-motion rule.
Changed files
ENHANCEMENTS.org
@@ -15,7 +15,7 @@
15
15
Add placeholder values to the load and reps fields on the workout logging page.
16
16
** DONE Remove the redundant fieldset legend
17
17
Remove the redundant fieldset legend from workout logging.
18
Removed:
** TODO Add animations to routine accordions
18
Added:
** DONE Add animations to routine accordions
19
19
Add animations to the routine accordions.
20
20
** TODO Style workout accordions with CSS
21
21
Style the workout accordions with CSS.
@@ -23,3 +23,5 @@
23
23
Use a secondary brass color for secondary buttons.
24
24
** TODO Replace history with a logbook endpoint
25
25
Replace the history endpoint with a logbook endpoint that shows all recorded evidence for the user.
26
Added:
** TODO Fix active bottom-navigation state for current workout and logbook
27
Added:
When a current workout is open, selecting the logbook tab marks both Current Workout and Logbook as active in the bottom navigation. Ensure only the selected page is highlighted.
lib/web/assets/hito.css
@@ -383,6 +383,18 @@
383
383
}
384
384
li li { color: var(--muted-ink); font-size: 0.92rem; }
385
385
386
Added:
/* Routine accordions animate open: the disclosed panel fades and slides down
387
Added:
when the details opens. Reduced-motion users get the panel instantly, via
388
Added:
the global prefers-reduced-motion rule that clamps animation duration. */
389
Added:
@keyframes accordion-open {
390
Added:
from { opacity: 0; transform: translateY(-0.35rem); }
391
Added:
to { opacity: 1; transform: translateY(0); }
392
Added:
}
393
Added:
394
Added:
.routine-accordion[open] > .routine-description {
395
Added:
animation: accordion-open 180ms ease;
396
Added:
}
397
Added:
386
398
@media (max-width: 42rem) {
387
399
.app-shell {
388
400
padding: 0 0.75rem calc(6.75rem + env(safe-area-inset-bottom));