[OCaml] High Intensity Training Online
style move the Imported pill into the menu drawer
Stop italicising imported workout names and drop the italic caption. Restore the oxblood outline 'Imported' pill, but tuck it at the top of the three-dot menu drawer rather than beside the title, so the row title reads plainly and the import marker lives with the workout's details.
lib/presenter/pages_logbook.ml
@@ -223,8 +223,9 @@
223
223
contents;
224
224
]
225
225
226
Removed:
(* An imported workout's menu: the per-exercise efforts and progress since each
227
Removed:
was last performed. Read-only; no edit or delete. *)
226
Added:
(* An imported workout's menu: an "Imported" pill, then the per-exercise efforts
227
Added:
and progress since each was last performed. Read-only; no edit or delete. The
228
Added:
pill lives here in the drawer, not beside the title. *)
228
229
let imported_menu (entry : View_model.Logbook_entry.t) =
229
230
row_menu
230
231
~aria_summary:
@@ -232,6 +233,9 @@
232
233
entry.date)
233
234
~aria_drawer:"Imported exercises" ~extra_class:"logbook-import-drawer"
234
235
[
236
Added:
tag "p"
237
Added:
[ class_ "logbook-import-pill-row" ]
238
Added:
[ tag "span" [ class_ "logbook-import-pill" ] [ txt "Imported" ] ];
235
239
tag "ul"
236
240
[ class_ "logbook-change-list" ]
237
241
(List.map imported_effort_line
@@ -350,82 +354,54 @@
350
354
@ [
351
355
(if records = [] then tag "p" [] [ txt "Nothing logged yet." ]
352
356
else
353
Removed:
let has_imports =
354
Removed:
List.exists
355
Removed:
(fun (e : View_model.Logbook_entry.t) -> e.imported)
356
Removed:
records
357
Removed:
in
358
Removed:
tag "div" []
359
Removed:
((if has_imports then
357
Added:
tag "table"
358
Added:
[ class_ "logbook-table" ]
359
Added:
[
360
Added:
tag "thead" []
360
361
[
361
Removed:
tag "p"
362
Removed:
[ class_ "logbook-caption" ]
362
Added:
tag "tr" []
363
363
[
364
Removed:
tag "em" [] [ txt "Italic" ];
365
Removed:
txt " titles were imported.";
364
Added:
tag "th"
365
Added:
[ Dream_html.string_attr "scope" "col" ]
366
Added:
[ txt "Date" ];
367
Added:
tag "th"
368
Added:
[ Dream_html.string_attr "scope" "col" ]
369
Added:
[ txt "Workout" ];
370
Added:
tag "th"
371
Added:
[ Dream_html.string_attr "scope" "col" ]
372
Added:
[ txt "Duration" ];
373
Added:
tag "th"
374
Added:
([ class_ "logbook-actions-heading" ]
375
Added:
@ [ Dream_html.string_attr "scope" "col" ])
376
Added:
[ tag "span" [ class_ "sr-only" ] [ txt "Actions" ] ];
366
377
];
367
Removed:
]
368
Removed:
else [])
369
Removed:
@ [
370
Removed:
tag "table"
371
Removed:
[ class_ "logbook-table" ]
372
Removed:
[
373
Removed:
tag "thead" []
374
Removed:
[
375
Removed:
tag "tr" []
376
Removed:
[
377
Removed:
tag "th"
378
Removed:
[ Dream_html.string_attr "scope" "col" ]
379
Removed:
[ txt "Date" ];
380
Removed:
tag "th"
381
Removed:
[ Dream_html.string_attr "scope" "col" ]
382
Removed:
[ txt "Workout" ];
383
Removed:
tag "th"
384
Removed:
[ Dream_html.string_attr "scope" "col" ]
385
Removed:
[ txt "Duration" ];
386
Removed:
tag "th"
387
Removed:
([ class_ "logbook-actions-heading" ]
388
Removed:
@ [ Dream_html.string_attr "scope" "col" ])
389
Removed:
[
390
Removed:
tag "span"
391
Removed:
[ class_ "sr-only" ]
392
Removed:
[ txt "Actions" ];
393
Removed:
];
394
Removed:
];
395
Removed:
];
396
Removed:
tag "tbody" []
397
Removed:
(List.map
398
Removed:
(fun (entry : View_model.Logbook_entry.t) ->
399
Removed:
(* An imported workout's name is set in italics; the caption
400
Removed:
explains that. The three-dot menu carries the colour-coded
401
Removed:
per-exercise progress, plus Edit/Delete for a native
402
Removed:
record. *)
403
Removed:
let name_cell =
404
Removed:
if entry.imported then
405
Removed:
tag "td" []
406
Removed:
[
407
Removed:
tag "em"
408
Removed:
[ class_ "logbook-imported-title" ]
409
Removed:
[ txt "%s" entry.workout_name ];
410
Removed:
]
411
Removed:
else tag "td" [] [ txt "%s" entry.workout_name ]
412
Removed:
in
413
Removed:
let menu =
414
Removed:
if entry.imported then imported_menu entry
415
Removed:
else native_menu request entry
416
Removed:
in
417
Removed:
tag "tr" []
418
Removed:
[
419
Removed:
tag "td" [] [ txt "%s" entry.date ];
420
Removed:
name_cell;
421
Removed:
tag "td"
422
Removed:
[ class_ "logbook-duration" ]
423
Removed:
[ txt "%s" entry.duration ];
424
Removed:
tag "td" [ class_ "logbook-actions" ] [ menu ];
425
Removed:
])
426
Removed:
records);
427
Removed:
];
428
Removed:
]));
378
Added:
];
379
Added:
tag "tbody" []
380
Added:
(List.map
381
Added:
(fun (entry : View_model.Logbook_entry.t) ->
382
Added:
(* The workout name renders plainly. An import is
383
Added:
marked by the oxblood pill inside its three-dot
384
Added:
menu drawer, and the menu also carries the
385
Added:
colour-coded per-exercise progress; a native
386
Added:
menu carries Edit and Delete. *)
387
Added:
let name_cell =
388
Added:
tag "td" [] [ txt "%s" entry.workout_name ]
389
Added:
in
390
Added:
let menu =
391
Added:
if entry.imported then imported_menu entry
392
Added:
else native_menu request entry
393
Added:
in
394
Added:
tag "tr" []
395
Added:
[
396
Added:
tag "td" [] [ txt "%s" entry.date ];
397
Added:
name_cell;
398
Added:
tag "td"
399
Added:
[ class_ "logbook-duration" ]
400
Added:
[ txt "%s" entry.duration ];
401
Added:
tag "td" [ class_ "logbook-actions" ] [ menu ];
402
Added:
])
403
Added:
records);
404
Added:
]);
429
405
]
430
406
(* The subjective-feedback modal stays in the DOM so the Record feedback
431
407
button opens it. Past reports, when any, list below; the delete-confirm
lib/web/assets/hito.css
@@ -654,15 +654,21 @@
654
654
text-align: left;
655
655
}
656
656
657
Removed:
/* An imported workout's title is set in italics; the table caption explains
658
Removed:
the convention. No pill. */
659
Removed:
.logbook-imported-title {
660
Removed:
font-style: italic;
657
Added:
/* An import is marked by an oxblood outline "Imported" pill, tucked into the
658
Added:
top of its three-dot menu drawer rather than shown beside the title. */
659
Added:
.logbook-import-pill-row {
660
Added:
margin: 0 0 0.5rem;
661
661
}
662
Removed:
.logbook-caption {
663
Removed:
margin: 0 0 0.75rem;
664
Removed:
color: var(--muted-ink);
665
Removed:
font-size: var(--font-size-small);
662
Added:
.logbook-import-pill {
663
Added:
display: inline-block;
664
Added:
padding: 0.05rem 0.5rem;
665
Added:
border: 1px solid var(--oxblood);
666
Added:
border-radius: 999px;
667
Added:
color: var(--oxblood-dark);
668
Added:
background: transparent;
669
Added:
font: 700 var(--font-size-small)/1.4 var(--sans);
670
Added:
letter-spacing: 0.02em;
671
Added:
white-space: nowrap;
666
672
}
667
673
668
674
.confirm-dialog button.danger {
test/web/logbook.ml
@@ -503,19 +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:
(* An import's title is set in italics; the table caption explains
507
Removed:
the convention. There is no pill. *)
506
Added:
(* The name is plain -- not italicised -- and there is no caption.
507
Added:
The import is marked by the oxblood pill inside the menu drawer. *)
508
508
Alcotest.(check bool)
509
Removed:
"the imported title is italicised" true
509
Added:
"the title is not italicised" false
510
510
(Option.is_some
511
511
(index_from ~needle:"logbook-imported-title" page 0));
512
512
Alcotest.(check bool)
513
Removed:
"no import pill remains" false
514
Removed:
(Option.is_some (index_from ~needle:"logbook-import-pill" page 0));
515
Removed:
Alcotest.(check bool)
516
Removed:
"the caption explains italic titles are imported" true
513
Added:
"no italic caption remains" false
517
514
(Option.is_some
518
515
(index_from ~needle:"titles were imported" page 0));
516
Added:
Alcotest.(check bool)
517
Added:
"the Imported pill is present in the drawer" true
518
Added:
(Option.is_some (index_from ~needle:"logbook-import-pill" page 0));
519
519
(* The import spans 10:00-11:00, so its duration is relevant and
520
520
shown, like a native workout. *)
521
521
Alcotest.(check bool)