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 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -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. */
|
||||
|
||||
@@ -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 %}
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
|
||||
<h1 class="page-title" style="margin-bottom:0;">Share: {{ dashboard.name }}</h1>
|
||||
|
||||
@@ -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 %}
|
||||
<div style="max-width:640px;">
|
||||
<h1 class="page-title">Share Link Created</h1>
|
||||
|
||||
@@ -7,81 +7,34 @@
|
||||
<script src="{{ url_for('static', filename='vendor/htmx-2.0.4.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='vendor/chart-4.4.4.umd.min.js') }}"></script>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='fonts/fonts.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='theme.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='steward.css') }}">
|
||||
{# 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. #}
|
||||
<style>
|
||||
:root {
|
||||
--bg: #07071a; --bg-card: #0f0f24; --bg-elevated: #17172e;
|
||||
--border: #1e1e3e; --border-mid: #28284c;
|
||||
--text: #d2cef0; --text-muted: #6858a0; --text-dim: #282860;
|
||||
--accent: #7c5ef4; --gold: #c9a84c;
|
||||
--green: #26d96b; --green-dim: #0e3a1e;
|
||||
--yellow: #e6b818; --red: #e83848; --red-dim: #3a0e14;
|
||||
--orange: #e07828;
|
||||
--font-serif: 'Fraunces', Georgia, serif;
|
||||
.share-header { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-mid); min-height: 48px; }
|
||||
.share-name { font-family: var(--fs-font-display); font-weight: 500; font-size: 1.15rem; color: var(--gold); overflow-wrap: anywhere; }
|
||||
.share-main { max-width: 1600px; }
|
||||
/* Same grid as the authenticated view, rendered from x/y/w/h. */
|
||||
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 70px; gap: 1rem; }
|
||||
.dash-grid > .dash-cell { margin-bottom: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.dash-cell .dash-cell-body { flex: 1; min-height: 0; overflow: auto; }
|
||||
@media (max-width: 820px) {
|
||||
.dash-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
|
||||
.dash-grid > .dash-cell { grid-column: 1 / -1 !important; grid-row: auto !important; }
|
||||
.dash-cell .dash-cell-body { overflow: visible; }
|
||||
.share-main { padding: 1rem; }
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
code { font-family: ui-monospace, monospace; font-size: 0.875em; background: var(--bg-elevated); padding: 0.1em 0.35em; border-radius: 3px; }
|
||||
.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; }
|
||||
.section-title { font-family: var(--font-serif); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th { text-align: left; padding: 0.6rem 1rem; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-mid); }
|
||||
.table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
|
||||
.table tbody tr:last-child td { border-bottom: none; }
|
||||
.table tbody tr:hover td { background: var(--bg-elevated); }
|
||||
.badge { display: inline-block; padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; }
|
||||
.badge-green { background: var(--green-dim); color: var(--green); }
|
||||
.badge-red { background: var(--red-dim); color: #ff8090; }
|
||||
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.dot-up { background: var(--green); box-shadow: 0 0 4px var(--green); }
|
||||
.dot-down { background: var(--red); }
|
||||
.dot-warn { background: var(--yellow); }
|
||||
.dot-dim { background: var(--text-dim); }
|
||||
.ping-card { padding: 0.75rem 1.25rem; }
|
||||
.ping-row { display:flex; align-items:center; gap:1rem; padding:0.45rem 0; border-bottom:1px solid var(--border); }
|
||||
.ping-row:last-child { border-bottom:none; }
|
||||
.ping-meta { min-width:120px; max-width:180px; flex-shrink:1; overflow:hidden; }
|
||||
.ping-name { font-size:0.875rem; font-weight:500; display:block; overflow-wrap:anywhere; }
|
||||
.ping-addr { display:block; color:var(--text-muted); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.ping-pills { display:flex; gap:2px; flex:1; min-width:0; overflow:hidden; align-items:center; }
|
||||
.pill { display:inline-block; width:7px; height:22px; border-radius:2px; }
|
||||
.pill-empty { background:var(--bg-elevated); }
|
||||
.ping-cur { min-width:72px; text-align:right; font-size:0.85rem; font-variant-numeric:tabular-nums; }
|
||||
.ping-cur-good { color:var(--green); } .ping-cur-warn { color:var(--yellow); }
|
||||
.ping-cur-bad { color:var(--orange); } .ping-cur-down { color:var(--red); font-weight:bold; }
|
||||
.ping-cur-nd { color:var(--text-dim); }
|
||||
.widget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
|
||||
.widget-title { font-family:var(--font-serif); font-size:0.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
|
||||
/* Same Grafana-style grid as the authenticated view, rendered from x/y/w/h. */
|
||||
.dash-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:70px; gap:1rem; }
|
||||
.dash-grid > .dash-cell { margin-bottom:0; min-width:0; overflow:hidden; display:flex; flex-direction:column; }
|
||||
.dash-cell .dash-cell-body { flex:1; min-height:0; overflow:auto; }
|
||||
.dash-cell-body { container-type:inline-size; }
|
||||
.host-blocks { display:grid; grid-template-columns:1fr; gap:0 1.5rem; }
|
||||
@container (min-width:520px) { .host-blocks { grid-template-columns:1fr 1fr; } }
|
||||
@container (min-width:900px) { .host-blocks { grid-template-columns:1fr 1fr 1fr; } }
|
||||
@media (max-width:820px) {
|
||||
.dash-grid { grid-template-columns:1fr; grid-auto-rows:auto; }
|
||||
.dash-grid > .dash-cell { grid-column:1 / -1 !important; grid-row:auto !important; }
|
||||
.dash-cell .dash-cell-body { overflow:visible; }
|
||||
}
|
||||
.stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
|
||||
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
|
||||
header { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-mid); height: 48px; font-family: var(--font-serif); }
|
||||
main { padding: 1.5rem 2rem; max-width: 1600px; margin: 0 auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<span style="font-weight:500;font-size:1.15rem;color:var(--gold);">
|
||||
{{ dashboard.name }}
|
||||
</span>
|
||||
<header class="share-header">
|
||||
<span class="share-name">{{ dashboard.name }}</span>
|
||||
<span style="font-size:0.78rem;color:var(--text-muted);">Steward · read-only view</span>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<main class="share-main">
|
||||
{% if widgets %}
|
||||
<div class="dash-grid">
|
||||
{% for item in widgets %}
|
||||
@@ -101,9 +54,7 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="color:var(--text-muted);text-align:center;padding:4rem;font-size:0.9rem;">
|
||||
This dashboard has no widgets.
|
||||
</div>
|
||||
<div class="empty-state">This dashboard has no widgets.</div>
|
||||
{% endif %}
|
||||
</main>
|
||||
|
||||
|
||||
@@ -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" %}
|
||||
|
||||
@@ -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" %}
|
||||
|
||||
@@ -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("<tr><td>a fragment</td></tr>")
|
||||
|
||||
|
||||
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}"
|
||||
@@ -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 <wall>"),
|
||||
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 "<title>Ops <wall> — Steward</title>" in page
|
||||
assert '<div class="empty-state">This dashboard has no widgets.</div>' 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
|
||||
@@ -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*|(?<![\w-]=)['"])#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3})(?![0-9a-zA-Z_-])""")
|
||||
|
||||
HEX_CEILING = 75 # measured 2026-10-06 (#5092); lower it as pages move onto tokens, never raise it
|
||||
HEX_CEILING = 58 # 75 at #5092, 58 once the share view used steward.css (#5095); only lower it
|
||||
|
||||
|
||||
def _sheets():
|
||||
|
||||
Reference in New Issue
Block a user