[OCaml] High Intensity Training Online

style Reflow progress ledger for narrow screens

The five-column logbook table was desktop-first and would squeeze or scroll on a phone. Keep the semantic table, but make its base styles a ledger: each row is date/actions, workout, then duration/progress. The three-dot summary is 44px, the progress disclosure has a 44px target, and exact change evidence wraps deliberately. At 42.0625rem — the existing content-fit navigation breakpoint — restore the conventional table layout for cross-workout scanning. The expanded progress row remains full width in both layouts. No JavaScript or device detection is involved; the URL-addressable ?expand state and native menu work unchanged without script.

Commit
919c611cdef8ebc356d1225338a6e02c445205b5
Author
Marius Peter <dev@marius-peter.com>
Author date
Committer
Marius Peter <dev@marius-peter.com>
Committer date
lib/web/assets/hito.css
index 8b263d4e..7bbb8f88 100644..100644
@@ -517,27 +517,267 @@
517 517 background: var(--oxblood);
518 518 }
519 519
520 Removed: /* The logbook table: recorded workouts, one row each, with the date, a link to
521 Removed: the workout, and how many exercises progressed. */
520 Added: /* The logbook is a ledger at every width. Narrow screens lead: each semantic
521 Added: table row reflows into date/actions, workout, then duration/progress, with no
522 Added: horizontal scroll. Once all five columns fit at 42.0625rem, the same markup
523 Added: returns to a conventional table for cross-workout scanning. */
522 524 .logbook-table {
525 Added: display: block;
523 526 width: 100%;
524 527 margin-top: 1.5rem;
525 Removed: border-collapse: collapse;
528 Added: border-collapse: separate;
529 Added: border-spacing: 0 0.65rem;
526 530 }
527 Removed: .logbook-table th,
531 Added: .logbook-table thead {
532 Added: position: absolute;
533 Added: width: 1px;
534 Added: height: 1px;
535 Added: overflow: hidden;
536 Added: clip: rect(0, 0, 0, 0);
537 Added: white-space: nowrap;
538 Added: }
539 Added: .logbook-table tbody { display: block; }
540 Added: .logbook-table tbody > tr:not(.logbook-detail-row) {
541 Added: display: grid;
542 Added: grid-template-columns: minmax(0, 1fr) auto;
543 Added: grid-template-areas:
544 Added: "date actions"
545 Added: "workout workout"
546 Added: "duration progress";
547 Added: gap: 0.25rem 0.75rem;
548 Added: border: 1px solid var(--rule-strong);
549 Added: border-radius: var(--radius);
550 Added: background: var(--paper-raised);
551 Added: box-shadow: 0 0.25rem 0.75rem rgba(26, 26, 22, 0.06);
552 Added: overflow: visible;
553 Added: }
528 554 .logbook-table td {
529 Removed: padding: 0.5rem 0.75rem;
530 Removed: border-bottom: 1px solid var(--rule);
555 Added: display: block;
556 Added: padding: 0;
557 Added: border: none;
531 558 text-align: left;
532 559 }
533 Removed: .logbook-table th {
534 Removed: color: var(--muted-ink);
560 Added: .logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(1) {
561 Added: grid-area: date;
562 Added: padding: 0.75rem 0 0 0.85rem;
563 Added: font-family: var(--mono);
564 Added: white-space: nowrap;
565 Added: }
566 Added: .logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(2) {
567 Added: grid-area: workout;
568 Added: padding: 0 0.85rem;
569 Added: font-weight: 700;
570 Added: }
571 Added: .logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(3) {
572 Added: grid-area: duration;
573 Added: padding: 0 0 0.75rem 0.85rem;
574 Added: }
575 Added: .logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(4) {
576 Added: grid-area: progress;
577 Added: padding: 0 0.85rem 0.75rem 0;
578 Added: text-align: right;
579 Added: }
580 Added: .logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(5) {
581 Added: grid-area: actions;
582 Added: padding: 0.35rem 0.35rem 0 0;
583 Added: text-align: right;
584 Added: }
585 Added: .logbook-duration,
586 Added: .logbook-progress {
587 Added: white-space: nowrap;
588 Added: font-family: var(--mono);
589 Added: }
590 Added: .logbook-progress-toggle {
591 Added: display: inline-flex;
592 Added: align-items: center;
593 Added: min-height: 2.75rem;
594 Added: color: var(--oxblood-dark);
595 Added: font: inherit;
596 Added: font-weight: 700;
597 Added: text-decoration: none;
598 Added: }
599 Added: .logbook-progress-toggle:hover { text-decoration: underline; }
600 Added: .logbook-no-progress { color: var(--muted-ink); }
601 Added:
602 Added: /* One native <details> action menu per row. The dots keep the ledger compact;
603 Added: the drawer carries destructive work outside the evidence fields. */
604 Added: .logbook-actions-heading,
605 Added: .logbook-actions {
606 Added: width: 2.75rem;
607 Added: text-align: right;
608 Added: }
609 Added: .logbook-row-menu {
610 Added: position: relative;
611 Added: display: inline-block;
612 Added: }
613 Added: .logbook-row-menu > summary {
614 Added: display: grid;
615 Added: place-items: center;
616 Added: width: 2.75rem;
617 Added: height: 2.75rem;
618 Added: border-radius: 50%;
619 Added: color: var(--ink);
620 Added: cursor: pointer;
621 Added: list-style: none;
622 Added: font-size: 1.35rem;
623 Added: line-height: 1;
624 Added: }
625 Added: .logbook-row-menu > summary::-webkit-details-marker { display: none; }
626 Added: .logbook-row-menu > summary::marker { content: ""; }
627 Added: .logbook-row-menu > summary:hover,
628 Added: .logbook-row-menu[open] > summary { background: var(--brass-wash); }
629 Added: .logbook-row-menu-drawer {
630 Added: position: absolute;
631 Added: right: 0;
632 Added: z-index: 5;
633 Added: display: flex;
634 Added: flex-direction: column;
635 Added: min-width: 8rem;
636 Added: padding: 0.3rem;
637 Added: border: 1px solid var(--rule-strong);
638 Added: border-radius: var(--radius);
639 Added: background: var(--paper-raised);
640 Added: box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
641 Added: }
642 Added: .logbook-row-menu[open] > .logbook-row-menu-drawer {
643 Added: animation: profile-menu-open 150ms ease both;
644 Added: }
645 Added: .logbook-row-menu-drawer a {
646 Added: min-height: 2.5rem;
647 Added: padding: 0.5rem 0.7rem;
648 Added: border-radius: var(--radius);
649 Added: color: var(--ink);
650 Added: font: inherit;
651 Added: font-weight: 700;
652 Added: text-decoration: none;
653 Added: }
654 Added: .logbook-row-menu-drawer a:hover { background: #ece4d5; }
655 Added: .logbook-row-menu-drawer a.danger { color: var(--oxblood-dark); }
656 Added: .logbook-row-menu-drawer a.danger:hover {
657 Added: color: var(--paper-raised);
658 Added: background: var(--oxblood);
659 Added: }
660 Added:
661 Added: .confirm-dialog button.danger {
662 Added: border-color: var(--oxblood-dark);
663 Added: background: var(--oxblood-dark);
664 Added: }
665 Added: .confirm-dialog button.danger:hover { background: var(--oxblood); }
666 Added: .confirm-dialog .delete-record-form { flex: 1 1 10rem; margin: 0; }
667 Added: .confirm-dialog .delete-record-form button { width: 100%; }
668 Added:
669 Added: .logbook-detail-row {
670 Added: display: block;
671 Added: margin-top: -0.65rem;
672 Added: }
673 Added: .logbook-detail-row > td {
674 Added: display: block;
675 Added: padding: 0;
676 Added: border: none;
677 Added: }
678 Added: .logbook-progress-detail {
679 Added: padding: 0.85rem 1rem 1rem;
680 Added: border: 1px solid var(--rule-strong);
681 Added: border-top: none;
682 Added: border-radius: 0 0 var(--radius) var(--radius);
683 Added: background: var(--brass-wash);
684 Added: animation: logbook-detail-open 180ms ease both;
685 Added: }
686 Added: .logbook-progress-detail h2 {
687 Added: margin: 0 0 0.6rem;
688 Added: font-size: var(--font-size-small);
689 Added: }
690 Added: .logbook-change-list {
691 Added: display: grid;
692 Added: gap: 0.4rem;
693 Added: margin: 0;
694 Added: padding: 0;
695 Added: list-style: none;
696 Added: }
697 Added: .logbook-change-list li {
698 Added: display: grid;
699 Added: grid-template-columns: 1fr auto;
700 Added: gap: 0.25rem 0.5rem;
701 Added: align-items: baseline;
702 Added: }
703 Added: .change-efforts {
704 Added: grid-column: 1 / -1;
705 Added: font-family: var(--mono);
706 Added: white-space: nowrap;
707 Added: }
708 Added: .change-delta {
709 Added: color: var(--oxblood-dark);
535 710 font: 700 var(--font-size-small)/1 var(--sans);
536 Removed: letter-spacing: 0.04em;
537 Removed: text-transform: uppercase;
711 Added: white-space: nowrap;
538 712 }
539 Removed: .logbook-table td:first-child { font-family: var(--mono); white-space: nowrap; }
540 Removed: .logbook-progress { text-align: right; font-family: var(--mono); }
713 Added: @keyframes logbook-detail-open {
714 Added: from { opacity: 0; transform: translateY(-0.25rem); }
715 Added: to { opacity: 1; transform: none; }
716 Added: }
717 Added: @media (min-width: 42.0625rem) {
718 Added: .logbook-table {
719 Added: display: table;
720 Added: border-collapse: collapse;
721 Added: border-spacing: 0;
722 Added: }
723 Added: .logbook-table thead {
724 Added: position: static;
725 Added: display: table-header-group;
726 Added: width: auto;
727 Added: height: auto;
728 Added: overflow: visible;
729 Added: clip: auto;
730 Added: white-space: normal;
731 Added: }
732 Added: .logbook-table tbody { display: table-row-group; }
733 Added: .logbook-table tbody > tr:not(.logbook-detail-row) {
734 Added: display: table-row;
735 Added: border: none;
736 Added: border-radius: 0;
737 Added: background: transparent;
738 Added: box-shadow: none;
739 Added: }
740 Added: .logbook-table th,
741 Added: .logbook-table td {
742 Added: display: table-cell;
743 Added: padding: 0.5rem 0.75rem;
744 Added: border-bottom: 1px solid var(--rule);
745 Added: text-align: left;
746 Added: }
747 Added: .logbook-table th {
748 Added: color: var(--muted-ink);
749 Added: font: 700 var(--font-size-small)/1 var(--sans);
750 Added: letter-spacing: 0.04em;
751 Added: text-transform: uppercase;
752 Added: }
753 Added: .logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(n) {
754 Added: padding: 0.5rem 0.75rem;
755 Added: }
756 Added: .logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(1) {
757 Added: font-family: var(--mono);
758 Added: white-space: nowrap;
759 Added: }
760 Added: .logbook-progress { text-align: right; }
761 Added: .logbook-progress-toggle { min-height: 2.5rem; }
762 Added: .logbook-row-menu > summary { width: 2rem; height: 2rem; }
763 Added: .logbook-detail-row { display: table-row; margin: 0; }
764 Added: .logbook-detail-row > td {
765 Added: display: table-cell;
766 Added: padding: 0;
767 Added: border-bottom: 1px solid var(--rule);
768 Added: }
769 Added: .logbook-progress-detail {
770 Added: border: none;
771 Added: border-radius: 0;
772 Added: }
773 Added: .logbook-change-list li {
774 Added: grid-template-columns: minmax(0, 1fr) auto auto;
775 Added: }
776 Added: .change-efforts { grid-column: auto; }
777 Added: }
778 Added: @media (prefers-reduced-motion: reduce) {
779 Added: .logbook-progress-detail { animation: none; }
780 Added: }
541 781
542 782 /* One responsive grid for the whole logging fieldset. Every movement's name,
543 783 load, and reps line up in the same three columns — the name takes the
@@ -1310,138 +1550,4 @@
1310 1550 .app-feedback-remove-form input,
1311 1551 .app-feedback-vote input {
1312 1552 min-height: 2.75rem;
1313 Removed: }
1314 Removed:
1315 Removed: /* One native <details> action menu per logbook row. The dots keep the table
1316 Removed: compact; the drawer carries the destructive action out of the data columns. */
1317 Removed: .logbook-actions-heading,
1318 Removed: .logbook-actions {
1319 Removed: width: 2.75rem;
1320 Removed: text-align: right;
1321 Removed: }
1322 Removed: .logbook-row-menu {
1323 Removed: position: relative;
1324 Removed: display: inline-block;
1325 Removed: }
1326 Removed: .logbook-row-menu > summary {
1327 Removed: display: grid;
1328 Removed: place-items: center;
1329 Removed: width: 2rem;
1330 Removed: height: 2rem;
1331 Removed: border-radius: 50%;
1332 Removed: color: var(--ink);
1333 Removed: cursor: pointer;
1334 Removed: list-style: none;
1335 Removed: font-size: 1.35rem;
1336 Removed: line-height: 1;
1337 Removed: }
1338 Removed: .logbook-row-menu > summary::-webkit-details-marker { display: none; }
1339 Removed: .logbook-row-menu > summary::marker { content: ""; }
1340 Removed: .logbook-row-menu > summary:hover,
1341 Removed: .logbook-row-menu[open] > summary { background: var(--brass-wash); }
1342 Removed: .logbook-row-menu-drawer {
1343 Removed: position: absolute;
1344 Removed: right: 0;
1345 Removed: z-index: 5;
1346 Removed: display: flex;
1347 Removed: flex-direction: column;
1348 Removed: min-width: 8rem;
1349 Removed: padding: 0.3rem;
1350 Removed: border: 1px solid var(--rule-strong);
1351 Removed: border-radius: var(--radius);
1352 Removed: background: var(--paper-raised);
1353 Removed: box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
1354 Removed: }
1355 Removed: .logbook-row-menu[open] > .logbook-row-menu-drawer {
1356 Removed: animation: profile-menu-open 150ms ease both;
1357 Removed: }
1358 Removed: .logbook-row-menu-drawer a {
1359 Removed: min-height: 2.5rem;
1360 Removed: padding: 0.5rem 0.7rem;
1361 Removed: border-radius: var(--radius);
1362 Removed: color: var(--ink);
1363 Removed: font: inherit;
1364 Removed: font-weight: 700;
1365 Removed: text-decoration: none;
1366 Removed: }
1367 Removed: .logbook-row-menu-drawer a:hover { background: #ece4d5; }
1368 Removed: .logbook-row-menu-drawer a.danger { color: var(--oxblood-dark); }
1369 Removed: .logbook-row-menu-drawer a.danger:hover {
1370 Removed: color: var(--paper-raised);
1371 Removed: background: var(--oxblood);
1372 Removed: }
1373 Removed: .confirm-dialog button.danger {
1374 Removed: border-color: var(--oxblood-dark);
1375 Removed: background: var(--oxblood-dark);
1376 Removed: }
1377 Removed: .confirm-dialog button.danger:hover { background: var(--oxblood); }
1378 Removed: .confirm-dialog .delete-record-form { flex: 1 1 10rem; margin: 0; }
1379 Removed: .confirm-dialog .delete-record-form button { width: 100%; }
1380 Removed:
1381 Removed: /* Compact Heavy Duty evidence in the logbook. The headline scans duration and
1382 Removed: progressive overload; the full-width row beneath it supplies the proof. */
1383 Removed: .logbook-duration,
1384 Removed: .logbook-progress {
1385 Removed: white-space: nowrap;
1386 Removed: font-family: var(--mono);
1387 Removed: }
1388 Removed: .logbook-progress { text-align: right; }
1389 Removed: .logbook-progress-toggle {
1390 Removed: display: inline-flex;
1391 Removed: align-items: baseline;
1392 Removed: gap: 0.25rem;
1393 Removed: color: var(--oxblood-dark);
1394 Removed: font: inherit;
1395 Removed: font-weight: 700;
1396 Removed: text-decoration: none;
1397 Removed: }
1398 Removed: .logbook-progress-toggle:hover { text-decoration: underline; }
1399 Removed: .logbook-no-progress { color: var(--muted-ink); }
1400 Removed: .logbook-row-expanded > td { border-bottom: none; }
1401 Removed: .logbook-detail-row > td {
1402 Removed: padding: 0;
1403 Removed: border-bottom: 1px solid var(--rule);
1404 Removed: }
1405 Removed: .logbook-progress-detail {
1406 Removed: padding: 0.85rem 1rem 1rem;
1407 Removed: background: var(--brass-wash);
1408 Removed: animation: logbook-detail-open 180ms ease both;
1409 Removed: }
1410 Removed: .logbook-progress-detail h2 {
1411 Removed: margin: 0 0 0.6rem;
1412 Removed: font-size: var(--font-size-small);
1413 Removed: }
1414 Removed: .logbook-change-list {
1415 Removed: display: grid;
1416 Removed: gap: 0.4rem;
1417 Removed: margin: 0;
1418 Removed: padding: 0;
1419 Removed: list-style: none;
1420 Removed: }
1421 Removed: .logbook-change-list li {
1422 Removed: display: grid;
1423 Removed: grid-template-columns: minmax(0, 1fr) auto auto;
1424 Removed: gap: 0.5rem;
1425 Removed: align-items: baseline;
1426 Removed: }
1427 Removed: .change-efforts { font-family: var(--mono); white-space: nowrap; }
1428 Removed: .change-delta {
1429 Removed: color: var(--oxblood-dark);
1430 Removed: font: 700 var(--font-size-small)/1 var(--sans);
1431 Removed: white-space: nowrap;
1432 Removed: }
1433 Removed: @keyframes logbook-detail-open {
1434 Removed: from { opacity: 0; transform: translateY(-0.25rem); }
1435 Removed: to { opacity: 1; transform: none; }
1436 Removed: }
1437 Removed: @media (max-width: 34rem) {
1438 Removed: .logbook-table th,
1439 Removed: .logbook-table td { padding: 0.45rem; }
1440 Removed: .logbook-change-list li {
1441 Removed: grid-template-columns: 1fr auto;
1442 Removed: }
1443 Removed: .change-efforts { grid-column: 1 / -1; }
1444 Removed: }
1445 Removed: @media (prefers-reduced-motion: reduce) {
1446 Removed: .logbook-progress-detail { animation: none; }
1447 1553 }