From e864cd4b6ce00c04a975453adb5748c8be05e211 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Tue, 6 Oct 2026 14:37:39 -0400 Subject: [PATCH] feat(ui): share view on steward.css; breadcrumbs everywhere they belong; focus ring; tables scroll in their card (#5095) #5095 "Share view on the shared stylesheet; breadcrumbs, focus-visible and wide tables". - dashboard/share_view.html loads theme.css and steward.css; its own copy of the old purple palette is gone. Only the read-only frame and the x/y/w/h grid stay inline, written in tokens. HEX_CEILING 75 -> 58. - Breadcrumbs on settings/general, settings/thresholds, the dashboard share page and share-link-created. tests/test_breadcrumbs.py fails on any page extending base.html without a crumbs() trail, unless it is on the named list of section top pages, logged-out and error pages (rule 134). - :focus-visible draws --fs-focus-ring on links, buttons, summaries, inputs and anything with tabindex. - Any card holding a .table scrolls sideways (card:has(table.table)), so a wide table no longer widens the page at phone width; .card-flush scrolls too, main gets min-width:0, and .table-wrap covers a table outside a card. - tests/test_share_view.py renders the share view: shared sheets, no hex colour, escaped name, widgets loading through the share token. Co-Authored-By: Claude Opus 5.5 --- steward/static/steward.css | 14 ++- steward/templates/dashboard/share.html | 2 + .../templates/dashboard/share_created.html | 2 + steward/templates/dashboard/share_view.html | 89 +++++-------------- steward/templates/settings/general.html | 2 + steward/templates/settings/thresholds.html | 2 + tests/test_breadcrumbs.py | 56 ++++++++++++ tests/test_share_view.py | 30 +++++++ tests/test_style_tokens.py | 2 +- 9 files changed, 127 insertions(+), 72 deletions(-) create mode 100644 tests/test_breadcrumbs.py create mode 100644 tests/test_share_view.py diff --git a/steward/static/steward.css b/steward/static/steward.css index d8c6f72..daf9315 100644 --- a/steward/static/steward.css +++ b/steward/static/steward.css @@ -105,7 +105,7 @@ code { font-family: var(--fs-font-mono); font-size: 0.875em; background: var(--b .nav-scrim { display: none; } /* Layout */ -main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box; position: relative; z-index: 1; } +main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; min-width: 0; box-sizing: border-box; position: relative; z-index: 1; } /* Responsive: sidebar slides off-canvas under 900px, toggled by ☰ */ @media (max-width: 900px) { @@ -147,7 +147,13 @@ main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; box /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; } -.card-flush { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; } +.card-flush { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; overflow-y: hidden; margin-bottom: 1rem; } +/* A table wider than the screen scrolls sideways inside its card instead of + widening the page at phone width. Any card holding a table does this, so no + page has to remember a wrapper; .table-wrap is for a table outside a card. + (Only cards with a table: a plain card can hold a popover that must not clip.) */ +.card:has(table.table) { overflow-x: auto; } +.table-wrap { overflow-x: auto; } /* Typography */ .page-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; color: var(--text); line-height: var(--fs-leading-heading); margin-bottom: 1.5rem; } @@ -174,6 +180,10 @@ input[type=text], input[type=email], input[type=password], input[type=number], i transition: border-color .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } +/* Keyboard focus is always visible: the design system's ring on anything + that takes focus. */ +a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, +input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); } select { cursor: pointer; } textarea { resize: vertical; } /* Form fields: .field wraps a .field-label, the .input and an optional .field-hint. */ diff --git a/steward/templates/dashboard/share.html b/steward/templates/dashboard/share.html index 4236f1a..aa573e3 100644 --- a/steward/templates/dashboard/share.html +++ b/steward/templates/dashboard/share.html @@ -1,5 +1,7 @@ {% extends "base.html" %} +{% from "_macros.html" import crumbs %} {% block title %}Share: {{ dashboard.name }} — Steward{% endblock %} +{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), (dashboard.name, "/d/" ~ dashboard.id), ("Share", "")]) }}{% endblock %} {% block content %}

Share: {{ dashboard.name }}

diff --git a/steward/templates/dashboard/share_created.html b/steward/templates/dashboard/share_created.html index a9dc001..d6ec3fa 100644 --- a/steward/templates/dashboard/share_created.html +++ b/steward/templates/dashboard/share_created.html @@ -1,5 +1,7 @@ {% extends "base.html" %} +{% from "_macros.html" import crumbs %} {% block title %}Share Link Created — Steward{% endblock %} +{% block breadcrumb %}{{ crumbs([("Dashboard", "/"), (dashboard.name, "/d/" ~ dashboard.id), ("Share", "/d/" ~ dashboard.id ~ "/share"), ("Link created", "")]) }}{% endblock %} {% block content %}

Share Link Created

diff --git a/steward/templates/dashboard/share_view.html b/steward/templates/dashboard/share_view.html index 855eb98..d23e38e 100644 --- a/steward/templates/dashboard/share_view.html +++ b/steward/templates/dashboard/share_view.html @@ -7,81 +7,34 @@ + + + {# The palette, type and widget classes come from steward.css like every + other page; only the read-only page's own frame and its grid live here. #} -
- - {{ dashboard.name }} - + -
+
{% if widgets %}
{% for item in widgets %} @@ -101,9 +54,7 @@ {% endfor %}
{% else %} -
- This dashboard has no widgets. -
+
This dashboard has no widgets.
{% endif %}
diff --git a/steward/templates/settings/general.html b/steward/templates/settings/general.html index b5363fa..2ff61a3 100644 --- a/steward/templates/settings/general.html +++ b/steward/templates/settings/general.html @@ -1,6 +1,8 @@ {# steward/templates/settings/general.html #} {% extends "base.html" %} +{% from "_macros.html" import crumbs %} {% block title %}Settings — General — Steward{% endblock %} +{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("General", "")]) }}{% endblock %} {% block content %} {% set active_tab = "general" %} {% include "settings/_tabs.html" %} diff --git a/steward/templates/settings/thresholds.html b/steward/templates/settings/thresholds.html index 5b8efc2..221ee0d 100644 --- a/steward/templates/settings/thresholds.html +++ b/steward/templates/settings/thresholds.html @@ -1,6 +1,8 @@ {# steward/templates/settings/thresholds.html — tunable degraded/critical cutoffs #} {% extends "base.html" %} +{% from "_macros.html" import crumbs %} {% block title %}Settings — Thresholds & Retention — Steward{% endblock %} +{% block breadcrumb %}{{ crumbs([("Settings", "/settings/"), ("Thresholds & retention", "")]) }}{% endblock %} {% block content %} {% set active_tab = "thresholds" %} {% include "settings/_tabs.html" %} diff --git a/tests/test_breadcrumbs.py b/tests/test_breadcrumbs.py new file mode 100644 index 0000000..b56fca5 --- /dev/null +++ b/tests/test_breadcrumbs.py @@ -0,0 +1,56 @@ +"""Every page below a top-level section shows its trail back up (rule 134). + +The breadcrumb block is empty by default, so a nested page that forgets it +ships with no way back up and nothing says so. Every full page (one that +extends base.html) must fill the block, unless it is a section's own top +page, a logged-out page or an error page: those are named below, so adding +one is a decision someone makes in this file. +""" +import re + +from tests._templates import REPO, template_files + +TOP_LEVEL = { + "steward/templates/dashboard/index.html", + "steward/templates/status/index.html", + "steward/templates/hosts/list.html", + "steward/templates/monitors/index.html", + "steward/templates/alerts/list.html", + "steward/templates/ansible/index.html", + "steward/templates/audit/list.html", + "steward/templates/ai_access/index.html", + "plugins/docker/templates/docker/index.html", + "plugins/snmp/templates/snmp/index.html", + "plugins/traefik/templates/traefik/index.html", + "plugins/unifi/templates/unifi/index.html", + # Logged out, or no page to go back up from. + "steward/templates/auth/login.html", + "steward/templates/auth/setup.html", + "steward/templates/errors/404.html", + "steward/templates/errors/500.html", + "steward/templates/errors/database_unavailable.html", +} + +_EXTENDS_BASE = re.compile(r"""\{%-?\s*extends\s+["']base\.html["']""") +_BLOCK = re.compile(r"\{%-?\s*block\s+breadcrumb\s*-?%\}(.*?)\{%-?\s*endblock", re.S) + + +def needs_crumbs_and_lacks_them(text: str) -> bool: + block = _BLOCK.search(text) + return bool(_EXTENDS_BASE.search(text)) and not (block and "crumbs(" in block.group(1)) + + +def test_the_guard_can_fail(): + assert needs_crumbs_and_lacks_them('{% extends "base.html" %}{% block content %}x{% endblock %}') + assert needs_crumbs_and_lacks_them('{% extends "base.html" %}{% block breadcrumb %}{% endblock %}') + assert not needs_crumbs_and_lacks_them( + '{% extends "base.html" %}{% block breadcrumb %}{{ crumbs([("Hosts", "/hosts/"), ("x", "")]) }}{% endblock %}') + assert not needs_crumbs_and_lacks_them("a fragment") + + +def test_every_nested_page_has_a_trail(): + pages = {str(p.relative_to(REPO)): p for p in template_files()} + assert TOP_LEVEL <= set(pages), sorted(TOP_LEVEL - set(pages)) # a renamed page leaves no stale entry + missing = sorted(name for name, p in pages.items() + if name not in TOP_LEVEL and needs_crumbs_and_lacks_them(p.read_text())) + assert not missing, f"add {{% block breadcrumb %}}{{{{ crumbs([...]) }}}} (rule 134): {missing}" diff --git a/tests/test_share_view.py b/tests/test_share_view.py new file mode 100644 index 0000000..519bd5f --- /dev/null +++ b/tests/test_share_view.py @@ -0,0 +1,30 @@ +"""The public share view draws with the same stylesheet as every other page +(#5095): no palette of its own, so it can never drift from the tokens again.""" +from types import SimpleNamespace + +from quart import render_template + +from tests.test_style_tokens import hex_colours + + +async def _share_view(app, widgets) -> str: + async with app.test_request_context("/share/t0ken"): + return await render_template( + "dashboard/share_view.html", dashboard=SimpleNamespace(name="Ops "), + widgets=widgets, raw_token="t0ken", poll_interval=30) + + +async def test_the_share_view_uses_the_shared_stylesheet(app): + page = await _share_view(app, []) + assert "/static/theme.css" in page and "/static/steward.css" in page + assert not hex_colours(page), hex_colours(page) + assert "Ops <wall>" in page and "Ops <wall> — Steward" in page + assert '
This dashboard has no widgets.
' in page + + +async def test_each_widget_loads_through_the_share_token(app): + gw = SimpleNamespace(id=7, grid_x=0, grid_y=2, grid_w=6, grid_h=3) + item = SimpleNamespace(db=gw, title="Hosts", hx_url="/w/hosts?id=7", defn=SimpleNamespace(poll=True)) + page = await _share_view(app, [item]) + assert 'hx-get="/w/hosts?id=7&s=t0ken"' in page + assert "grid-column:1 / span 6;grid-row:3 / span 3;" in page and "every 30s" in page diff --git a/tests/test_style_tokens.py b/tests/test_style_tokens.py index 05865e8..d72b4e7 100644 --- a/tests/test_style_tokens.py +++ b/tests/test_style_tokens.py @@ -22,7 +22,7 @@ _USED = re.compile(r"var\(\s*(--[\w-]+)") # string -- but not an HTML attribute's value (href="#abc" is a link to an id). _HEX = re.compile(r"""(?:[:(,]\s*|(?