[OCaml] High Intensity Training Online
feat collapse navigation to one breakpoint
Drop the compact-desktop tier at 60rem. The layout now switches once at 42.0625rem: below it the mobile bottom nav and hamburger show; at or above it the inline primary nav and header sign-out show. This removes the middle band where the inline nav gave way to the hamburger.
Changed files
ENHANCEMENTS.org
@@ -3,7 +3,7 @@
3
3
4
4
* UI enhancement requests
5
5
** DONE Remove all doctrine-note elements
6
Removed:
** TODO Use one desktop-to-mobile breakpoint
6
Added:
** DONE Use one desktop-to-mobile breakpoint
7
7
Desktop has top navigation. Mobile has an identical bottom navigation.
8
8
** TODO Use three always-available navigation actions
9
9
Use `Home`, `Routine` when the user is not logging (changing to `Current Workout` while logging), and `<username>` for the workout log. Keep all three actions available in both modes.
lib/web/assets/hito.css
@@ -473,18 +473,6 @@
473
473
}
474
474
li li { color: var(--muted-ink); font-size: 0.92rem; }
475
475
476
Removed:
/* Compact desktop: from just above the mobile breakpoint up to 60rem (960px).
477
Removed:
Four inline text links plus the brand and a sign-out button start to crowd
478
Removed:
and wrap here, so the inline .primary-nav and header sign-out give way to the
479
Removed:
hamburger .menu. The bottom nav stays a mobile-only affordance. 60rem is the
480
Removed:
chosen compact-desktop breakpoint: comfortably wider than the 42rem mobile
481
Removed:
breakpoint, and about where the inline row runs out of room. */
482
Removed:
@media (min-width: 42.0625rem) and (max-width: 60rem) {
483
Removed:
.primary-nav { display: none; }
484
Removed:
.account { display: none; }
485
Removed:
.menu { display: block; }
486
Removed:
}
487
Removed:
488
476
@media (max-width: 42rem) {
489
477
.app-shell {
490
478
padding: 0 0.75rem calc(6.75rem + env(safe-area-inset-bottom));
@@ -495,46 +483,6 @@
495
483
padding: 0.9rem 0 0.7rem;
496
484
}
497
485
498
Removed:
.primary-nav { display: none; }
499
Removed:
500
Removed:
/* The inline header sign-out is hidden with the primary nav; the hamburger
501
Removed:
.menu is retained so sign-out stays reachable. The bottom nav carries the
502
Removed:
three main destinations but has no sign-out. */
503
Removed:
.account { display: none; }
504
Removed:
.menu { display: block; }
505
Removed:
506
Removed:
.bottom-nav {
507
Removed:
position: fixed;
508
Removed:
z-index: 20;
509
Removed:
right: 0;
510
Removed:
bottom: 0;
511
Removed:
left: 0;
512
Removed:
display: grid;
513
Removed:
grid-template-columns: repeat(4, minmax(0, 1fr));
514
Removed:
gap: 1px;
515
Removed:
border-top: 2px solid var(--ink);
516
Removed:
background: var(--ink);
517
Removed:
box-shadow: 0 -0.35rem 1.2rem rgba(26, 26, 22, 0.15);
518
Removed:
padding-bottom: env(safe-area-inset-bottom);
519
Removed:
}
520
Removed:
521
Removed:
.bottom-nav > a {
522
Removed:
display: grid;
523
Removed:
min-height: 3.5rem;
524
Removed:
place-items: center;
525
Removed:
color: var(--ink);
526
Removed:
background: var(--paper-raised);
527
Removed:
font: 700 0.76rem/1.1 var(--sans);
528
Removed:
letter-spacing: 0.025em;
529
Removed:
text-align: center;
530
Removed:
text-decoration: none;
531
Removed:
}
532
Removed:
533
Removed:
.bottom-nav > a:hover {
534
Removed:
color: var(--oxblood-dark);
535
Removed:
background: #ece4d5;
536
Removed:
}
537
Removed:
538
486
.page-surface { min-height: calc(100vh - 9rem); padding: 1.25rem; }
539
487
}
540
488
@@ -567,8 +515,10 @@
567
515
outline-offset: 0.35rem;
568
516
}
569
517
570
Removed:
/* Mobile-first navigation. Compact controls are the baseline; wider layouts
571
Removed:
opt into inline navigation only when they have enough horizontal room. */
518
Added:
/* Mobile-first navigation with a single desktop breakpoint at 42.0625rem.
519
Added:
Below it, the layout is mobile: a fixed bottom nav and the hamburger menu.
520
Added:
At or above it, the layout is desktop: the inline primary nav and header
521
Added:
sign-out replace both. */
572
522
.primary-nav,
573
523
.account { display: none; }
574
524
.menu { display: block; }
@@ -597,14 +547,15 @@
597
547
text-align: center;
598
548
text-decoration: none;
599
549
}
550
Added:
.bottom-nav > a:hover {
551
Added:
color: var(--oxblood-dark);
552
Added:
background: #ece4d5;
553
Added:
}
600
554
.app-shell { padding: 0 0.75rem calc(6.75rem + env(safe-area-inset-bottom)); }
601
555
602
556
@media (min-width: 42.0625rem) {
603
557
.app-shell { padding: 0 1rem 2.5rem; }
604
558
.bottom-nav { display: none; }
605
Removed:
}
606
Removed:
607
Removed:
@media (min-width: 60.0625rem) {
608
559
.primary-nav { display: flex; }
609
560
.account { display: block; }
610
561
.menu { display: none; }