[OCaml] High Intensity Training Online
fix unify logbook workout card styling
Keep recorded and upcoming workout tables aligned by sharing their header and group borders. Remove the recorded-only panel padding and give the calendar a semantic section and navigation region.
Changed files
lib/presenter/pages_logbook.ml
@@ -269,12 +269,7 @@
269
269
in
270
270
tag "article"
271
271
[ class_ "selected-workout" ]
272
Removed:
(imported
273
Removed:
@ [
274
Removed:
tag "div" [ class_ "selected-workout-panel" ] performance;
275
Removed:
workout_metadata entry;
276
Removed:
]
277
Removed:
@ actions)
272
Added:
(imported @ performance @ [ workout_metadata entry ] @ actions)
278
273
279
274
let selected_upcoming_card = upcoming_workout_card
280
275
@@ -374,83 +369,96 @@
374
369
in
375
370
(* Header: previous, the month and year, a Today link that returns to the
376
371
current month, next. *)
377
Removed:
tag "div"
378
Removed:
[ class_ "calendar" ]
372
Added:
tag "section"
379
373
[
374
Added:
class_ "logbook-calendar";
375
Added:
Dream_html.string_attr "aria-labelledby" "calendar-heading";
376
Added:
]
377
Added:
[
378
Added:
tag "h2" [ id "calendar-heading"; class_ "sr-only" ] [ txt "Calendar" ];
380
379
tag "div"
381
Removed:
[ class_ "calendar-header" ]
380
Added:
[ class_ "calendar" ]
382
381
[
383
Removed:
arrow ~label:"‹" prev_month "Previous month";
384
Removed:
tag "span"
385
Removed:
[ class_ "calendar-month" ]
382
Added:
tag "nav"
386
383
[
387
Removed:
txt "%s %d"
388
Removed:
(calendar_month_name cal.selected_month)
389
Removed:
cal.selected_year;
390
Removed:
];
391
Removed:
tag "a"
392
Removed:
[
393
Removed:
href Routes.logbook;
394
Removed:
class_ "calendar-today-link";
395
Removed:
Dream_html.attr "data-hito-app-link";
384
Added:
class_ "calendar-header";
385
Added:
Dream_html.string_attr "aria-label" "Calendar navigation";
396
386
]
397
Removed:
[ txt "Today" ];
398
Removed:
arrow ~label:"›" next_month "Next month";
399
Removed:
];
400
Removed:
tag "table"
401
Removed:
[ class_ "calendar-grid" ]
402
Removed:
[
403
Removed:
tag "thead" []
404
387
[
405
Removed:
tag "tr" []
406
Removed:
(List.map
407
Removed:
(fun h ->
408
Removed:
tag "th"
409
Removed:
[ Dream_html.string_attr "scope" "col" ]
410
Removed:
[ txt "%s" h ])
411
Removed:
cal.weekday_headings);
388
Added:
arrow ~label:"‹" prev_month "Previous month";
389
Added:
tag "span"
390
Added:
[ class_ "calendar-month" ]
391
Added:
[
392
Added:
txt "%s %d"
393
Added:
(calendar_month_name cal.selected_month)
394
Added:
cal.selected_year;
395
Added:
];
396
Added:
tag "a"
397
Added:
[
398
Added:
href Routes.logbook;
399
Added:
class_ "calendar-today-link";
400
Added:
Dream_html.attr "data-hito-app-link";
401
Added:
]
402
Added:
[ txt "Today" ];
403
Added:
arrow ~label:"›" next_month "Next month";
412
404
];
413
Removed:
tag "tbody" []
414
Removed:
(List.map (fun week -> tag "tr" [] (List.map cell week)) cal.weeks);
415
Removed:
];
416
Removed:
tag "div"
417
Removed:
[
418
Removed:
class_ "calendar-legend";
419
Removed:
Dream_html.string_attr "role" "group";
420
Removed:
Dream_html.string_attr "aria-label" "Calendar key";
421
Removed:
]
422
Removed:
[
423
Removed:
tag "span"
424
Removed:
[ class_ "calendar-legend-item" ]
405
Added:
tag "table"
406
Added:
[ class_ "calendar-grid" ]
425
407
[
426
Removed:
tag "span"
427
Removed:
[ class_ "calendar-legend-swatch calendar-legend-workout" ]
428
Removed:
[];
429
Removed:
txt "Completed";
408
Added:
tag "thead" []
409
Added:
[
410
Added:
tag "tr" []
411
Added:
(List.map
412
Added:
(fun h ->
413
Added:
tag "th"
414
Added:
[ Dream_html.string_attr "scope" "col" ]
415
Added:
[ txt "%s" h ])
416
Added:
cal.weekday_headings);
417
Added:
];
418
Added:
tag "tbody" []
419
Added:
(List.map
420
Added:
(fun week -> tag "tr" [] (List.map cell week))
421
Added:
cal.weeks);
430
422
];
431
Removed:
tag "span"
432
Removed:
[ class_ "calendar-legend-item" ]
423
Added:
tag "div"
433
424
[
425
Added:
class_ "calendar-legend";
426
Added:
Dream_html.string_attr "role" "group";
427
Added:
Dream_html.string_attr "aria-label" "Calendar key";
428
Added:
]
429
Added:
[
434
430
tag "span"
435
Removed:
[ class_ "calendar-legend-swatch calendar-legend-planned" ]
436
Removed:
[];
437
Removed:
txt "Planned";
431
Added:
[ class_ "calendar-legend-item" ]
432
Added:
[
433
Added:
tag "span"
434
Added:
[ class_ "calendar-legend-swatch calendar-legend-workout" ]
435
Added:
[];
436
Added:
txt "Completed";
437
Added:
];
438
Added:
tag "span"
439
Added:
[ class_ "calendar-legend-item" ]
440
Added:
[
441
Added:
tag "span"
442
Added:
[ class_ "calendar-legend-swatch calendar-legend-planned" ]
443
Added:
[];
444
Added:
txt "Planned";
445
Added:
];
446
Added:
tag "span"
447
Added:
[ class_ "calendar-legend-item" ]
448
Added:
[
449
Added:
tag "span"
450
Added:
[ class_ "calendar-legend-swatch calendar-legend-today" ]
451
Added:
[];
452
Added:
txt "Today";
453
Added:
];
438
454
];
439
Removed:
tag "span"
440
Removed:
[ class_ "calendar-legend-item" ]
455
Added:
tag "p"
456
Added:
[ class_ "calendar-note" ]
441
457
[
442
Removed:
tag "span"
443
Removed:
[ class_ "calendar-legend-swatch calendar-legend-today" ]
444
Removed:
[];
445
Removed:
txt "Today";
458
Added:
txt
459
Added:
"Planned dates follow the recovery time in your routine. Hover \
460
Added:
a planned day to see the workout.";
446
461
];
447
Removed:
];
448
Removed:
tag "p"
449
Removed:
[ class_ "calendar-note" ]
450
Removed:
[
451
Removed:
txt
452
Removed:
"Planned dates follow the recovery time in your routine. Hover a \
453
Removed:
planned day to see the workout.";
454
462
];
455
463
]
456
464
lib/web/assets/hito.css
@@ -593,12 +593,10 @@
593
593
.workout-evidence-table th:first-child {
594
594
text-align: left;
595
595
}
596
Added:
.workout-evidence-table thead + tbody,
596
597
.workout-evidence-table tbody + tbody {
597
598
border-top: 1px solid var(--rule-strong);
598
599
}
599
Removed:
.upcoming-workout-table tbody {
600
Removed:
border-top: 1px solid var(--rule-strong);
601
Removed:
}
602
600
.workout-evidence-table .evidence-exercise {
603
601
width: 40%;
604
602
color: var(--ink);
@@ -668,11 +666,9 @@
668
666
.profile-dialog h3 { margin-top: 0; text-align: center; }
669
667
670
668
671
Removed:
/* The month calendar is a self-contained widget above the selected-day panel,
672
Removed:
flat on the page. A header row holds a previous arrow, the month and year, a
673
Removed:
Today link, and a next arrow. Below it sits the seven-column day grid. The
674
Removed:
arrows page through months and Today returns to the present. Completed days
675
Removed:
are filled blood. Planned days use a dotted brass outline. Today is ringed. */
669
Added:
/* The calendar section shares the page content width with the selected-day
670
Added:
section. The widget stays compact and centered inside that section. */
671
Added:
.logbook-calendar { margin: 0; }
676
672
.calendar {
677
673
max-width: 22rem;
678
674
margin: 0 auto 1.5rem;
@@ -802,7 +798,6 @@
802
798
margin: 0;
803
799
font-size: var(--font-size-lead);
804
800
}
805
Removed:
.selected-workout-panel { padding-top: 0.65rem; }
806
801
.planned-exercise-list {
807
802
margin: 0.65rem 0 0;
808
803
padding-left: 1.2rem;