From c04981290f8488215f26e7b3fa424bc58fb134d3 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 18 Mar 2026 10:15:38 -0500 Subject: [PATCH 1/3] Enhance carousel and button styles: add disabled state for carousel buttons, improve text decoration for content detail icons, and update card carousel template to include badge count. --- static/css/v3/carousel-buttons.css | 9 +++-- static/css/v3/content.css | 6 ++++ static/css/v3/post-cards.css | 15 ++++++++ static/js/carousel.js | 35 +++++++++++++++++-- templates/v3/includes/_cards_carousel_v3.html | 2 +- 5 files changed, 62 insertions(+), 5 deletions(-) diff --git a/static/css/v3/carousel-buttons.css b/static/css/v3/carousel-buttons.css index 4ece3c982..79ebc1e19 100644 --- a/static/css/v3/carousel-buttons.css +++ b/static/css/v3/carousel-buttons.css @@ -35,10 +35,15 @@ height: 12px; } -.carousel-buttons .btn-carousel:hover { +.carousel-buttons .btn-carousel:hover:not(:disabled) { color: var(--color-secondary-dark-blue, #0077B8); } -.carousel-buttons .btn-carousel[data-hover] { +.carousel-buttons .btn-carousel[data-hover]:not(:disabled) { color: var(--color-secondary-dark-blue, #0077B8); } + +.carousel-buttons .btn-carousel:disabled { + opacity: 0.5; + cursor: not-allowed; +} diff --git a/static/css/v3/content.css b/static/css/v3/content.css index fbbfc4a61..43c649971 100644 --- a/static/css/v3/content.css +++ b/static/css/v3/content.css @@ -87,6 +87,12 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) { .content-detail-icon__cta:hover { text-decoration: underline; } +.content-detail-icon__cta, +.content-detail-icon__cta:focus, +.content-detail-icon__cta:focus-visible { + text-decoration: underline; + text-decoration-skip-ink: none; +} .content-detail-icon--contained { background: transparent; diff --git a/static/css/v3/post-cards.css b/static/css/v3/post-cards.css index 3c8c56edb..d7e7fd4d6 100644 --- a/static/css/v3/post-cards.css +++ b/static/css/v3/post-cards.css @@ -2,6 +2,21 @@ text-decoration: none; } +.post-cards .content-detail-icon__cta, +.post-cards .content-card__cta { + text-decoration: underline; + text-decoration-skip-ink: none; +} + +.post-cards .content-detail-icon__cta:hover, +.post-cards .content-detail-icon__cta:focus, +.post-cards .content-detail-icon__cta:focus-visible, +.post-cards .content-card__cta:hover, +.post-cards .content-card__cta:focus, +.post-cards .content-card__cta:focus-visible { + text-decoration: underline; +} + .post-cards { font-family: var(--font-sans); color: var(--color-text-primary); diff --git a/static/js/carousel.js b/static/js/carousel.js index eefdf5d85..925c64ab2 100644 --- a/static/js/carousel.js +++ b/static/js/carousel.js @@ -3,9 +3,24 @@ const CAROUSEL_STEP_PX_FALLBACK = 320; const SCROLL_RESET_EPSILON = 2; + const SCROLL_END_EPSILON = 1; const DEFAULT_AUTOPLAY_MS = 4000; const CAROUSEL_ITEM_SELECTOR = '[data-carousel-item]'; + function updateArrowState(track, prevBtn, nextBtn) { + if (!track || !prevBtn || !nextBtn) return; + const maxScroll = track.scrollWidth - track.clientWidth; + if (maxScroll <= 0) { + prevBtn.disabled = true; + nextBtn.disabled = true; + return; + } + const atStart = track.scrollLeft <= 0; + const atEnd = track.scrollLeft >= maxScroll - SCROLL_END_EPSILON; + prevBtn.disabled = atStart; + nextBtn.disabled = atEnd; + } + function getStepPx(track) { const first = track.querySelector(CAROUSEL_ITEM_SELECTOR); if (first) { @@ -138,10 +153,26 @@ const prevBtn = controls.querySelector('[data-carousel-prev]'); const nextBtn = controls.querySelector('[data-carousel-next]'); if (prevBtn) { - prevBtn.addEventListener('click', function () { scrollCarousel(track, 'prev', true); }); + prevBtn.addEventListener('click', function () { + if (prevBtn.disabled) return; + scrollCarousel(track, 'prev', true); + }); } if (nextBtn) { - nextBtn.addEventListener('click', function () { scrollCarousel(track, 'next', true); }); + nextBtn.addEventListener('click', function () { + if (nextBtn.disabled) return; + scrollCarousel(track, 'next', true); + }); + } + + const syncArrows = function () { + updateArrowState(track, prevBtn, nextBtn); + }; + requestAnimationFrame(syncArrows); + track.addEventListener('scroll', syncArrows, { passive: true }); + if (typeof ResizeObserver !== 'undefined') { + const ro = new ResizeObserver(syncArrows); + ro.observe(track); } const autoplayDelay = root.getAttribute('data-carousel-autoplay'); diff --git a/templates/v3/includes/_cards_carousel_v3.html b/templates/v3/includes/_cards_carousel_v3.html index 343626862..8f68f68e1 100644 --- a/templates/v3/includes/_cards_carousel_v3.html +++ b/templates/v3/includes/_cards_carousel_v3.html @@ -39,7 +39,7 @@

{{ heading }} {% if cards %} {% for card in cards %}
  • - {% include "v3/includes/_content_detail_card_item.html" with title=card.title description=card.description icon_name=card.icon_name cta_label=card.cta_label cta_href=card.cta_href %} + {% include "v3/includes/_content_detail_card_item.html" with title=card.title description=card.description icon_name=card.icon_name cta_label="Start here" cta_href=card.cta_href %}
    • {% endfor %} {% endif %} From 4fa2c39c6354877576e676c67ce048cae80e652f Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 18 Mar 2026 10:21:02 -0500 Subject: [PATCH 2/3] feat: add badge support to content detail cards and update styles --- static/css/v3/badge.css | 20 +++++++++++++++++++ static/css/v3/components.css | 1 + static/css/v3/content.css | 9 ++++++++- templates/v3/includes/_badge_v3.html | 9 +++++++++ templates/v3/includes/_cards_carousel_v3.html | 2 +- .../includes/_content_detail_card_item.html | 13 ++++++++---- 6 files changed, 48 insertions(+), 6 deletions(-) create mode 100644 static/css/v3/badge.css create mode 100644 templates/v3/includes/_badge_v3.html diff --git a/static/css/v3/badge.css b/static/css/v3/badge.css new file mode 100644 index 000000000..92c6e1d42 --- /dev/null +++ b/static/css/v3/badge.css @@ -0,0 +1,20 @@ +/** + * V3 Badge – small non-clickable badge (e.g. count on carousel cards). + * Uses Icon/Brand Accent background and Text/On Accent for text. + */ + +.badge-v3 { + display: flex; + width: 16px; + height: 16px; + justify-content: center; + align-items: center; + aspect-ratio: 1 / 1; + box-sizing: border-box; + border-radius: var(--s, 4px); + background: var(--Icon-Brand-Accent, #FFA000); + font-size: 10px; + line-height: 1; + color: var(--color-text-on-accent); + pointer-events: none; +} diff --git a/static/css/v3/components.css b/static/css/v3/components.css index 3f7b15e71..5597042f0 100644 --- a/static/css/v3/components.css +++ b/static/css/v3/components.css @@ -5,6 +5,7 @@ @import "./buttons.css"; @import "./avatar.css"; @import "./carousel-buttons.css"; +@import "./badge.css"; @import "./v3-examples-section.css"; @import "./header.css"; @import "./footer.css"; diff --git a/static/css/v3/content.css b/static/css/v3/content.css index 43c649971..0b46d216a 100644 --- a/static/css/v3/content.css +++ b/static/css/v3/content.css @@ -44,6 +44,12 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) { display: block; } +.content-detail-icon__badge-slot { + position: absolute; + top: var(--space-card); + right: var(--space-card); +} + .content-detail-icon__title { margin: 0; font-size: var(--font-size-base); @@ -51,7 +57,8 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) { line-height: var(--line-height-default); } -.content-detail-icon--has-icon .content-detail-icon__title { +.content-detail-icon--has-icon .content-detail-icon__title, +.content-detail-icon--has-badge .content-detail-icon__title { padding-right: var(--space-icon-offset); } diff --git a/templates/v3/includes/_badge_v3.html b/templates/v3/includes/_badge_v3.html new file mode 100644 index 000000000..5fe0c94e1 --- /dev/null +++ b/templates/v3/includes/_badge_v3.html @@ -0,0 +1,9 @@ +{% comment %} + V3 Badge – small non-clickable count/label badge. + Variables: + value (required) — text or number to show inside the badge. + Usage: + {% include "v3/includes/_badge_v3.html" with value=1 %} + {% include "v3/includes/_badge_v3.html" with value=count %} +{% endcomment %} + diff --git a/templates/v3/includes/_cards_carousel_v3.html b/templates/v3/includes/_cards_carousel_v3.html index 8f68f68e1..11aa8d28b 100644 --- a/templates/v3/includes/_cards_carousel_v3.html +++ b/templates/v3/includes/_cards_carousel_v3.html @@ -39,7 +39,7 @@

    {{ heading }} {% if cards %} {% for card in cards %}
  • - {% include "v3/includes/_content_detail_card_item.html" with title=card.title description=card.description icon_name=card.icon_name cta_label="Start here" cta_href=card.cta_href %} + {% include "v3/includes/_content_detail_card_item.html" with title=card.title description=card.description badge_count=forloop.counter cta_label="Start here" cta_href=card.cta_href %}
    • {% endfor %} {% endif %} diff --git a/templates/v3/includes/_content_detail_card_item.html b/templates/v3/includes/_content_detail_card_item.html index ef65f5c68..1916eef25 100644 --- a/templates/v3/includes/_content_detail_card_item.html +++ b/templates/v3/includes/_content_detail_card_item.html @@ -4,16 +4,21 @@ title (required) — card heading description (required) — card body text icon_name (optional) — icon name for includes/icon.html (e.g. "bullseye-arrow"). - If omitted, card is rendered without icon and modifier --has-icon is not applied. + If omitted (and badge_count not set), card is rendered without icon and modifier --has-icon is not applied. + badge_count (optional) — when set (e.g. in carousel), shows a non-clickable count badge instead of icon. title_url (optional) — if set, title is wrapped in a link cta_label (optional) — if set with cta_href, renders a CTA link below description cta_href (optional) — used with cta_label for the CTA link Usage: {% include "v3/includes/_content_detail_card_item.html" with title="Get help" description="Tap into quick answers..." icon_name="bullseye-arrow" %} - With CTA: {% include "v3/includes/_content_detail_card_item.html" with title="Get help" description="..." icon_name="info-box" cta_label="Start here" cta_href="#" %} + With badge (e.g. carousel): {% include "..." with title="..." description="..." badge_count=1 %} {% endcomment %} -
    - {% if icon_name %} +
    + {% if badge_count %} +
    + {% include "v3/includes/_badge_v3.html" with value=badge_count %} +
    + {% elif icon_name %} From 569f101d9531de7664f8fa145d5ead57d0ee512d Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Wed, 18 Mar 2026 10:22:47 -0500 Subject: [PATCH 3/3] feat: add compact format for high numeric values --- core/templatetags/number_filters.py | 30 ++++++++++++++++++++++++++++ templates/v3/includes/_badge_v3.html | 5 +++-- 2 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 core/templatetags/number_filters.py diff --git a/core/templatetags/number_filters.py b/core/templatetags/number_filters.py new file mode 100644 index 000000000..e33378b1e --- /dev/null +++ b/core/templatetags/number_filters.py @@ -0,0 +1,30 @@ +""" +Template filters for number formatting. +""" + +from django import template + +register = template.Library() + + +@register.filter +def compact_number(value): + """ + Format integers in compact form: 2300 → 2.3k, 33000 → 33k, 1500000 → 1.5M. + Values under 1000 are shown as-is. Non-numeric values are returned unchanged. + """ + if value is None: + return "" + try: + n = int(value) + except (TypeError, ValueError): + return value + if n < 1000: + return str(n) + if n < 1_000_000: + k = n / 1000 + formatted = f"{k:.1f}".rstrip("0").rstrip(".") + return f"{formatted}k" + m = n / 1_000_000 + formatted = f"{m:.1f}".rstrip("0").rstrip(".") + return f"{formatted}M" diff --git a/templates/v3/includes/_badge_v3.html b/templates/v3/includes/_badge_v3.html index 5fe0c94e1..664f1fbb6 100644 --- a/templates/v3/includes/_badge_v3.html +++ b/templates/v3/includes/_badge_v3.html @@ -1,9 +1,10 @@ {% comment %} V3 Badge – small non-clickable count/label badge. Variables: - value (required) — text or number to show inside the badge. + value (required) — number or text to show. Numbers >= 1000 are shown compact (e.g. 2.3k, 33k). Usage: {% include "v3/includes/_badge_v3.html" with value=1 %} {% include "v3/includes/_badge_v3.html" with value=count %} {% endcomment %} - +{% load number_filters %} +