[OCaml] High Intensity Training Online
style mark imports with an italic title and a caption
Replace the oxblood outline Imported pill with a lighter convention: an imported workout's name is set in italics, and a table caption notes that italic titles were imported. The caption appears only when the ledger holds an import. Drop the now-dead pill styles.
lib/presenter/pages_logbook.ml
@@ -296,62 +296,74 @@
296
296
];
297
297
(if records = [] then tag "p" [] [ txt "Nothing logged yet." ]
298
298
else
299
Added:
let has_imports =
300
Added:
List.exists
301
Added:
(fun (e : View_model.Logbook_entry.t) -> e.imported)
302
Added:
records
303
Added:
in
299
304
tag "table"
300
305
[ class_ "logbook-table" ]
301
Removed:
[
302
Removed:
tag "thead" []
306
Added:
((if has_imports then
303
307
[
304
Removed:
tag "tr" []
308
Added:
tag "caption"
309
Added:
[ class_ "logbook-caption" ]
305
310
[
306
Removed:
tag "th"
307
Removed:
[ Dream_html.string_attr "scope" "col" ]
308
Removed:
[ txt "Date" ];
309
Removed:
tag "th"
310
Removed:
[ Dream_html.string_attr "scope" "col" ]
311
Removed:
[ txt "Workout" ];
312
Removed:
tag "th"
313
Removed:
[ Dream_html.string_attr "scope" "col" ]
314
Removed:
[ txt "Duration" ];
315
Removed:
tag "th"
316
Removed:
([ class_ "logbook-actions-heading" ]
317
Removed:
@ [ Dream_html.string_attr "scope" "col" ])
318
Removed:
[ tag "span" [ class_ "sr-only" ] [ txt "Actions" ] ];
311
Added:
tag "em" [] [ txt "Italic" ]; txt " titles were imported.";
319
312
];
320
Removed:
];
321
Removed:
tag "tbody" []
322
Removed:
(List.map
323
Removed:
(fun (entry : View_model.Logbook_entry.t) ->
324
Removed:
(* The title shows verbatim; an oxblood outline pill marks an
325
Removed:
import. The three-dot menu carries the colour-coded
313
Added:
]
314
Added:
else [])
315
Added:
@ [
316
Added:
tag "thead" []
317
Added:
[
318
Added:
tag "tr" []
319
Added:
[
320
Added:
tag "th"
321
Added:
[ Dream_html.string_attr "scope" "col" ]
322
Added:
[ txt "Date" ];
323
Added:
tag "th"
324
Added:
[ Dream_html.string_attr "scope" "col" ]
325
Added:
[ txt "Workout" ];
326
Added:
tag "th"
327
Added:
[ Dream_html.string_attr "scope" "col" ]
328
Added:
[ txt "Duration" ];
329
Added:
tag "th"
330
Added:
([ class_ "logbook-actions-heading" ]
331
Added:
@ [ Dream_html.string_attr "scope" "col" ])
332
Added:
[ tag "span" [ class_ "sr-only" ] [ txt "Actions" ] ];
333
Added:
];
334
Added:
];
335
Added:
tag "tbody" []
336
Added:
(List.map
337
Added:
(fun (entry : View_model.Logbook_entry.t) ->
338
Added:
(* An imported workout's name is set in italics; the caption
339
Added:
explains that. The three-dot menu carries the colour-coded
326
340
per-exercise progress, plus Edit/Delete for a native
327
341
record. *)
328
Removed:
let name_cell =
329
Removed:
tag "td" []
330
Removed:
(txt "%s" entry.workout_name
331
Removed:
::
332
Removed:
(if entry.imported then
333
Removed:
[
334
Removed:
tag "span"
335
Removed:
[ class_ "logbook-import-pill" ]
336
Removed:
[ txt "Imported" ];
337
Removed:
]
338
Removed:
else []))
339
Removed:
in
340
Removed:
let menu =
341
Removed:
if entry.imported then imported_menu entry
342
Removed:
else native_menu request entry
343
Removed:
in
344
Removed:
tag "tr" []
345
Removed:
[
346
Removed:
tag "td" [] [ txt "%s" entry.date ];
347
Removed:
name_cell;
348
Removed:
tag "td"
349
Removed:
[ class_ "logbook-duration" ]
350
Removed:
[ txt "%s" entry.duration ];
351
Removed:
tag "td" [ class_ "logbook-actions" ] [ menu ];
352
Removed:
])
353
Removed:
records);
354
Removed:
]);
342
Added:
let name_cell =
343
Added:
if entry.imported then
344
Added:
tag "td" []
345
Added:
[
346
Added:
tag "em"
347
Added:
[ class_ "logbook-imported-title" ]
348
Added:
[ txt "%s" entry.workout_name ];
349
Added:
]
350
Added:
else tag "td" [] [ txt "%s" entry.workout_name ]
351
Added:
in
352
Added:
let menu =
353
Added:
if entry.imported then imported_menu entry
354
Added:
else native_menu request entry
355
Added:
in
356
Added:
tag "tr" []
357
Added:
[
358
Added:
tag "td" [] [ txt "%s" entry.date ];
359
Added:
name_cell;
360
Added:
tag "td"
361
Added:
[ class_ "logbook-duration" ]
362
Added:
[ txt "%s" entry.duration ];
363
Added:
tag "td" [ class_ "logbook-actions" ] [ menu ];
364
Added:
])
365
Added:
records);
366
Added:
]));
355
367
tag "section"
356
368
[ class_ "feedback-section" ]
357
369
([
lib/web/assets/hito.css
@@ -686,20 +686,18 @@
686
686
text-align: left;
687
687
}
688
688
689
Removed:
/* An oxblood outline pill beside the title marks a workout as imported. */
690
Removed:
.logbook-import-pill {
691
Removed:
display: inline-block;
692
Removed:
margin-left: 0.5rem;
693
Removed:
padding: 0.05rem 0.5rem;
694
Removed:
border: 1px solid var(--oxblood);
695
Removed:
border-radius: 999px;
696
Removed:
color: var(--oxblood-dark);
697
Removed:
background: transparent;
698
Removed:
font: 700 var(--font-size-small)/1.4 var(--sans);
699
Removed:
letter-spacing: 0.02em;
700
Removed:
vertical-align: middle;
701
Removed:
white-space: nowrap;
689
Added:
/* An imported workout's title is set in italics; the table caption explains
690
Added:
the convention. No pill. */
691
Added:
.logbook-imported-title {
692
Added:
font-style: italic;
702
693
}
694
Added:
.logbook-caption {
695
Added:
caption-side: top;
696
Added:
margin-bottom: 0.5rem;
697
Added:
color: var(--muted-ink);
698
Added:
font-size: var(--font-size-small);
699
Added:
text-align: left;
700
Added:
}
703
701
704
702
.confirm-dialog button.danger {
705
703
border-color: var(--oxblood-hover);
@@ -1353,9 +1351,6 @@
1353
1351
1354
1352
@media (max-width: 26rem) {
1355
1353
.button-group { grid-template-columns: 1fr; }
1356
Removed:
/* Too narrow for the pill beside a truncated name; the row stays one line.
1357
Removed:
The three-dot menu still marks the workout as imported. */
1358
Removed:
.logbook-import-pill { display: none; }
1359
1354
}
1360
1355
1361
1356
@media (prefers-reduced-motion: reduce) {
test/web/logbook.ml
@@ -503,14 +503,19 @@
503
503
Alcotest.(check bool)
504
504
"the imported workout title is shown" true
505
505
(Option.is_some (index_from ~needle:"Legs" page 0));
506
Removed:
(* The title shows verbatim: it is not suffixed with "Imported".
507
Removed:
Import status is a separate primary-colour pill. *)
506
Added:
(* An import's title is set in italics; the table caption explains
507
Added:
the convention. There is no pill. *)
508
508
Alcotest.(check bool)
509
Removed:
"the title is not suffixed with Imported" false
510
Removed:
(Option.is_some (index_from ~needle:"Legs Imported" page 0));
509
Added:
"the imported title is italicised" true
510
Added:
(Option.is_some
511
Added:
(index_from ~needle:"logbook-imported-title" page 0));
511
512
Alcotest.(check bool)
512
Removed:
"an Imported pill marks the workout" true
513
Added:
"no import pill remains" false
513
514
(Option.is_some (index_from ~needle:"logbook-import-pill" page 0));
515
Added:
Alcotest.(check bool)
516
Added:
"the caption explains italic titles are imported" true
517
Added:
(Option.is_some
518
Added:
(index_from ~needle:"titles were imported" page 0));
514
519
(* The import spans 10:00-11:00, so its duration is relevant and
515
520
shown, like a native workout. *)
516
521
Alcotest.(check bool)