Story #2560: implement the unavailable library page UI - #2578
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
e674ea5 to
3dcd88b
Compare
3dcd88b to
bb671ce
Compare
julhoang
left a comment
julhoang
left a comment
There was a problem hiding this comment.
Hi @ycanales , thanks so much for tackling hero refactor to adjust the version banner placement!
Currently the banner adds 40px to the overall height of the banner, whereas our intention is actually to have the banner sit on top of the hero (position: absolute), so that it doesn't cause a layout shift when user dismisses it. Would you mind addressing this? 🙏
b35f7c4 to
2cb6776
Compare
jlchilders11
left a comment
jlchilders11
left a comment
There was a problem hiding this comment.
Looks good to me, responds to all sizes and provides expected output on the scenarios!
Replaces the placeholder on the v3 library subpage with the designed empty state: headline, a sentence naming the library and versions, a "Switch to ..." CTA and the bookshelf illustration, built on the shared library hero. - Add optional cta_label/cta_url/cta_icon_name to _hero_library.html, rendered through the existing hero button component - Add a hero--library-unavailable variant: page surface instead of the accent background, Figma's 32px content rhythm, bottom-flush illustration blended into the surface, and a min-height so the longer copy can't overflow the version alert in the tablet band - Build the sentence and CTA in the view, since both branch on data: a library with no releases has no "first release" clause and nowhere to switch to, and a library dropped from Boost points at its last release rather than latest - Skip the subpage card context entirely when the version is missing
Drop the parts that restate what the declarations already show and keep the reasons that are not visible from the code: the --header-height resolution trap, the stacking context that closes the blending group, and why the block's fixed height becomes a floor.
The first-release lookup only feeds the 'elif' sentence, so evaluate it there instead of unconditionally. Its filters were also a copy of the newest-release lookup's, so both now derive from one queryset.
…state master and develop carry no version number, so the numeric comparison placed them before the library's first release and the page offered the 'first release' sentence for a library that had left Boost. They are branch heads, so they sort after every release instead. Also word them as 'the develop branch' rather than 'Boost develop'.
The alert sat in the hero's column, so showing or dismissing it moved everything below by its height plus the section gap. It now overlays the slack the hero already leaves under the header, and .hero__block keeps its own clearance, so the hero is the same height either way. Below 767px there is no such slack and the message can wrap to three lines, so the alert stays in flow there rather than cover the heading.
(cherry picked from commit 1ca4dcc)
b2a0d70 to
efa1448
Compare
3 participants
Issue: #2560
Summary & Context
Replaces the inline placeholder on the v3 library subpage with the designed empty state for a library that has no version in the selected Boost release: headline, a sentence naming the library and versions, a "Switch to ..." CTA and the bookshelf illustration.
Changes
View (
libraries/views.py)LibraryDetail.get_missing_version_context(), which builds the sentence and the CTA label/URL. The sentence has two forms: past a library's last release, "The last release which included X was Y"; before its first, "The first release of X library was version Y". The two are selected by a numeric version comparison (cleaned_version_parts_int).Library.first_boost_versionspans them, so Boost.Decimal was announcing "version 1.91.0.beta1".get_v3_context_data()now returns early for the missing-version case, so the subpage's contributor, quick-start, dependency and benchmark context is no longer computed for a page that renders none of it.Hero component (
templates/v3/includes/_hero_library.html)cta_label/cta_url/cta_icon_name, rendered through the existing_button_hero.htmlinside.hero__actions. The block collapses when they are absent, so every existing caller is unchanged.Empty state template (
templates/v3/includes/_library_version_unavailable.html, new)empty-library-light/dark.pngillustration already shipped for the library-list empty state. No new asset: it is the same artwork as the Figma frame.Styles (
static/css/v3/heros.css)hero--library-unavailablevariant: page surface instead of the hero's accent yellow, Figma's 32px rhythm between headline, sentence and CTA, and a bottom-flush illustration.min-heightfor this variant only, since the empty state's copy is longer than a library hero's and would otherwise overflow the CTA onto the version alert in the tablet band.multiply/screen. That needs a matching background on.hero__image, because.hero__blockopens a stacking context and closes the blending group above the section background.Tests (
libraries/tests/test_views.py)test_library_detail_missing_versionwithoverride_flag("v3", active=False). It was passing only on ambient flag state and flipped to the v3 template whenever the cached waffle flag was warm.Library.first_boost_versionstill spans betas, and it feeds the hero's "Added in {version}" chip, so a populated Boost.Decimal page reads "Added in 1.91.0.beta1". Fixing the shared property is out of scope here, and the chip and this empty state never render on the same page._hero_library.htmlcosts three optional variables and keeps the responsive type ladder, the theme-aware image swap and the version alert in one place. A separate template would have duplicated all three and drifted from the other heroes.Peer-Testing Guidelines
Every URL below is real Boost history and works on any environment with the catalogue imported.
(Local only.) If the page renders the legacy layout, the cached
v3waffle flag is stale:Library newer than the release. Visit
/library/1.85.0/decimal/. Expect the headline, a sentence naming both versions, a "Switch to latest (1.91.0)" button naming the current release, and the illustration on the page surface rather than the yellow hero background. The button should land on/library/latest/decimal/.Library removed from Boost. Visit
/library/latest/compatibility/. The sentence should read "The last release which included Boost.Compatibility was 1.86.0", and the button "Switch to 1.86.0", linking to/library/1.86.0/compatibility/rather than back to latest.Responsive and themes. Resize through 1440 / 768 / 375 in both themes. The illustration should have no visible panel edge behind it in either theme, and at 768 the CTA must stay clear of the version alert banner.
No regression on a populated subpage. Visit
/library/latest/decimal/and confirm the hero still shows the tag row, the Documentation / Source code / Slack / GitHub Issues links and the Master/Develop buttons, with no CTA button. Those branch buttons should be absent from the empty state.More URLs, covering both cases:
/library/1.85.0/decimal//library/1.80.0/cobalt//library/1.80.0/mysql//library/latest/compatibility//library/latest/signals/To find more of the first kind without database access: open any library at
latestand read the "Added in {version}" chip, then pick an older release from the version dropdown. The second kind needs no searching, since Compatibility and Signals are the only two.Screenshots
Self-review Checklist
Frontend
<h1>carries the message, the CTA is a plain focusable link, the illustration is decorative (alt="")