[OCaml] High Intensity Training Online
style one shared table layout for desktop and mobile
The logbook now has only four narrow columns -- date, workout name, duration, menu -- so it no longer needs the mobile card reflow. Render it as a single real table at every width: the name column takes the slack and truncates when space is tight. Drop the flex-card base styles and the desktop table-restore media block; there is no longer a breakpoint switch.
lib/web/assets/hito.css
@@ -532,75 +532,48 @@
532
532
background: var(--oxblood);
533
533
}
534
534
535
Removed:
/* The logbook is a ledger at every width. Narrow screens lead: each semantic
536
Removed:
table row reflows into date/actions, workout, then duration/progress, with no
537
Removed:
horizontal scroll. Once all five columns fit at 42.0625rem, the same markup
538
Removed:
returns to a conventional table for cross-workout scanning. */
535
Added:
/* The logbook is one real table at every width. The columns — date, workout
536
Added:
name, duration, and the row menu — are few and narrow enough to share a
537
Added:
single table layout, so there is no mobile card reflow: the name column takes
538
Added:
the slack and truncates when space is tight. */
539
539
.logbook-table {
540
Removed:
display: block;
541
540
width: 100%;
542
541
margin-top: 1.5rem;
543
Removed:
border-collapse: separate;
544
Removed:
border-spacing: 0 0.65rem;
542
Added:
border-collapse: collapse;
545
543
}
546
Removed:
.logbook-table thead {
547
Removed:
position: absolute;
548
Removed:
width: 1px;
549
Removed:
height: 1px;
550
Removed:
overflow: hidden;
551
Removed:
clip: rect(0, 0, 0, 0);
552
Removed:
white-space: nowrap;
553
Removed:
}
554
Removed:
.logbook-table tbody { display: block; }
555
Removed:
/* One line per workout on mobile. A flex row is simpler than a grid here: the
556
Removed:
name flexes and truncates, and everything else stays its natural width, so
557
Removed:
date, duration, and the three-dot menu always sit together on one line. */
558
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) {
559
Removed:
display: flex;
560
Removed:
align-items: center;
561
Removed:
gap: 0.5rem;
562
Removed:
padding: 0.6rem 0.75rem;
563
Removed:
border: 1px solid var(--rule-strong);
564
Removed:
border-radius: var(--radius);
565
Removed:
background: var(--paper-raised);
566
Removed:
box-shadow: 0 0.25rem 0.75rem rgba(26, 26, 22, 0.06);
567
Removed:
overflow: visible;
568
Removed:
}
544
Added:
.logbook-table th,
569
545
.logbook-table td {
570
Removed:
padding: 0;
571
Removed:
border: none;
546
Added:
padding: 0.55rem 0.6rem;
547
Added:
border-bottom: 1px solid var(--rule);
572
548
text-align: left;
549
Added:
vertical-align: baseline;
573
550
}
574
Removed:
/* Date: monospaced, fixed width. */
575
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(1) {
576
Removed:
flex: 0 0 auto;
551
Added:
.logbook-table th {
552
Added:
color: var(--muted-ink);
553
Added:
font: 700 var(--font-size-small)/1 var(--sans);
554
Added:
letter-spacing: 0.04em;
555
Added:
text-transform: uppercase;
556
Added:
}
557
Added:
/* The columns are narrow enough to share one table layout at every width:
558
Added:
monospaced date, sans workout name that takes the slack and truncates,
559
Added:
monospaced duration, and the three-dot menu. No mobile card reflow. */
560
Added:
.logbook-table td:nth-child(1) {
577
561
font-family: var(--mono);
578
562
white-space: nowrap;
579
563
}
580
Removed:
/* Name: sans, takes the slack and truncates when the row is too narrow. The
581
Removed:
import pill lives here and is hidden on a very narrow screen. */
582
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(2) {
583
Removed:
flex: 1 1 auto;
584
Removed:
min-width: 0;
564
Added:
.logbook-table td:nth-child(2) {
565
Added:
width: 100%;
566
Added:
max-width: 0;
585
567
font-family: var(--sans);
586
Removed:
font-weight: 400;
587
568
overflow: hidden;
588
569
text-overflow: ellipsis;
589
570
white-space: nowrap;
590
571
}
591
Removed:
/* Duration: monospaced, natural width, muted. */
592
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(3) {
593
Removed:
flex: 0 0 auto;
572
Added:
.logbook-table td:nth-child(3) {
594
573
font-family: var(--mono);
595
574
color: var(--muted-ink);
596
575
white-space: nowrap;
597
576
}
598
Removed:
/* The three-dot menu always sits beside the duration at the row's end. */
599
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(4) {
600
Removed:
flex: 0 0 auto;
601
Removed:
margin-left: auto;
602
Removed:
text-align: right;
603
Removed:
}
604
577
.logbook-duration,
605
578
.logbook-progress {
606
579
white-space: nowrap;
@@ -810,72 +783,6 @@
810
783
@keyframes logbook-detail-open {
811
784
from { opacity: 0; transform: translateY(-0.25rem); }
812
785
to { opacity: 1; transform: none; }
813
Removed:
}
814
Removed:
@media (min-width: 42.0625rem) {
815
Removed:
.logbook-table {
816
Removed:
display: table;
817
Removed:
border-collapse: collapse;
818
Removed:
border-spacing: 0;
819
Removed:
}
820
Removed:
.logbook-table thead {
821
Removed:
position: static;
822
Removed:
display: table-header-group;
823
Removed:
width: auto;
824
Removed:
height: auto;
825
Removed:
overflow: visible;
826
Removed:
clip: auto;
827
Removed:
white-space: normal;
828
Removed:
}
829
Removed:
.logbook-table tbody { display: table-row-group; }
830
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) {
831
Removed:
display: table-row;
832
Removed:
border: none;
833
Removed:
border-radius: 0;
834
Removed:
background: transparent;
835
Removed:
box-shadow: none;
836
Removed:
}
837
Removed:
.logbook-table th,
838
Removed:
.logbook-table td {
839
Removed:
display: table-cell;
840
Removed:
padding: 0.5rem 0.75rem;
841
Removed:
border-bottom: 1px solid var(--rule);
842
Removed:
text-align: left;
843
Removed:
}
844
Removed:
.logbook-table th {
845
Removed:
color: var(--muted-ink);
846
Removed:
font: 700 var(--font-size-small)/1 var(--sans);
847
Removed:
letter-spacing: 0.04em;
848
Removed:
text-transform: uppercase;
849
Removed:
}
850
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(n) {
851
Removed:
display: table-cell;
852
Removed:
padding: 0.5rem 0.75rem;
853
Removed:
}
854
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(1)::after {
855
Removed:
content: none;
856
Removed:
}
857
Removed:
.logbook-table tbody > tr:not(.logbook-detail-row) > td:nth-child(1) {
858
Removed:
font-family: var(--mono);
859
Removed:
white-space: nowrap;
860
Removed:
}
861
Removed:
.logbook-progress { text-align: right; }
862
Removed:
.logbook-actions { width: 2.75rem; text-align: right; }
863
Removed:
.logbook-progress-toggle { min-height: 2.5rem; }
864
Removed:
.logbook-row-menu > summary { width: 2rem; height: 2rem; }
865
Removed:
.logbook-detail-row { display: table-row; margin: 0; }
866
Removed:
.logbook-detail-row > td {
867
Removed:
display: table-cell;
868
Removed:
padding: 0;
869
Removed:
border-bottom: 1px solid var(--rule);
870
Removed:
}
871
Removed:
.logbook-progress-detail {
872
Removed:
border: none;
873
Removed:
border-radius: 0;
874
Removed:
}
875
Removed:
.logbook-change-list li {
876
Removed:
grid-template-columns: minmax(0, 1fr) auto auto;
877
Removed:
}
878
Removed:
.change-efforts { grid-column: auto; }
879
786
}
880
787
@media (prefers-reduced-motion: reduce) {
881
788
.logbook-progress-detail { animation: none; }