From c6cbc8fe70c3e554d12cb0498db2ad4ed4e4825a Mon Sep 17 00:00:00 2001 From: ThePetrovich Date: Tue, 18 Aug 2026 21:52:27 +0800 Subject: [PATCH] Bump version --- pyproject.toml | 2 +- yksa_web/static/yksa/css/kit.css | 83 ++++++++++++++++++++++++++ yksa_web/templates/yksa/ui/_kpi.html | 7 ++- yksa_web/templates/yksa/ui/_state.html | 2 +- yksa_web/templatetags/yksa_ui.py | 12 +++- 5 files changed, 100 insertions(+), 6 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index 6dd6aa4..232d17b 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta" [project] name = "yksa-web-kit" -version = "0.1.0" +version = "0.1.2" description = "Shared chrome, UI kit and vendored front-end assets for the YKSA services" requires-python = ">=3.13" license = { text = "Proprietary" } diff --git a/yksa_web/static/yksa/css/kit.css b/yksa_web/static/yksa/css/kit.css index f92e7eb..25130d4 100644 --- a/yksa_web/static/yksa/css/kit.css +++ b/yksa_web/static/yksa/css/kit.css @@ -115,6 +115,10 @@ padding: .05rem .4rem; white-space: nowrap; border: 1px solid transparent; + /* An inline-flex box baseline-aligns on its own last line box, which in a + table cell or a run of text leaves it sitting a few pixels low. It is a + self-contained box; align it on the middle instead. */ + vertical-align: middle; } /* health */ @@ -164,6 +168,7 @@ color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); + vertical-align: middle; } /* ----------------------------------------------------------------------------- @@ -223,6 +228,64 @@ font-size: .8em; } +/* ----------------------------------------------------------------------------- + Containers + -------------------------------------------------------------------------- */ + +/* A container that supplies its own padding must not also inherit the trailing + margin of whatever it ends with. Bootstrap does this for `p` in a few places + and not at all for `dl`, `ul` or `table`, so the fix was being applied by hand + -- an `mb-0` on the last element of every card body -- which every element + added later then has to remember. It is one rule and it belongs here. + + Scoped to direct children: anything deeper is inside something else's box, and + that box's spacing is its own business. */ +.card-body > :last-child, +.alert > :last-child, +.list-group-item > :last-child, +.modal-body > :last-child, +.offcanvas-body > :last-child { + margin-bottom: 0; +} + +/* ----------------------------------------------------------------------------- + Alerts + + The estate theme paints alerts in solid colour, not the tinted panel Bootstrap + ships by default. That changes what belongs inside one: a utility text colour + is computed against the page ground and is unreadable on a saturated one, and + an outline button drawn in `--bs-secondary` all but vanishes. + -------------------------------------------------------------------------- */ + +/* Muted text inside an alert is the alert's own colour, softened. All three of + these resolve to --bs-secondary-color, which is computed against the page. */ +.alert .text-body-secondary, +.alert .yksa-label, +.alert .yksa-hint { + color: currentColor !important; + opacity: .8; +} + +/* Outline buttons take their colour from the alert rather than from the palette, + and invert to the alert's ground on hover. The semantic distinction between + `-secondary` and `-danger` is lost here, which is correct: the alert already + says which of those it is, and a red outline on a red ground says nothing. */ +.alert .btn-outline-primary, +.alert .btn-outline-secondary, +.alert .btn-outline-success, +.alert .btn-outline-danger, +.alert .btn-outline-warning { + --bs-btn-color: inherit; + --bs-btn-border-color: currentColor; + --bs-btn-hover-color: var(--bs-alert-bg); + --bs-btn-hover-bg: currentColor; + --bs-btn-hover-border-color: currentColor; + --bs-btn-active-color: var(--bs-alert-bg); + --bs-btn-active-bg: currentColor; + --bs-btn-active-border-color: currentColor; + --bs-btn-focus-shadow-rgb: 255, 255, 255; +} + /* ----------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ @@ -252,6 +315,26 @@ background: var(--bs-success-bg-subtle); } +/* Catalog card: a card summarising one record, where the whole card is the link + to it. The hover treatment is defined once, here, because three services had a + grid of these and none of them said what hovering meant -- the cursor changed + over the title only, and the padding around it was dead. The card carries this + class and the title anchor carries .stretched-link. */ +.yksa-card-link { + position: relative; +} + +.yksa-card-link:hover { + border-color: var(--bs-primary); + background: var(--bs-tertiary-bg); +} + +/* The title is already the link; underlining it on hover would be the only + moving part in a grid of forty. The border carries the affordance instead. */ +.yksa-card-link:hover .stretched-link { + color: var(--bs-primary); +} + /* Empty state: a sentence plus, where there is one, the action that resolves it -- beside the sentence, not under it. Never a blank card. */ .yksa-empty { diff --git a/yksa_web/templates/yksa/ui/_kpi.html b/yksa_web/templates/yksa/ui/_kpi.html index cbca638..058abb0 100644 --- a/yksa_web/templates/yksa/ui/_kpi.html +++ b/yksa_web/templates/yksa/ui/_kpi.html @@ -12,9 +12,14 @@ KPI tile. One column of a .row-cols-* grid. A tile whose secondary line is itself markup (a timestamp through yksa/ui/_utc.html, say) builds the same three elements inline with the same classes, as with .yksa-empty. + +It is an ordinary .card. It used to be `border-0 bg-white shadow-sm`, which was a +raised white panel in a kit whose every other surface is a bordered flat one, and +`bg-white` is a hard-coded light-theme colour besides -- wrong in a dark theme on +every service. Depth is not a level of hierarchy this kit has. {% endcomment %}
-
+
{{ label }}
{{ value }}
diff --git a/yksa_web/templates/yksa/ui/_state.html b/yksa_web/templates/yksa/ui/_state.html index 3bd6f84..2d20106 100644 --- a/yksa_web/templates/yksa/ui/_state.html +++ b/yksa_web/templates/yksa/ui/_state.html @@ -15,7 +15,7 @@ here. A conditional chain choosing a colour inside a template is the bug this partial exists to prevent: it is how the same run status ended up green on one page and grey on another. {% endcomment %}{% state state as s %}{% spaceless %} - + {{ label|default:s.label }} diff --git a/yksa_web/templatetags/yksa_ui.py b/yksa_web/templatetags/yksa_ui.py index 5bdf7db..c77da13 100644 --- a/yksa_web/templatetags/yksa_ui.py +++ b/yksa_web/templatetags/yksa_ui.py @@ -7,6 +7,12 @@ register = template.Library() @register.simple_tag def state(name): - """Resolve a state name to {variant, icon, label} for ui/_state.html.""" - variant, icon, label = STATES.get(name or "", STATES["unknown"]) - return {"variant": variant, "icon": icon, "label": label} + """Resolve a state name to {name, variant, icon, label} for ui/_state.html. + + `name` is the *resolved* key, not what was asked for: the template builds its + `.yksa-state-` class from it, and building that from the raw input meant + an unrecognised status got a class no stylesheet defines -- a blank pill, which + is the one outcome the fallback exists to prevent.""" + key = name if name in STATES else "unknown" + variant, icon, label = STATES[key] + return {"name": key, "variant": variant, "icon": icon, "label": label}