From 092a118b465879019caaa03b30800c743aa9eee6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Tue, 4 Aug 2026 22:45:35 -0400 Subject: [PATCH 1/8] feat: implement the unavailable library page UI 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 --- libraries/tests/test_views.py | 42 +++++++++++++- libraries/views.py | 57 ++++++++++++++++++- static/css/v3/heros.css | 54 ++++++++++++++++++ templates/v3/includes/_hero_library.html | 8 +++ .../_library_version_unavailable.html | 21 +++++++ templates/v3/libraries/library-subpage.html | 6 +- 6 files changed, 180 insertions(+), 8 deletions(-) create mode 100644 templates/v3/includes/_library_version_unavailable.html diff --git a/libraries/tests/test_views.py b/libraries/tests/test_views.py index 90f0c71ce..5ad56b04b 100644 --- a/libraries/tests/test_views.py +++ b/libraries/tests/test_views.py @@ -264,8 +264,10 @@ def test_library_detail_404(library, old_version, tp): tp.response_404(response) +@waffle.testutils.override_flag("v3", active=False) def test_library_detail_missing_version(library, old_version, tp): - # custom error due to no existing version + # custom error due to no existing version; pinned to the legacy template now + # that v3 renders its own empty state url = tp.reverse("library-detail", old_version.display_name, library.slug) response = tp.get(url) assert ( @@ -274,6 +276,44 @@ def test_library_detail_missing_version(library, old_version, tp): ) +@waffle.testutils.override_flag("v3", active=True) +def test_library_detail_missing_version_v3_empty_state( + library_version, old_version, tp +): + """The v3 subpage swaps in the empty state, pointing at the current release.""" + library = library_version.library + url = tp.reverse("library-detail", old_version.display_name, library.slug) + response = tp.get(url) + tp.response_200(response) + tp.assertContext("library_version_missing", True) + tp.assertContext( + "library_version_missing_description", + "There is no version of the Boost.MultiArray library for Boost 1.70.0. " + "The first release of Boost.MultiArray library was version 1.79.0.", + ) + tp.assertContext("library_version_missing_cta_label", "Switch to latest (1.79.0)") + tp.assertContext( + "library_version_missing_cta_url", + tp.reverse("library-detail", "latest", library.slug), + ) + + +@waffle.testutils.override_flag("v3", active=True) +def test_library_detail_missing_version_v3_cta_targets_newest_available( + library, version, old_version, tp +): + """A library dropped from Boost sends the visitor to its last release, not latest.""" + baker.make("libraries.LibraryVersion", library=library, version=old_version) + url = tp.reverse("library-detail", version.display_name, library.slug) + response = tp.get(url) + tp.response_200(response) + tp.assertContext("library_version_missing_cta_label", "Switch to 1.70.0") + tp.assertContext( + "library_version_missing_cta_url", + tp.reverse("library-detail", old_version.slug, library.slug), + ) + + def test_library_docs_redirect(tp, library, library_version): """ GET /libs/{library_slug}/ diff --git a/libraries/views.py b/libraries/views.py index bd91a2f58..f9514d78e 100644 --- a/libraries/views.py +++ b/libraries/views.py @@ -547,8 +547,7 @@ def get_context_data(self, **kwargs): except LibraryVersion.DoesNotExist: # No LibraryVersion for the selected release (e.g. viewing a version # older than the library's first release). Flag it so the v3 template - # renders a placeholder instead of an empty subpage. - # TODO: replace with a designed empty-state (separate ticket). + # renders the empty state instead of an empty subpage. context["library_version_missing"] = True return context @@ -586,6 +585,11 @@ def get_context_data(self, **kwargs): def get_v3_context_data(self, **kwargs): context = {**kwargs} + if context.get("library_version_missing"): + # The empty state renders a hero and nothing else, so none of the + # card context below applies. + return self.get_missing_version_context(context) + version_str = context.get("version_str") or LATEST_RELEASE_URL_PATH_STR library_version = context.get("library_version") @@ -657,6 +661,55 @@ def get_v3_context_data(self, **kwargs): return context + def get_missing_version_context(self, context): + """Add the copy and CTA for the "no records for this version" empty state. + + Built here rather than in the template because both the sentence and the + CTA branch on data: a library with no releases at all has no "first + release" clause and nowhere to switch to, and the newest release that + actually ships the library is only the current one for libraries that + haven't been dropped from Boost. + """ + library = self.object + selected_version = context.get("selected_version") + description = ( + f"There is no version of the {library.display_name} library for Boost " + f"{selected_version.display_name}." + ) + first_version = library.first_boost_version + if first_version: + description += ( + f" The first release of {library.display_name} library was version " + f"{first_version.display_name}." + ) + context["library_version_missing_description"] = description + + newest_version = ( + Version.objects.active() + .filter(library_version__library=library, beta=False, full_release=True) + .order_by("-name") + .first() + ) + if newest_version: + is_latest = newest_version == Version.objects.most_recent() + context["library_version_missing_cta_url"] = reverse( + "library-detail", + kwargs={ + "version_slug": ( + LATEST_RELEASE_URL_PATH_STR + if is_latest + else newest_version.slug + ), + "library_slug": library.slug, + }, + ) + context["library_version_missing_cta_label"] = ( + f"Switch to latest ({newest_version.display_name})" + if is_latest + else f"Switch to {newest_version.display_name}" + ) + return context + def get_dependency_diff(self, library_version): diffs = library_version.version.get_dependency_diffs( library=library_version.library diff --git a/static/css/v3/heros.css b/static/css/v3/heros.css index 31840cf23..7b7de1b68 100644 --- a/static/css/v3/heros.css +++ b/static/css/v3/heros.css @@ -179,6 +179,8 @@ display: none; } +/* Shared by the home hero and any base hero passing a cta_label/cta_url + (e.g. the library-unavailable variant), so the selector stays unscoped. */ .hero__actions { display: flex; flex-direction: row; @@ -777,6 +779,58 @@ html.dark .hero__links .btn-icon-library:hover { background: var(--color-surface-weak-accent-yellow); } +/* Library unavailable in the selected release (library subpage empty state): + the illustration sits on the page surface rather than the accent background + the other image heroes use. */ +.hero--library-unavailable, +.dark .hero--library-unavailable { + background-color: var(--color-surface-page); +} + +/* Raise the base hero's 662px cap so the flex split against the illustration + sets the text width instead (~700px at 1440px, matching Figma), which breaks + the 64px headline after "records" onto a second line. */ +.hero--library-unavailable .hero__content { + max-width: 830px; + gap: var(--space-xl); +} + +/* Figma spaces headline, sentence and CTA evenly at 32px; the base hero packs + the headline and sentence tighter. */ +.hero--library-unavailable .hero__text-block { + gap: var(--space-xl); +} + +/* Figma sits the illustration flush with the bottom of the block. The empty + state's copy is longer than a library hero's, so the block's fixed height + becomes a floor — otherwise the CTA overflows onto the version alert once the + headline wraps to three lines in the tablet band. */ +.hero--library-unavailable .hero__block { + padding-bottom: 0; + height: auto; + min-height: var(--hero-block-height); +} + +/* The blend below composites against this box, not against .hero: .hero__block + opens a stacking context (position/z-index), which closes the blending group + above the section's background. Repeating the surface color here gives the + illustration the backdrop it needs to blend into. */ +.hero--library-unavailable .hero__image { + align-self: flex-end; + background-color: var(--color-surface-page); +} + +/* The illustration ships on an opaque plate (white in the light export, black in + the dark one), so blend it away — otherwise its edge shows as a panel against + the page surface. Matches the multiply blend in Figma. */ +.hero--library-unavailable .hero__img--light { + mix-blend-mode: multiply; +} + +.hero--library-unavailable .hero__img--dark { + mix-blend-mode: screen; +} + /* ----- Hero variants: tablet ----- */ /* In the tablet band the community foreground is still full width but the mascot has moved toward center, so cap the text column at 50vw to keep it clear of the art. diff --git a/templates/v3/includes/_hero_library.html b/templates/v3/includes/_hero_library.html index 56fae2c05..42fc8a384 100644 --- a/templates/v3/includes/_hero_library.html +++ b/templates/v3/includes/_hero_library.html @@ -13,6 +13,9 @@ source_url (optional) — Source code link URL. Omit to hide. slack_url (optional) — Discuss in Slack URL. Omit to hide. github_url (optional) — GitHub Issues URL. Omit to hide. + cta_label (optional) — Label for a primary hero button below the text. Needs cta_url. + cta_url (optional) — Destination for that button. Needs cta_label. + cta_icon_name (optional) — Icon for that button, from includes/icon.html. Defaults to "arrow-right". hero_image_url (optional) — Image URL. If omitted, image block is not shown. hero_image_url_mobile (optional) — Art-directed image swapped in at <=767px (e.g. a tighter crop). If omitted, the desktop image is used at all widths. hero_background_image_url (optional) — Background image URL for the hero container. @@ -57,6 +60,11 @@

