[OCaml] High Intensity Training Online
refactor flatten the routine page from accordions to lists
Each routine day holds only a handful of exercises -- too little content to warrant an accordion. Render each workout as a plain h2 subheading followed by a list, and drop the details/summary markup and its open/close styles.
Changed files
lib/presenter/pages_routine.ml
@@ -165,30 +165,21 @@
165
165
166
166
let routine request ?(logging = false) ~viewer (vm : View_model.Routine.t) =
167
167
html_page ~viewer ~request ~active:"routine" ~logging "Routine"
168
Removed:
[
169
Removed:
tag "h1" [] [ txt "%s" vm.name ];
170
Removed:
tag "div"
171
Removed:
[ class_ "routine-accordions" ]
172
Removed:
(List.map
173
Removed:
(fun (workout : View_model.Routine.workout) ->
174
Removed:
tag "details"
175
Removed:
[ class_ "routine-accordion" ]
176
Removed:
[
177
Removed:
tag "summary" [] [ txt "%s" workout.name ];
178
Removed:
tag "div"
179
Removed:
[ class_ "routine-description" ]
180
Removed:
[
181
Removed:
tag "ul" []
182
Removed:
(List.map
183
Removed:
(fun (exercise : View_model.Routine.exercise) ->
184
Removed:
tag "li" []
185
Removed:
[
186
Removed:
tag "span"
187
Removed:
[ class_ "routine-exercise" ]
188
Removed:
[ txt "%s" exercise.name ];
189
Removed:
])
190
Removed:
workout.exercises);
191
Removed:
];
192
Removed:
])
193
Removed:
vm.workouts);
194
Removed:
]
168
Added:
(tag "h1" [] [ txt "%s" vm.name ]
169
Added:
:: List.concat_map
170
Added:
(fun (workout : View_model.Routine.workout) ->
171
Added:
[
172
Added:
tag "h2" [ class_ "routine-day" ] [ txt "%s" workout.name ];
173
Added:
tag "ul"
174
Added:
[ class_ "routine-exercises" ]
175
Added:
(List.map
176
Added:
(fun (exercise : View_model.Routine.exercise) ->
177
Added:
tag "li" []
178
Added:
[
179
Added:
tag "span"
180
Added:
[ class_ "routine-exercise" ]
181
Added:
[ txt "%s" exercise.name ];
182
Added:
])
183
Added:
workout.exercises);
184
Added:
])
185
Added:
vm.workouts)
lib/web/assets/hito.css
@@ -1254,57 +1254,18 @@
1254
1254
}
1255
1255
li li { color: var(--muted-ink); font-size: 0.92rem; }
1256
1256
1257
Removed:
/* The routine's workouts as summary/description accordions. Each summary
1258
Removed:
names one workout. Its description lists the prescribed exercises and numeric
1259
Removed:
rep bands. */
1260
Removed:
.routine-accordions {
1261
Removed:
display: grid;
1262
Removed:
gap: 0.65rem;
1263
Removed:
margin: 1.25rem 0 0;
1257
Added:
/* The routine's workouts as flat subheadings and lists. Each workout is one
1258
Added:
day heading followed by its prescribed exercises. There is too little content
1259
Added:
per day to warrant an accordion. */
1260
Added:
.routine-day {
1261
Added:
margin: 1.5rem 0 0.5rem;
1262
Added:
font-size: 1.05rem;
1264
1263
}
1265
Removed:
.routine-accordion {
1266
Removed:
border: 1px solid var(--rule);
1267
Removed:
border-radius: var(--radius);
1268
Removed:
background: var(--paper-raised);
1269
Removed:
overflow: visible;
1270
Removed:
}
1271
Removed:
.routine-accordion > summary {
1272
Removed:
padding: 0.8rem 1rem;
1273
Removed:
color: var(--ink);
1274
Removed:
font-weight: 700;
1275
Removed:
cursor: pointer;
1276
Removed:
list-style: none;
1277
Removed:
}
1278
Removed:
.routine-accordion > summary::-webkit-details-marker { display: none; }
1279
Removed:
.routine-accordion > summary::marker { content: ""; }
1280
Removed:
.routine-accordion > summary::after {
1281
Removed:
float: right;
1282
Removed:
content: "+";
1283
Removed:
color: var(--muted-ink);
1284
Removed:
}
1285
Removed:
.routine-accordion[open] > summary::after { content: "−"; }
1286
Removed:
.routine-accordion[open] > .routine-description {
1287
Removed:
animation: routine-description-open 180ms ease both;
1288
Removed:
}
1289
Removed:
@keyframes routine-description-open {
1290
Removed:
from {
1291
Removed:
opacity: 0;
1292
Removed:
transform: translateY(-0.35rem);
1293
Removed:
}
1294
Removed:
to {
1295
Removed:
opacity: 1;
1296
Removed:
transform: translateY(0);
1297
Removed:
}
1298
Removed:
}
1299
Removed:
.routine-description {
1300
Removed:
padding: 0 1rem 0.8rem;
1301
Removed:
border-top: 1px solid var(--rule);
1302
Removed:
}
1303
Removed:
.routine-description ul {
1304
Removed:
margin: 0.7rem 0 0;
1264
Added:
.routine-exercises {
1265
Added:
margin: 0;
1305
1266
padding-left: 1.2rem;
1306
1267
}
1307
Removed:
.routine-description li {
1268
Added:
.routine-exercises li {
1308
1269
padding: 0.35rem 0;
1309
1270
}
1310
1271
.routine-exercise { color: var(--ink); }