[OCaml] High Intensity Training Online
feat style the workout accordions
Give each routine workout accordion a bordered card, a pressable summary row with a rotating chevron, and an inset description panel. Replaces the default browser disclosure styling.
Changed files
ENHANCEMENTS.org
@@ -17,7 +17,7 @@
17
17
Remove the redundant fieldset legend from workout logging.
18
18
** DONE Add animations to routine accordions
19
19
Add animations to the routine accordions.
20
Removed:
** TODO Style workout accordions with CSS
20
Added:
** DONE Style workout accordions with CSS
21
21
Style the workout accordions with CSS.
22
22
** TODO Use brass for secondary buttons
23
23
Use a secondary brass color for secondary buttons.
@@ -25,3 +25,5 @@
25
25
Replace the history endpoint with a logbook endpoint that shows all recorded evidence for the user.
26
26
** TODO Fix active bottom-navigation state for current workout and logbook
27
27
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.
28
Added:
** TODO Increase the masthead brand size
29
Added:
Make the masthead brand name appear much larger.
lib/web/assets/hito.css
@@ -383,6 +383,56 @@
383
383
}
384
384
li li { color: var(--muted-ink); font-size: 0.92rem; }
385
385
386
Added:
/* The routine's workout accordions. Each details is one workout of the cycle.
387
Added:
The stack spaces the cards; each card reads as a bordered panel with a
388
Added:
pressable summary row and an inset description. */
389
Added:
.routine-accordions {
390
Added:
display: flex;
391
Added:
flex-direction: column;
392
Added:
gap: 0.6rem;
393
Added:
margin: 1.25rem 0 0;
394
Added:
}
395
Added:
396
Added:
.routine-accordion {
397
Added:
border: 1px solid var(--rule-strong);
398
Added:
border-left: 4px solid var(--oxblood);
399
Added:
background: var(--paper);
400
Added:
border-radius: 0.3rem;
401
Added:
}
402
Added:
403
Added:
.routine-accordion > summary {
404
Added:
display: flex;
405
Added:
align-items: center;
406
Added:
min-height: 2.75rem;
407
Added:
padding: 0.7rem 0.9rem;
408
Added:
color: var(--ink);
409
Added:
cursor: pointer;
410
Added:
font-weight: 600;
411
Added:
list-style: none;
412
Added:
}
413
Added:
414
Added:
.routine-accordion > summary::-webkit-details-marker { display: none; }
415
Added:
.routine-accordion > summary::marker { content: ""; }
416
Added:
417
Added:
/* A rotating chevron marks the open state. */
418
Added:
.routine-accordion > summary::after {
419
Added:
margin-left: auto;
420
Added:
color: var(--rule-strong);
421
Added:
content: "\25be";
422
Added:
transition: transform 180ms ease;
423
Added:
}
424
Added:
.routine-accordion[open] > summary::after { transform: rotate(180deg); }
425
Added:
426
Added:
.routine-accordion > summary:hover {
427
Added:
color: var(--oxblood-dark);
428
Added:
background: #ece4d5;
429
Added:
}
430
Added:
431
Added:
.routine-description {
432
Added:
border-top: 1px solid var(--rule);
433
Added:
padding: 0.4rem 0.9rem 0.9rem;
434
Added:
}
435
Added:
386
436
/* Routine accordions animate open: the disclosed panel fades and slides down
387
437
when the details opens. Reduced-motion users get the panel instantly, via
388
438
the global prefers-reduced-motion rule that clamps animation duration. */