bvandeusen/FabledSteward
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ui): share view on steward.css; breadcrumbs everywhere they belong; focus ring; tables scroll in their card (#5095)

Browse Source 
#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:
bvandeusen
2026-10-06 14:37:39 -04:00
co-authored by Claude Opus 5.5
parent 477b05b9d0
commit e864cd4b6c
9 changed files with 127 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
steward/static/steward.css
+12 -2
View File
@@ -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. */
steward/templates/dashboard/share.html
+2
View File
@@ -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>
steward/templates/dashboard/share_created.html
+2
View File
@@ -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>
steward/templates/dashboard/share_view.html
+20 -69
View File
@@ -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>
steward/templates/settings/general.html
+2
View File
@@ -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" %}
steward/templates/settings/thresholds.html
+2
View File
@@ -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" %}