Nav polish: active-page indicator, topbar jitter fix, menu/swap transitions - #211
Merged
Conversation
Adds aria-current="page" to the matching nav link (or a .has-active class on the enclosing "Integrations"/"More" <summary> for pages nested in a submenu), server-rendered from request.resolver_match.url_name. Styled with an underline in --color-accent so the active page reads at a glance without competing with the existing hover treatment. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
Drops "(Challoner, 1899)" to match the plain style of the other dropdown entries (e.g. "King James Version"); the historical detail stays in the About page's fuller description. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
A page short enough to need no vertical scrollbar rendered a few pixels wider (viewport-wise) than one that does, shifting the centered, percentage-width topbar horizontally on navigation -- most visible with classic (non-overlay) scrollbars on Windows/Linux. Confirmed via measurement: topbar-inner's left offset moved from 202px to ~204px between a long and a short page before this fix. scrollbar-gutter: stable reserves the gutter unconditionally, so the topbar's position no longer depends on the current page's height. Verified fixed in Chrome, Firefox, and Edge. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
2 tasks
brianglass
changed the title
The disclosure arrow swapped between two different characters (\25be and \25b4) on open/close; those glyphs have very slightly different advance widths, which shifted the whole nav row (flex-end justified) by a pixel or two every time "integrations" or "more" toggled. Rotating one glyph in place instead guarantees identical metrics regardless of open state. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
Nav submenus ("Integrations"/"More") and the mobile hamburger menu now
fade+slide in on open and, symmetrically, fade+slide out on close --
the close needed a small JS layer (base.html) since <details>/nav-open
have no native way to defer hiding until an exit animation finishes,
including a safety timeout so a menu can't get stuck open if
animationend never arrives (e.g. a backgrounded tab).
The translation select and the Slavic/Greek + Gregorian/Julian toggles
now crossfade #orthocal-content via htmx's transition:true swap
modifier, which uses the View Transitions API where supported and
falls back to an instant swap everywhere else. Scoped to a single
view-transition-name on the outer region (not also on the narrower
#scripture-readings nested inside it) to avoid the spec's behavior of
extracting independently-named elements from their ancestor's capture,
which would otherwise split one swap into two competing transitions.
scroll-behavior: smooth added for the scripture/commemoration anchor
links. All motion is gated behind prefers-reduced-motion.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
brianglass
changed the title
…iberate Day-nav (Previous/Today/Next Day) and month-nav (readings/calendar pages) now use the same transition:true swap as the translation select and the tradition/calendar toggles, for consistency across every #orthocal-content swap. Also replaced the browser's plain default crossfade with an explicit fade+shift on #orthocal-content specifically: the default is barely visible when old and new content look nearly identical (e.g. switching tradition on a day where only a couple of extra commemorations get added), which read as "no transition" even though it was firing correctly. The explicit animation echoes the menu's dropdown-in/out motion so the swap reads as an intentional transition regardless of how much content actually changed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
The explicit fade+shift on #orthocal-content read as too exaggerated in practice. Keeping the view-transition-name (and disabling the root group's own animation, so only #orthocal-content still animates) but dropping back to the browser's plain default crossfade. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--color-accent) on whichever nav item matches the current page.scrollbar-gutter: stable) -- verified in Chrome, Firefox, Edge, and Safari.<details>/nav-openhave no native way to defer hiding for an exit animation, with a safety timeout so a menu can't get stuck open ifanimationendnever arrives.#orthocal-contentswap -- translation select, the Slavic/Greek + Gregorian/Julian toggles, day-nav (Previous/Today/Next Day), and month-nav -- now crossfades via htmx'stransition:trueswap modifier (View Transitions API where supported, instant swap fallback elsewhere), scoped to#orthocal-contentalone so the rest of the page doesn't crossfade too. Uses the browser's plain default crossfade (an earlier, more exaggerated custom fade+shift was tried and reverted).scroll-behavior: smoothfor the scripture/commemoration anchor links.prefers-reduced-motion.Bundled into one PR/deployment rather than several separate small ones.
Test plan
docker compose run --rm tests), 165/165details.open/nav-openstate resolves correctly after the exit animation)document.startViewTransitionfires for the translation select, both toggle groups, and day/month nav, and that only#orthocal-contentanimates (not the whole page)🤖 Generated with Claude Code
https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3