+ {% if cta_label and cta_url %} +
+ {% include "v3/includes/_button_hero.html" with label=cta_label url=cta_url icon_name=cta_icon_name|default:"arrow-right" style="primary" %} +
+ {% endif %} {% if doc_url or source_url or slack_url or github_url or rss_url %}
{% if doc_url %} diff --git a/templates/v3/includes/_library_version_unavailable.html b/templates/v3/includes/_library_version_unavailable.html new file mode 100644 index 000000000..21216f24f --- /dev/null +++ b/templates/v3/includes/_library_version_unavailable.html @@ -0,0 +1,21 @@ +{% load custom_static %} +{% comment %} + V3 library subpage empty state: the selected Boost release has no version of + this library (usually a release older than the library's first, but also a + library that has since been dropped from Boost). + + Reuses the shared library hero — headline, sentence, "Switch to …" button and + the bookshelf illustration — on the page surface instead of the hero's accent + background. + + Context (LibraryDetail.get_missing_version_context): + library_version_missing_description — sentence naming the library and versions. + library_version_missing_cta_label / _cta_url — the "Switch to …" button; both + are absent when the library has no releases at all, which collapses the button. + + Usage: + {% include "v3/includes/_library_version_unavailable.html" %} +{% endcomment %} +{% large_static 'img/v3/library-page/empty-library-light.png' as empty_library_image_light %} +{% large_static 'img/v3/library-page/empty-library-dark.png' as empty_library_image_dark %} +{% include "v3/includes/_hero_library.html" with extra_classes="hero--library-unavailable" title="No library records available for this version." description=library_version_missing_description cta_label=library_version_missing_cta_label cta_url=library_version_missing_cta_url hero_image_url="" hero_image_url_light=empty_library_image_light hero_image_url_dark=empty_library_image_dark %} diff --git a/templates/v3/libraries/library-subpage.html b/templates/v3/libraries/library-subpage.html index 048b85977..7c85e8f18 100644 --- a/templates/v3/libraries/library-subpage.html +++ b/templates/v3/libraries/library-subpage.html @@ -11,11 +11,7 @@ {% block content %} {% if library_version_missing %} - {% comment %} TODO: Extract this to a separate template & implement UI for empty state {% endcomment %} -
-

No library records available for this version.

-

There is no version of the {{ object.display_name }} library for Boost {{ selected_version.display_name }}. The first release of {{ object.display_name }} library was version {{ object.first_boost_version.display_name }}.

-
+ {% include "v3/includes/_library_version_unavailable.html" %} {% else %} {% with cpp_ver=library_version.get_cpp_standard_minimum_display|default:"C++03" %} {% if is_flagship_lib %} From 31497010c354503eb27e679500e0ad85943849f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Wed, 12 Aug 2026 12:33:57 -0400 Subject: [PATCH 2/8] fix(2560): update the message shown for dropped libraries --- libraries/tests/test_views.py | 34 ++++++++++++++++++++++++++- libraries/views.py | 43 ++++++++++++++++++++++++++--------- 2 files changed, 65 insertions(+), 12 deletions(-) diff --git a/libraries/tests/test_views.py b/libraries/tests/test_views.py index 5ad56b04b..cd676ec37 100644 --- a/libraries/tests/test_views.py +++ b/libraries/tests/test_views.py @@ -302,11 +302,16 @@ def test_library_detail_missing_version_v3_empty_state( def test_library_detail_missing_version_v3_cta_targets_newest_available( library, version, old_version, tp ): - """A library dropped from Boost sends the visitor to its last release, not latest.""" + """A library that left Boost points at its last release, not at latest.""" baker.make("libraries.LibraryVersion", library=library, version=old_version) url = tp.reverse("library-detail", version.display_name, library.slug) response = tp.get(url) tp.response_200(response) + tp.assertContext( + "library_version_missing_description", + "There is no version of the Boost.MultiArray library for Boost 1.79.0. " + "The last release which included Boost.MultiArray was 1.70.0.", + ) tp.assertContext("library_version_missing_cta_label", "Switch to 1.70.0") tp.assertContext( "library_version_missing_cta_url", @@ -314,6 +319,33 @@ def test_library_detail_missing_version_v3_cta_targets_newest_available( ) +@waffle.testutils.override_flag("v3", active=True) +def test_library_detail_missing_version_v3_before_first_release_of_departed_library( + library, version, old_version, tp +): + """A release older than the first still gets the "first release" sentence. + + A library that has left Boost is still missing from the releases that predate + it, and there "the last release which included it" would answer a question the + visitor did not ask. + """ + older_version = baker.make( + "versions.Version", + name="boost-1.60.0", + release_date=datetime.date.today() - datetime.timedelta(days=730), + fully_imported=True, + ) + baker.make("libraries.LibraryVersion", library=library, version=old_version) + url = tp.reverse("library-detail", older_version.display_name, library.slug) + response = tp.get(url) + tp.response_200(response) + tp.assertContext( + "library_version_missing_description", + "There is no version of the Boost.MultiArray library for Boost 1.60.0. " + "The first release of Boost.MultiArray library was version 1.70.0.", + ) + + def test_library_docs_redirect(tp, library, library_version): """ GET /libs/{library_slug}/ diff --git a/libraries/views.py b/libraries/views.py index f9514d78e..90192b502 100644 --- a/libraries/views.py +++ b/libraries/views.py @@ -665,10 +665,9 @@ def get_missing_version_context(self, context): """Add the copy and CTA for the "no records for this version" empty state. Built here rather than in the template because both the sentence and the - CTA branch on data: a library with no releases at all has no "first - release" clause and nowhere to switch to, and the newest release that - actually ships the library is only the current one for libraries that - haven't been dropped from Boost. + CTA branch on data: a library with no releases at all has no second + sentence and nowhere to switch to, and a library that has left Boost + needs the last release that shipped it rather than the first. """ library = self.object selected_version = context.get("selected_version") @@ -676,13 +675,6 @@ def get_missing_version_context(self, context): f"There is no version of the {library.display_name} library for Boost " f"{selected_version.display_name}." ) - first_version = library.first_boost_version - if first_version: - description += ( - f" The first release of {library.display_name} library was version " - f"{first_version.display_name}." - ) - context["library_version_missing_description"] = description newest_version = ( Version.objects.active() @@ -690,6 +682,35 @@ def get_missing_version_context(self, context): .order_by("-name") .first() ) + + # Two different absences land here. Past the library's last release it has + # left Boost, so the useful fact is where it stopped. Before its first, it + # simply hadn't been added yet. + left_boost = ( + newest_version + and selected_version.cleaned_version_parts_int + > newest_version.cleaned_version_parts_int + ) + # Not library.first_boost_version: that spans betas, so a library whose + # first appearance was a beta would be announced as "version 1.91.0.beta1". + first_version = ( + Version.objects.active() + .filter(library_version__library=library, beta=False, full_release=True) + .order_by("name") + .first() + ) + if left_boost: + description += ( + f" The last release which included {library.display_name} was " + f"{newest_version.display_name}." + ) + elif first_version: + description += ( + f" The first release of {library.display_name} library was version " + f"{first_version.display_name}." + ) + context["library_version_missing_description"] = description + if newest_version: is_latest = newest_version == Version.objects.most_recent() context["library_version_missing_cta_url"] = reverse( From 8a8b1ad48856d2413f6c697e549f0f9a5c1bad3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Wed, 12 Aug 2026 15:07:08 -0400 Subject: [PATCH 3/8] fix(2560): fix width of version alert --- static/css/v3/heros.css | 40 ++++++++++++++++++++++++ templates/v3/includes/_hero_library.html | 9 +++++- 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/static/css/v3/heros.css b/static/css/v3/heros.css index 7b7de1b68..80db48f50 100644 --- a/static/css/v3/heros.css +++ b/static/css/v3/heros.css @@ -488,6 +488,46 @@ padding-top: var(--space-hero-padding-top); } +/* The header overlays the top of the page, so whatever comes first inside the + hero has to clear it. Normally that is .hero__block and its padding does the + work, but the version alert renders above the block, so the clearance moves up + to the section and the block gives its own back. The section's gap then spaces + the alert from the block. Clearance matches the reservation in header.css. */ +.hero:has(> .banner) { + /* 48px is .header's own --header-height. That custom property cannot be read + from out here: the value that reaches the hero is an unrelated legacy 2.5rem, + which silently under-reserves and tucks the alert under the header. The rest + of the footprint is the header's vertical padding. */ + --hero-header-footprint: calc(48px + 2 * var(--space-default)); + /* The alert lines up with the nav pill above it, so it takes the header's + own horizontal padding. */ + --hero-banner-inset: var(--space-large); + padding-top: var(--hero-header-footprint); +} + +/* Match the header's box so the alert and the nav share both edges: same 1440 + container, same inset. Without this the banner runs the full width of the + section while the nav sits inset, and the two edges disagree. */ +.hero > .banner { + width: calc(100% - 2 * var(--hero-banner-inset)); + max-width: calc(1440px - 2 * var(--hero-banner-inset)); + margin-inline: auto; +} + +/* Mirrors the header's own padding switch in header.css, which goes from + --space-default to --space-medium at this width. Without it the alert slides + under the taller tablet header. */ +@media (max-width: 990px) { + .hero:has(> .banner) { + --hero-header-footprint: calc(48px + 2 * var(--space-medium)); + --hero-banner-inset: var(--space-medium); + } +} + +.hero:has(> .banner) .hero__block { + padding-top: 0; +} + .hero--no-image .hero__block { align-items: center; } diff --git a/templates/v3/includes/_hero_library.html b/templates/v3/includes/_hero_library.html index 42fc8a384..592f077ed 100644 --- a/templates/v3/includes/_hero_library.html +++ b/templates/v3/includes/_hero_library.html @@ -27,12 +27,20 @@ row is hidden. If none of doc_url/source_url/slack_url/github_url are passed, the links row is hidden. + When version_alert/version_alert_message/selected_version are in context, the + v3/includes/_version_alert.html banner renders as the first child of the hero + section, above the block, which is where the design puts it. Callers using + `only` must forward those three explicitly. The banner carries the clearance + for the absolutely positioned header in that case; see .hero:has(> .banner) in + heros.css. + Usage: {% include "v3/includes/_hero_library.html" with title="Boost.Asio" description="..." doc_url="/doc/libs/..." %} {% endcomment %}
+ {% include "v3/includes/_version_alert.html" %}
@@ -110,5 +118,4 @@

- {% include "v3/includes/_version_alert.html" %}

From f3428247fb91dee347289d2d4829fb6b70c2ac51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Fri, 14 Aug 2026 15:39:07 -0400 Subject: [PATCH 4/8] docs(2560): trim heros.css comments to non-obvious decisions 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. --- static/css/v3/heros.css | 55 ++++++++++++++--------------------------- 1 file changed, 19 insertions(+), 36 deletions(-) diff --git a/static/css/v3/heros.css b/static/css/v3/heros.css index 80db48f50..6a90eef8e 100644 --- a/static/css/v3/heros.css +++ b/static/css/v3/heros.css @@ -179,8 +179,7 @@ display: none; } -/* Shared by the home hero and any base hero passing a cta_label/cta_url - (e.g. the library-unavailable variant), so the selector stays unscoped. */ +/* Deliberately unscoped: any hero passing cta_label/cta_url renders this. */ .hero__actions { display: flex; flex-direction: row; @@ -488,35 +487,25 @@ padding-top: var(--space-hero-padding-top); } -/* The header overlays the top of the page, so whatever comes first inside the - hero has to clear it. Normally that is .hero__block and its padding does the - work, but the version alert renders above the block, so the clearance moves up - to the section and the block gives its own back. The section's gap then spaces - the alert from the block. Clearance matches the reservation in header.css. */ +/* The header is absolutely positioned, so the hero reserves its space. That is + normally .hero__block's padding, but a banner renders above the block, so the + clearance moves up to the section here and the block gives its own back. */ .hero:has(> .banner) { - /* 48px is .header's own --header-height. That custom property cannot be read - from out here: the value that reaches the hero is an unrelated legacy 2.5rem, - which silently under-reserves and tucks the alert under the header. The rest - of the footprint is the header's vertical padding. */ + /* Not var(--header-height): outside .header that resolves to an unrelated + legacy 2.5rem and silently under-reserves. 48px is .header's own value. */ --hero-header-footprint: calc(48px + 2 * var(--space-default)); - /* The alert lines up with the nav pill above it, so it takes the header's - own horizontal padding. */ --hero-banner-inset: var(--space-large); padding-top: var(--hero-header-footprint); } -/* Match the header's box so the alert and the nav share both edges: same 1440 - container, same inset. Without this the banner runs the full width of the - section while the nav sits inset, and the two edges disagree. */ +/* Mirror the header's box so the alert's edges line up with the nav's. */ .hero > .banner { width: calc(100% - 2 * var(--hero-banner-inset)); max-width: calc(1440px - 2 * var(--hero-banner-inset)); margin-inline: auto; } -/* Mirrors the header's own padding switch in header.css, which goes from - --space-default to --space-medium at this width. Without it the alert slides - under the taller tablet header. */ +/* Tracks the header's own padding switch in header.css at this same width. */ @media (max-width: 990px) { .hero:has(> .banner) { --hero-header-footprint: calc(48px + 2 * var(--space-medium)); @@ -819,31 +808,27 @@ html.dark .hero__links .btn-icon-library:hover { background: var(--color-surface-weak-accent-yellow); } -/* Library unavailable in the selected release (library subpage empty state): - the illustration sits on the page surface rather than the accent background - the other image heroes use. */ +/* Library subpage empty state: no version of the library in this release. */ .hero--library-unavailable, .dark .hero--library-unavailable { background-color: var(--color-surface-page); } -/* Raise the base hero's 662px cap so the flex split against the illustration - sets the text width instead (~700px at 1440px, matching Figma), which breaks - the 64px headline after "records" onto a second line. */ +/* A ceiling, not the target width: it lifts the base hero's 662px cap so the + flex split against the illustration sets the width (~700px at 1440, Figma). */ .hero--library-unavailable .hero__content { max-width: 830px; gap: var(--space-xl); } -/* Figma spaces headline, sentence and CTA evenly at 32px; the base hero packs - the headline and sentence tighter. */ +/* Figma spaces headline, sentence and CTA evenly; the base hero packs the + headline and sentence tighter. */ .hero--library-unavailable .hero__text-block { gap: var(--space-xl); } -/* Figma sits the illustration flush with the bottom of the block. The empty - state's copy is longer than a library hero's, so the block's fixed height - becomes a floor — otherwise the CTA overflows onto the version alert once the +/* This copy runs longer than a library hero's, so the fixed height becomes a + floor: at a fixed height the CTA overflows onto the version alert once the headline wraps to three lines in the tablet band. */ .hero--library-unavailable .hero__block { padding-bottom: 0; @@ -852,17 +837,15 @@ html.dark .hero__links .btn-icon-library:hover { } /* The blend below composites against this box, not against .hero: .hero__block - opens a stacking context (position/z-index), which closes the blending group - above the section's background. Repeating the surface color here gives the - illustration the backdrop it needs to blend into. */ + opens a stacking context, which closes the blending group above the section's + background. Hence the surface color repeated here. */ .hero--library-unavailable .hero__image { align-self: flex-end; background-color: var(--color-surface-page); } -/* The illustration ships on an opaque plate (white in the light export, black in - the dark one), so blend it away — otherwise its edge shows as a panel against - the page surface. Matches the multiply blend in Figma. */ +/* The illustration ships on an opaque plate (white in the light export, black + in the dark one), so blend it away or its edge shows as a panel. */ .hero--library-unavailable .hero__img--light { mix-blend-mode: multiply; } From fea89c2eeb7bf61cab98ec2132dac546d2640c9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Fri, 14 Aug 2026 15:43:14 -0400 Subject: [PATCH 5/8] refactor(2560): share the released-versions queryset in the empty state 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. --- libraries/views.py | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/libraries/views.py b/libraries/views.py index 90192b502..d29106beb 100644 --- a/libraries/views.py +++ b/libraries/views.py @@ -676,12 +676,13 @@ def get_missing_version_context(self, context): f"{selected_version.display_name}." ) - newest_version = ( - Version.objects.active() - .filter(library_version__library=library, beta=False, full_release=True) - .order_by("-name") - .first() + # Betas are excluded rather than reusing library.first_boost_version, + # which spans them: a library whose first appearance was a beta would + # otherwise be announced as "version 1.91.0.beta1". + released_versions = Version.objects.active().filter( + library_version__library=library, beta=False, full_release=True ) + newest_version = released_versions.order_by("-name").first() # Two different absences land here. Past the library's last release it has # left Boost, so the useful fact is where it stopped. Before its first, it @@ -691,20 +692,12 @@ def get_missing_version_context(self, context): and selected_version.cleaned_version_parts_int > newest_version.cleaned_version_parts_int ) - # Not library.first_boost_version: that spans betas, so a library whose - # first appearance was a beta would be announced as "version 1.91.0.beta1". - first_version = ( - Version.objects.active() - .filter(library_version__library=library, beta=False, full_release=True) - .order_by("name") - .first() - ) if left_boost: description += ( f" The last release which included {library.display_name} was " f"{newest_version.display_name}." ) - elif first_version: + elif first_version := released_versions.order_by("name").first(): description += ( f" The first release of {library.display_name} library was version " f"{first_version.display_name}." From f74d2d0550bda22d57b8321f838ef1bcdf943b08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Fri, 14 Aug 2026 16:16:00 -0400 Subject: [PATCH 6/8] fix(2560): treat branch heads as ahead of every release in the empty 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'. --- libraries/tests/test_views.py | 33 +++++++++++++++++++++++++++++++++ libraries/views.py | 25 ++++++++++++++----------- 2 files changed, 47 insertions(+), 11 deletions(-) diff --git a/libraries/tests/test_views.py b/libraries/tests/test_views.py index cd676ec37..c84099fd7 100644 --- a/libraries/tests/test_views.py +++ b/libraries/tests/test_views.py @@ -346,6 +346,39 @@ def test_library_detail_missing_version_v3_before_first_release_of_departed_libr ) +@waffle.testutils.override_flag("v3", active=True) +def test_library_detail_missing_version_v3_develop_branch_of_departed_library( + library, version, old_version, tp +): + """A branch head gets the "last release" sentence and the branch wording. + + develop carries no version number, so it cannot be placed by the numeric + comparison, but it is by definition ahead of every release. + """ + develop = baker.make( + "versions.Version", + name="develop", + slug="develop", + release_date=datetime.date.today(), + full_release=False, + fully_imported=True, + ) + baker.make("libraries.LibraryVersion", library=library, version=old_version) + url = tp.reverse("library-detail", develop.slug, library.slug) + response = tp.get(url) + tp.response_200(response) + tp.assertContext( + "library_version_missing_description", + "There is no version of the Boost.MultiArray library for the develop branch. " + "The last release which included Boost.MultiArray was 1.70.0.", + ) + tp.assertContext("library_version_missing_cta_label", "Switch to 1.70.0") + tp.assertContext( + "library_version_missing_cta_url", + tp.reverse("library-detail", old_version.slug, library.slug), + ) + + def test_library_docs_redirect(tp, library, library_version): """ GET /libs/{library_slug}/ diff --git a/libraries/views.py b/libraries/views.py index d29106beb..fab9f19b6 100644 --- a/libraries/views.py +++ b/libraries/views.py @@ -4,6 +4,7 @@ import structlog +from django.conf import settings from django.contrib import messages from django.contrib.auth.mixins import LoginRequiredMixin from django.db import transaction @@ -671,25 +672,27 @@ def get_missing_version_context(self, context): """ library = self.object selected_version = context.get("selected_version") + # master and develop are branch heads, not releases: they carry no version + # number to compare against, and they are ahead of every release. + selected_is_branch = selected_version.slug in settings.BOOST_BRANCHES + selected_label = ( + f"the {selected_version.display_name} branch" + if selected_is_branch + else f"Boost {selected_version.display_name}" + ) description = ( - f"There is no version of the {library.display_name} library for Boost " - f"{selected_version.display_name}." + f"There is no version of the {library.display_name} library for " + f"{selected_label}." ) - # Betas are excluded rather than reusing library.first_boost_version, - # which spans them: a library whose first appearance was a beta would - # otherwise be announced as "version 1.91.0.beta1". released_versions = Version.objects.active().filter( library_version__library=library, beta=False, full_release=True ) newest_version = released_versions.order_by("-name").first() - # Two different absences land here. Past the library's last release it has - # left Boost, so the useful fact is where it stopped. Before its first, it - # simply hadn't been added yet. - left_boost = ( - newest_version - and selected_version.cleaned_version_parts_int + left_boost = newest_version and ( + selected_is_branch + or selected_version.cleaned_version_parts_int > newest_version.cleaned_version_parts_int ) if left_boost: From a9f1d3ac4e5534729de5d88c516749c71cf19bca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Fri, 14 Aug 2026 16:34:56 -0400 Subject: [PATCH 7/8] fix(2560): float the version alert over the hero instead of in flow 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. --- libraries/views.py | 2 -- static/css/v3/heros.css | 39 ++++++++++++++++++++++++++++++--------- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/libraries/views.py b/libraries/views.py index fab9f19b6..660a7df8a 100644 --- a/libraries/views.py +++ b/libraries/views.py @@ -672,8 +672,6 @@ def get_missing_version_context(self, context): """ library = self.object selected_version = context.get("selected_version") - # master and develop are branch heads, not releases: they carry no version - # number to compare against, and they are ahead of every release. selected_is_branch = selected_version.slug in settings.BOOST_BRANCHES selected_label = ( f"the {selected_version.display_name} branch" diff --git a/static/css/v3/heros.css b/static/css/v3/heros.css index 6a90eef8e..a766cda14 100644 --- a/static/css/v3/heros.css +++ b/static/css/v3/heros.css @@ -487,20 +487,24 @@ padding-top: var(--space-hero-padding-top); } -/* The header is absolutely positioned, so the hero reserves its space. That is - normally .hero__block's padding, but a banner renders above the block, so the - clearance moves up to the section here and the block gives its own back. */ +/* Positioning context for the alert below. */ .hero:has(> .banner) { /* Not var(--header-height): outside .header that resolves to an unrelated - legacy 2.5rem and silently under-reserves. 48px is .header's own value. */ + legacy 2.5rem, which would tuck the alert under the header. 48px is + .header's own value; the rest of its footprint is its vertical padding. */ --hero-header-footprint: calc(48px + 2 * var(--space-default)); --hero-banner-inset: var(--space-large); - padding-top: var(--hero-header-footprint); + position: relative; } -/* Mirror the header's box so the alert's edges line up with the nav's. */ +/* Lines up horizontally with the Nav. */ .hero > .banner { - width: calc(100% - 2 * var(--hero-banner-inset)); + position: absolute; + z-index: 2; + top: var(--hero-header-footprint); + left: var(--hero-banner-inset); + right: var(--hero-banner-inset); + width: auto; max-width: calc(1440px - 2 * var(--hero-banner-inset)); margin-inline: auto; } @@ -513,8 +517,25 @@ } } -.hero:has(> .banner) .hero__block { - padding-top: 0; +/* Wider heroes clear the header by more than the alert is tall, so overlaying + costs nothing. Down here there is no such slack: the block clears the header + by 32px, the release hero by 16px, and the alert wraps to three lines on a + narrow phone. Overlaying would cover the heading, and any fixed reserve would + only be a guess at how long the message runs, so the alert goes back in flow + and takes the dismiss shift that the wider layouts avoid. */ +@media (max-width: 767px) { + .hero:has(> .banner) { + padding-top: var(--hero-header-footprint); + } + + .hero:has(> .banner) .hero__block { + padding-top: 0; + } + + .hero > .banner { + position: static; + width: calc(100% - 2 * var(--hero-banner-inset)); + } } .hero--no-image .hero__block { From efa1448863ada4aef5a5a1a0d932484b7545eda0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cristian=20Y=C3=A1=C3=B1ez?= Date: Wed, 12 Aug 2026 17:20:06 -0400 Subject: [PATCH 8/8] fix: move 100vh to foundations css and rename (cherry picked from commit 1ca4dcc09511497f7ad753a05d9d10558cac5cbf) --- static/css/v3/auth-page.css | 1 - static/css/v3/foundations.css | 35 ++++++++++++++++++++++++++++++++ static/css/v3/library-page.css | 10 --------- static/css/v3/release-detail.css | 10 --------- 4 files changed, 35 insertions(+), 21 deletions(-) diff --git a/static/css/v3/auth-page.css b/static/css/v3/auth-page.css index d44d08c1e..107c99aa4 100644 --- a/static/css/v3/auth-page.css +++ b/static/css/v3/auth-page.css @@ -9,7 +9,6 @@ .auth-page { display: flex; flex-direction: column; - min-height: 100vh; } /* ── Error styling scoped to auth page ──────── */ diff --git a/static/css/v3/foundations.css b/static/css/v3/foundations.css index 341b093bb..980277e90 100644 --- a/static/css/v3/foundations.css +++ b/static/css/v3/foundations.css @@ -171,3 +171,38 @@ html.v3 code { padding-left:var(--space-medium); padding-right:var(--space-medium); } + +/* ========================================================================== + Full-height page: the footer sits at the bottom of the viewport on pages + whose content is too short to fill it, instead of riding up under the last + card. + + Driven from the body because that is the only element every v3 page shares: + base.html renders [optional flag banner] + [page wrapper], and the wrapper + itself is a template block that homepage, community, release detail, auth + and library subpages each swap out for their own. Growing the body's own + children also means the banner's height is accounted for automatically, + rather than each page guessing at `min-height: 100vh`. + ========================================================================== */ + +body.v3 { + display: flex; + flex-direction: column; + /* Overrides .h-screen, which would otherwise cap the page at exactly one + viewport and let longer content spill out of the flex column. */ + height: auto; + min-height: 100vh; +} + +/* The page wrapper, whatever class the template gave it: it is the body child + holding the header, the content and the footer. */ +body.v3 > div:has(> .min-vh-110) { + display: flex; + flex-direction: column; + flex: 1 0 auto; +} + +/* The content wrapper between the header and the footer takes up the slack. */ +body.v3 > div > .min-vh-110 { + flex: 1 0 auto; +} diff --git a/static/css/v3/library-page.css b/static/css/v3/library-page.css index 8abc60cb3..31aefe14a 100644 --- a/static/css/v3/library-page.css +++ b/static/css/v3/library-page.css @@ -3,16 +3,6 @@ /* === Page Layout === */ -.v3-container { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.v3-container > .min-vh-110 { - flex: 1 0 auto; - min-height: 0; -} .library-page__container { padding: 0 var(--space-large); diff --git a/static/css/v3/release-detail.css b/static/css/v3/release-detail.css index dc180d9be..4016fb22f 100644 --- a/static/css/v3/release-detail.css +++ b/static/css/v3/release-detail.css @@ -2,16 +2,6 @@ Release Detail Page — v3 ============================================ */ -/* Fill the viewport so the footer stays at the bottom on short pages */ -.releases-v3 { - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.releases-v3 .min-vh-110 { - flex: 1 0 auto; -} /* Hero styling (including the --release variant) lives in heros.css; header positioning is centralized in header.css (body.v3 .header). */