Sidebar, timeline and calendar UI fixes - #44
Merged
Merged
Conversation
Three things wrong in the right-hand panel, from a screenshot of it in use. The account menu was anchored to `bottom: 100%`, so it opened upward from a button that is the first thing in `.dash-aside` — a column with `overflow-y: auto`. The menu rose into the panel's padding and was sheared off at the top edge, leaving "Sign out" half visible. It opens downward now, where the whole panel height is available. The `--down` modifier that existed to flip the compact header copy is gone with it: both callers wanted the same direction, so that is the base behaviour rather than a special case. The current-year card is removed. A student knows they are a junior, and it was the largest thing in a panel whose job is deadlines. `yearGroupOf` still feeds the profile page; only YEAR_GROUPS, read solely by the card's emoji picker, goes with it. At the panel's real width of 300px a deadline row carried four chips — module, round, kind, estimate — and wrapped its meta onto a third line. The round already says a College deadline is a college deadline, so the kind chip now appears only where there is no round: scholarships, FAFSA, Rolling applications and the student's own dates. The remove and Set date controls were centred against a two-line title and read as unattached; they align to the top now, beside the title they belong to. Checked by rendering the panel at 300px and the menu open at aside width. The clipping itself has no test — jsdom has no layout engine, so an assertion there would only restate the CSS. The chip rule is real logic and is tested.
They were a bare arrow glyph each, which a screen reader announces as "left arrow" with no object. The week strip's equivalents were labelled; these were not.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Deploying timeline-prototype with
|
| Latest commit: |
7b4e86e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://21f75281.timeline-prototype.pages.dev |
| Branch Preview URL: | https://fix-sidebar-ui.timeline-prototype.pages.dev |
`.tl-body` is `grid-template-columns: 1fr 280px`, and no `.tl-*` rule appeared inside any media query anywhere in the stylesheet. At 390px the fixed rail kept its full 280px and squeezed the path column to nothing. Three things were wrong, and only the first is about phones. `1fr` is `minmax(auto, 1fr)`, so the track could not shrink below the path's min-content width. Both children measured 400px inside a 358px body — overflowing their own column at every width, not just narrow ones. It is `minmax(0, 1fr)` now. `.tl-path-wrap` sized itself `min(700px, calc(100vh - 200px))` with a square aspect ratio: derived from viewport height alone, with no idea how wide its column was. Capping it at `100%` fixes that everywhere. `.tl-path-glow` was a hard 600px square behind it and did the same. Below 760px the rail then stacks under the path rather than beside it, and the square is sized against `100dvh` minus the header and the rail below it. Measured, not eyeballed: at a true 390px viewport every element now sits at 358px with right edges aligned and no document overflow; at 1100px the columns are still 724px and 280px. What this does NOT verify is how the path itself looks. jsdom has no SVG geometry, so the harness stubs getTotalLength and getPointAtLength and the node positions in it are fabricated. The box measurements above come from real CSS and are sound; the arrangement of milestones inside the square still needs a real browser.
DanialBeg
changed the title
This branch was successfully deployed
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.
Three UI fixes, from a screenshot of the sidebar in use and from measuring what that panel and the timeline actually do at real widths.
The account menu was clipped
.dash-account-dropdownwas anchored tobottom: 100%, so it opened upward from a button that is the first child of.dash-aside— a column withoverflow-y: auto. The menu rose into the panel's padding and the overflow sheared it off, leaving "Sign out" half visible.It opens downward now, where the whole panel height is below it. The
--downmodifier that existed to flip the compact header copy is gone: both callers wanted the same direction, so that is the base behaviour rather than a special case.The current-year card is removed
A student knows they are a junior, and it was the largest thing in a panel whose job is deadlines.
yearGroupOfstill feeds the profile page;YEAR_GROUPSgoes with the card, since only its emoji picker read it.Two more the sidebar screenshot showed
At the panel's real 300px:
Applications · EA · College · no date on file— and wrapped its meta onto a third line. The round already says a college deadline is a college deadline, so the kind chip now appears only where there is no round: scholarships, FAFSA, Rolling applications, and the student's own dates. Two meta lines now.The timeline had no phone layout, and overflowed at every width
.tl-bodyisgrid-template-columns: 1fr 280px, and no.tl-*rule appeared inside any media query anywhere in the stylesheet. At 390px the fixed rail kept its full 280px and squeezed the path column to nothing.Three causes, and only the first is about phones:
1frisminmax(auto, 1fr), so the track could not shrink below the path's min-content width. Both children measured 400px inside a 358px body — overflowing their own column at every width, not just narrow ones. It isminmax(0, 1fr)now..tl-path-wrapsized itselfmin(700px, calc(100vh - 200px))with a square aspect ratio — derived from viewport height alone, with no idea how wide its column was. Capping at100%fixes that everywhere..tl-path-glowwas a hard 600px square behind it, doing the same.Below 760px the rail then stacks under the path rather than beside it.
Measured, not eyeballed: at a true 390px viewport every element now sits at 358px with right edges aligned and no document overflow; at 1100px the columns are still 724px and 280px.
Accessibility
The calendar's month buttons were a bare
←/→with no accessible name — a screen reader announced "left arrow" with no object. The week strip's equivalents were already labelled; these were missed.Testing, and what is not covered
365 tests. The chip rule is real logic and is tested, including the Rolling case where there is no round chip and the kind must still appear.
Two things have no automated guard, both for the same reason — jsdom has no layout engine:
And one thing is not verified at all: how the timeline path itself looks. jsdom has no SVG geometry, so the harness stubs
getTotalLengthandgetPointAtLengthand the milestone positions in it are fabricated. The box measurements come from real CSS and are sound; the arrangement of milestones inside the square still needs a browser with a signed-in session.Not touched
The collapse handle still sits
position: fixed; top: 50%on the panel edge, floating mid-viewport against a short panel. It looks odd but is viewport-centred by design, and redesigning it was not asked for.