[OCaml] High Intensity Training Online
style Slide the workout accordion open with @starting-style
Replace the fade-and-settle fallback with a real slide. The panel is a one-row grid whose track eases from 0fr to 1fr, and @starting-style supplies the 0fr state at the moment the details renders its content, so opening slides in every modern browser with no script. The ::details-content height transition stays for browsers that can interpolate to an intrinsic size, which is what lets the slot leaving the exclusive group fold up as the chosen one unfolds; elsewhere the close snaps, since an un-rendered node cannot animate. The panel body is wrapped in one element so the single animated row holds all of it, and the padding moves onto that element so it collapses with the row instead of snapping.
Changed files
lib/presenter/pages_workout.ml
@@ -302,7 +302,9 @@
302
302
(if done_ then tag "span" [ class_ "slot-done" ] [ txt "done" ]
303
303
else txt "");
304
304
];
305
Removed:
tag "div" [ class_ "slot-panel" ] body;
305
Added:
tag "div"
306
Added:
[ class_ "slot-panel" ]
307
Added:
[ tag "div" [ class_ "slot-panel-body" ] body ];
306
308
]
307
309
in
308
310
let accordion =
lib/web/assets/hito.css
@@ -656,11 +656,14 @@
656
656
}
657
657
.slot-accordion[data-done="true"] > summary { border-left: 4px solid var(--brass); }
658
658
659
Removed:
/* Unfold and collapse. Where the browser can interpolate to an intrinsic size
660
Removed:
(interpolate-size + ::details-content), the panel's height eases open and
661
Removed:
shut, so the slot leaving the group folds up as the chosen one unfolds.
662
Removed:
Elsewhere the height snaps and the panel still fades and settles into place
663
Removed:
on open. Reduced motion disables both. */
659
Added:
/* Unfold and collapse. The panel is a one-row grid whose track eases from 0fr to
660
Added:
1fr; @starting-style supplies the 0fr starting state at the moment the
661
Added:
<details> renders its content, so opening slides everywhere modern with no
662
Added:
script. Where the browser can also interpolate the details content's own size
663
Added:
(interpolate-size + ::details-content), closing slides too, so the slot
664
Added:
leaving the exclusive group folds up as the chosen one unfolds. Elsewhere the
665
Added:
close snaps: an un-rendered node cannot animate. Reduced motion disables
666
Added:
all of it. */
664
667
.slot-accordion {
665
668
interpolate-size: allow-keywords;
666
669
}
@@ -674,23 +677,25 @@
674
677
.slot-accordion[open]::details-content {
675
678
block-size: auto;
676
679
}
677
Removed:
.slot-accordion[open] > .slot-panel {
678
Removed:
animation: slot-panel-open 220ms ease both;
680
Added:
.slot-accordion > .slot-panel {
681
Added:
display: grid;
682
Added:
grid-template-rows: 1fr;
683
Added:
transition: grid-template-rows 220ms ease;
679
684
}
680
Removed:
@keyframes slot-panel-open {
681
Removed:
from {
682
Removed:
opacity: 0;
683
Removed:
transform: translateY(-0.35rem);
685
Added:
.slot-accordion > .slot-panel > .slot-panel-body {
686
Added:
min-height: 0;
687
Added:
overflow: clip;
688
Added:
}
689
Added:
@starting-style {
690
Added:
.slot-accordion[open] > .slot-panel {
691
Added:
grid-template-rows: 0fr;
684
692
}
685
Removed:
to {
686
Removed:
opacity: 1;
687
Removed:
transform: none;
688
Removed:
}
689
693
}
690
694
@media (prefers-reduced-motion: reduce) {
691
695
.slot-accordion::details-content { transition: none; }
692
Removed:
.slot-accordion[open] > .slot-panel { animation: none; }
696
Added:
.slot-accordion > .slot-panel { transition: none; }
693
697
}
698
Added:
}
694
699
695
700
/* The sticky workout timer bar. It pins to the top of the scroll area while a
696
701
workout is being logged and shows the elapsed time. The client ticks the
@@ -723,7 +728,7 @@
723
728
font-variant-numeric: tabular-nums;
724
729
}
725
730
726
Removed:
.slot-panel { padding: 0 1rem 1rem; }
731
Added:
.slot-panel-body { padding: 0 1rem 1rem; }
727
732
728
733
/* The cancel confirmation modal. A native dialog styled as a raised paper
729
734
surface: the oxblood top accent, radius, border, and shadow echo the page