feat: bootstrap design kit and vaporwave demo baseline
This commit is contained in:
311
demo/web/templates/base.html
Normal file
311
demo/web/templates/base.html
Normal file
@@ -0,0 +1,311 @@
|
||||
{{ define "demo_doc_start" }}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ .Title }}</title>
|
||||
<link rel="stylesheet" href="/static/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
{{ template "demo_nav" . }}
|
||||
{{ template "demo_app_shell" . }}
|
||||
<main class="page">
|
||||
{{ end }}
|
||||
|
||||
{{ define "demo_doc_end" }}
|
||||
</main>
|
||||
<script src="/static/js/app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
|
||||
{{ define "demo_masthead" }}
|
||||
<header class="masthead">
|
||||
<p class="label">{{ index . "label" }}</p>
|
||||
<h1>{{ index . "title" }}</h1>
|
||||
<p class="lead">{{ index . "lead" }}</p>
|
||||
{{ if index . "back_url" }}
|
||||
<p class="meta" style="margin-top:10px;"><a class="text-link" href="{{ index . "back_url" }}">{{ index . "back_text" }}</a></p>
|
||||
{{ end }}
|
||||
{{ if index . "links_html" }}
|
||||
{{ index . "links_html" }}
|
||||
{{ end }}
|
||||
</header>
|
||||
{{ end }}
|
||||
|
||||
{{ define "demo_app_shell" }}
|
||||
<header class="app-shell" id="app-shell">
|
||||
<div class="app-shell-inner">
|
||||
<div>
|
||||
<p class="app-shell-kicker">Demo Application Shell</p>
|
||||
<h1 class="app-shell-title">Universal Operations Console</h1>
|
||||
<p class="app-shell-subtitle">Reference shell for server-rendered Go web apps using shared design-code contracts.</p>
|
||||
</div>
|
||||
<div class="app-shell-statuses" aria-label="Application status">
|
||||
<span class="shell-pill shell-pill-env">ENV: demo</span>
|
||||
<span class="shell-pill shell-pill-db">DB: connected</span>
|
||||
<span class="shell-pill shell-pill-user">operator@demo · admin</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
||||
{{ define "base.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
<header class="masthead" id="home-overview">
|
||||
<p class="label">Submodule-First Design Kit</p>
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p class="lead">A universal design-code workspace for Go web applications: reusable rules, demo-first UI patterns, and canonical development contracts for AI-assisted implementation.</p>
|
||||
<div class="button-demo-row" style="margin-top:12px;">
|
||||
{{ range .Patterns }}
|
||||
{{ if .Link }}
|
||||
<a class="chip-link" href="{{ .Link }}">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="panel" id="home-design-approach">
|
||||
<div class="panel-head"><h2>Design Approach</h2></div>
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<h3>Contract First</h3>
|
||||
<p>UI behavior is defined as explicit contracts (filters, pagination, modal steps, timeline grouping) before implementation details. Demo pages act as executable specs.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Server-Rendered by Default</h3>
|
||||
<p>Patterns target Go server-rendered apps first (net/http or Gin with templates). Interactivity is additive and must preserve deterministic URL/query contracts.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Reusable, Not Branded</h3>
|
||||
<p>Shared patterns standardize behavior and structure while leaving visual branding, domain terminology, and business logic to each host project.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="home-workflow">
|
||||
<div class="panel-head"><h2>Development Workflow Standard</h2></div>
|
||||
<div class="timeline-cards">
|
||||
<article class="timeline-card">
|
||||
<div class="timeline-card-top"><h3>1. Describe the contract</h3></div>
|
||||
<p class="meta">Update Bible + pattern contract first: routes, query params, states, edge cases, and UI semantics.</p>
|
||||
</article>
|
||||
<article class="timeline-card">
|
||||
<div class="timeline-card-top"><h3>2. Implement in demo</h3></div>
|
||||
<p class="meta">Build the pattern in the demo app as a live reference page with realistic state transitions and test coverage.</p>
|
||||
</article>
|
||||
<article class="timeline-card">
|
||||
<div class="timeline-card-top"><h3>3. Publish as bundle</h3></div>
|
||||
<p class="meta">Encode reusable docs and templates in the design kit and expose them as bundles for host repositories.</p>
|
||||
</article>
|
||||
<article class="timeline-card">
|
||||
<div class="timeline-card-top"><h3>4. Apply in host repos</h3></div>
|
||||
<p class="meta">Use the sync workflow to plan and apply changes, then adapt domain-specific rules without breaking canonical UI contracts.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="home-standardizes">
|
||||
<div class="panel-head"><h2>What the Demo Standardizes</h2></div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">URL-driven filters</span>
|
||||
<span class="chip">Server-side pagination</span>
|
||||
<span class="chip">Bulk selection semantics</span>
|
||||
<span class="chip">Modal state machines</span>
|
||||
<span class="chip">Import preview / confirm</span>
|
||||
<span class="chip">CSV export behavior</span>
|
||||
<span class="chip">Operator tooling dashboards</span>
|
||||
<span class="chip">Timeline card grouping</span>
|
||||
<span class="chip">Drilldown UX</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="home-anti-patterns">
|
||||
<div class="panel-head"><h2>Anti-Patterns (Do Not Implement)</h2></div>
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<h3>Page-local filters on paginated tables</h3>
|
||||
<p>Do not filter only the currently rendered page slice. Filters must apply to the full dataset/query scope before pagination.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Nested modals</h3>
|
||||
<p>Do not open one modal from another modal. Use a single modal state machine with explicit stages (edit, confirm, done).</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Implicit export scope</h3>
|
||||
<p>Do not export without clear scope selection when ambiguity exists (selected, filtered, all). Make the scope explicit in UI and request.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Undocumented UI contracts</h3>
|
||||
<p>Do not implement new interaction behavior without updating the design code (Bible, pattern contract, and demo reference page).</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="home-bundles">
|
||||
<div class="panel-head">
|
||||
<h2>Bundles</h2>
|
||||
<a href="/healthz" class="pill">healthz</a>
|
||||
</div>
|
||||
<div class="grid">
|
||||
{{ range .Bundles }}
|
||||
<article class="card">
|
||||
<div class="row">
|
||||
<h3>{{ .Name }}</h3>
|
||||
<span class="status status-{{ .Status }}">{{ .Status }}</span>
|
||||
</div>
|
||||
<p>{{ .Summary }}</p>
|
||||
<p class="meta"><code>{{ .Bundle }}</code></p>
|
||||
{{ if .Link }}
|
||||
<p class="meta"><a class="text-link" href="{{ .Link }}">Open demo</a></p>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="home-roadmap">
|
||||
<div class="panel-head">
|
||||
<h2>Pattern Roadmap</h2>
|
||||
</div>
|
||||
<div class="grid">
|
||||
{{ range .Patterns }}
|
||||
<article class="card">
|
||||
<div class="row">
|
||||
<h3>{{ .Name }}</h3>
|
||||
<span class="status status-{{ .Status }}">{{ .Status }}</span>
|
||||
</div>
|
||||
<p>{{ .Summary }}</p>
|
||||
<p class="meta"><code>{{ .Bundle }}</code></p>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "demo_nav" }}
|
||||
<nav class="demo-topnav" aria-label="Demo navigation">
|
||||
<div class="demo-topnav-inner">
|
||||
<a class="demo-topnav-brand {{ if eq .CurrentPath "/" }}active{{ end }}" href="/">Demo Catalog</a>
|
||||
<a class="demo-topnav-link {{ if eq .CurrentPath "/patterns/table" }}active{{ end }}" href="/patterns/table">Table</a>
|
||||
<a class="demo-topnav-link {{ if eq .CurrentPath "/patterns/controls" }}active{{ end }}" href="/patterns/controls">Controls</a>
|
||||
<a class="demo-topnav-link {{ if eq .CurrentPath "/patterns/modals" }}active{{ end }}" href="/patterns/modals">Modals</a>
|
||||
<a class="demo-topnav-link {{ if eq .CurrentPath "/patterns/io" }}active{{ end }}" href="/patterns/io">Import/Export</a>
|
||||
<a class="demo-topnav-link {{ if eq .CurrentPath "/patterns/forms" }}active{{ end }}" href="/patterns/forms">Forms</a>
|
||||
<a class="demo-topnav-link {{ if eq .CurrentPath "/patterns/operator-tools" }}active{{ end }}" href="/patterns/operator-tools">Operator Tools</a>
|
||||
<a class="demo-topnav-link {{ if eq .CurrentPath "/patterns/timeline" }}active{{ end }}" href="/patterns/timeline">Timeline</a>
|
||||
</div>
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{ define "table_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Server-side filtering and pagination. Filters apply to the full dataset before pagination." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<section class="panel panel-composite" id="table-module">
|
||||
<div class="panel-subsection" id="table-filters">
|
||||
<div class="panel-head">
|
||||
<h2>Filters</h2>
|
||||
<div class="button-demo-row" style="margin-top:0;">
|
||||
<a href="/patterns/table#table-filters" class="btn btn-ghost btn-pair">Reset</a>
|
||||
<button class="btn btn-primary btn-pair" form="table-filters-form" type="submit">Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
<form id="table-filters-form" class="filters" method="get" action="/patterns/table#table-filters">
|
||||
<label>
|
||||
Search
|
||||
<input type="text" name="q" value="{{ .Filters.Query }}" placeholder="name / owner / status" />
|
||||
</label>
|
||||
<label>
|
||||
Category
|
||||
<select name="category">
|
||||
<option value="">All</option>
|
||||
{{ range .Categories }}
|
||||
<option value="{{ . }}" {{ if eq $.Filters.Category . }}selected{{ end }}>{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Status
|
||||
<select name="status">
|
||||
<option value="">All</option>
|
||||
{{ range .Statuses }}
|
||||
<option value="{{ . }}" {{ if eq $.Filters.Status . }}selected{{ end }}>{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Rows per page
|
||||
<select name="per_page">
|
||||
{{ range .PerPageOpts }}
|
||||
<option value="{{ . }}" {{ if eq $.PerPage . }}selected{{ end }}>{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="panel-subsection panel-subsection-divider" id="table-list">
|
||||
<div class="panel-head">
|
||||
<h2>Canonical List Page</h2>
|
||||
<div class="meta">
|
||||
{{ if gt .Pager.TotalItems 0 }}
|
||||
Showing {{ .Pager.From }}–{{ .Pager.To }} of {{ .Pager.TotalItems }}
|
||||
{{ else }}
|
||||
Showing 0 of 0
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="ui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th class="status-col">Status</th>
|
||||
<th>Owner</th>
|
||||
<th>Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ if .Rows }}
|
||||
{{ range .Rows }}
|
||||
<tr>
|
||||
<td>{{ .ID }}</td>
|
||||
<td>{{ .Name }}</td>
|
||||
<td>{{ .Category }}</td>
|
||||
<td class="status-col"><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
|
||||
<td>{{ .Owner }}</td>
|
||||
<td>{{ .Updated }}</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<tr>
|
||||
<td colspan="6" class="empty-cell">No rows match current filters.</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{ if gt .Pager.TotalPages 1 }}
|
||||
<nav class="pager pager-dots" aria-label="Pagination">
|
||||
{{ range .Pager.Links }}
|
||||
{{ if .Ellipsis }}
|
||||
<span class="ellipsis" aria-hidden="true">…</span>
|
||||
{{ else if .Current }}
|
||||
<a class="current" aria-current="page" href="{{ .URL }}#table-list" aria-label="Page {{ .Label }}, current">{{ .Label }}</a>
|
||||
{{ else }}
|
||||
<a href="{{ .URL }}#table-list" aria-label="Go to page {{ .Label }}">{{ .Label }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
114
demo/web/templates/controls_pattern.html
Normal file
114
demo/web/templates/controls_pattern.html
Normal file
@@ -0,0 +1,114 @@
|
||||
{{ define "controls_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Canonical actions, segmented filters, row selection and bulk-action control bar." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<section class="panel" id="controls-buttons">
|
||||
<div class="panel-head"><h2>Buttons</h2></div>
|
||||
<div class="button-demo-row">
|
||||
<button class="btn btn-primary" type="button">Apply changes</button>
|
||||
<button class="btn btn-secondary" type="button">Review selection</button>
|
||||
<button class="btn btn-danger" type="button">Archive selected</button>
|
||||
<button class="btn btn-ghost" type="button">Reset filters</button>
|
||||
<button class="btn" type="button" disabled>Disabled</button>
|
||||
{{ if .SimulateLoading }}
|
||||
<a class="btn btn-secondary is-loading" aria-disabled="true" href="{{ .ClearLoadingURL }}">Loading…</a>
|
||||
{{ else }}
|
||||
<a class="btn btn-secondary" href="{{ .SimulateLoadingURL }}">Simulate loading</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="button-demo-row">
|
||||
<a class="btn btn-primary" href="/patterns/io?export_ready=1">Export</a>
|
||||
<a class="btn btn-secondary" href="/patterns/io">Import</a>
|
||||
<a class="btn btn-ghost" href="/patterns/modals?open=edit&stage=edit#modal-open-states">Open modal</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel panel-composite" id="controls-workbench">
|
||||
<div class="panel-subsection" id="controls-segments">
|
||||
<div class="panel-head">
|
||||
<h2>Segmented Status Filter</h2>
|
||||
<div class="meta">{{ .Pager.TotalItems }} filtered · page {{ .Pager.Page }}/{{ .Pager.TotalPages }} · {{ .SelectedCount }} selected</div>
|
||||
</div>
|
||||
<div class="segmented">
|
||||
<a class="segment {{ if eq .Segment "all" }}active{{ end }}" href="{{ index .SegmentURLs "all" }}">All ({{ index .SegmentedCounts "all" }})</a>
|
||||
<a class="segment {{ if eq .Segment "ready" }}active{{ end }}" href="{{ index .SegmentURLs "ready" }}">Ready ({{ index .SegmentedCounts "ready" }})</a>
|
||||
<a class="segment {{ if eq .Segment "warning" }}active{{ end }}" href="{{ index .SegmentURLs "warning" }}">Warning ({{ index .SegmentedCounts "warning" }})</a>
|
||||
<a class="segment {{ if eq .Segment "review" }}active{{ end }}" href="{{ index .SegmentURLs "review" }}">Review ({{ index .SegmentedCounts "review" }})</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-subsection panel-subsection-divider" id="controls-selection">
|
||||
<div class="panel-head">
|
||||
<h2>Selection Table</h2>
|
||||
<div class="meta">Checkbox rows + bulk action preview + global selection across pages</div>
|
||||
</div>
|
||||
|
||||
{{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
|
||||
<p class="meta" style="margin-bottom:12px;">
|
||||
Visible on this page: {{ .VisibleCount }} · Selected on this page: {{ .SelectedVisible }}{{ if gt .SelectedHidden 0 }} · Selected on other page(s): {{ .SelectedHidden }}{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="bulk-bar">
|
||||
<a class="btn btn-secondary" href="{{ .SelectVisibleURL }}">Select visible</a>
|
||||
<a class="btn btn-secondary" href="{{ .SelectFilteredURL }}">Select filtered</a>
|
||||
<a class="btn btn-secondary" href="{{ .ClearVisibleURL }}">Clear visible</a>
|
||||
<a class="btn btn-secondary" href="{{ .ClearFilteredURL }}">Clear filtered</a>
|
||||
<a class="btn btn-primary" href="{{ .OpenEditSelectedURL }}">Edit selected</a>
|
||||
<a class="btn btn-secondary" href="{{ .OpenDeleteSelectedURL }}">Remove selected</a>
|
||||
<a class="btn btn-ghost" href="{{ .ClearSelectionURL }}">Clear selection</a>
|
||||
<details class="inline-menu">
|
||||
<summary class="btn btn-secondary">More actions</summary>
|
||||
<div class="inline-menu-list">
|
||||
<a class="menu-item" href="{{ .BulkReviewURL }}">Mark for review</a>
|
||||
<a class="menu-item" href="{{ .BulkExportURL }}">Export selected</a>
|
||||
<a class="menu-item" href="{{ .BulkRetrySyncURL }}">Retry sync</a>
|
||||
<a class="menu-item danger" href="{{ .BulkArchiveURL }}">Archive</a>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="ui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Rows }}
|
||||
<tr>
|
||||
<td><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle row {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
|
||||
<td>{{ .Name }}</td>
|
||||
<td>{{ .Type }}</td>
|
||||
<td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
|
||||
<td class="action-cell">
|
||||
<a class="text-link" href="{{ .EditURL }}">Edit</a>
|
||||
<a class="text-link" href="{{ .RemoveURL }}">Remove</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{ if gt .Pager.TotalPages 1 }}
|
||||
<nav class="pager pager-dots" aria-label="Pagination">
|
||||
{{ range .Pager.Links }}
|
||||
{{ if .Ellipsis }}
|
||||
<span class="ellipsis" aria-hidden="true">…</span>
|
||||
{{ else if .Current }}
|
||||
<a class="current" aria-current="page" href="{{ .URL }}" aria-label="Page {{ .Label }}, current">{{ .Label }}</a>
|
||||
{{ else }}
|
||||
<a href="{{ .URL }}" aria-label="Go to page {{ .Label }}">{{ .Label }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
95
demo/web/templates/forms_pattern.html
Normal file
95
demo/web/templates/forms_pattern.html
Normal file
@@ -0,0 +1,95 @@
|
||||
{{ define "forms_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Tabbed/step-based forms with datalist suggestions, inline validation, and explicit review/confirm workflow." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<section class="panel" id="forms-mode">
|
||||
<div class="panel-head"><h2>Mode Switch (Tabs)</h2></div>
|
||||
<div class="segmented">
|
||||
<a class="segment {{ if eq .Mode "register" }}active{{ end }}" href="{{ index .ModeURLs "register" }}">Manual register</a>
|
||||
<a class="segment {{ if eq .Mode "import" }}active{{ end }}" href="{{ index .ModeURLs "import" }}">Import-assisted</a>
|
||||
</div>
|
||||
<p class="meta" style="margin-top:10px;">Tabs preserve entered values while changing workflow mode.</p>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="forms-steps">
|
||||
<div class="panel-head"><h2>Step Flow</h2></div>
|
||||
<div class="segmented">
|
||||
<a class="segment {{ if eq .Step "edit" }}active{{ end }}" href="{{ index .StepURLs "edit" }}">Edit</a>
|
||||
<a class="segment {{ if eq .Step "review" }}active{{ end }}" href="{{ index .StepURLs "review" }}">Review</a>
|
||||
<a class="segment {{ if eq .Step "confirm" }}active{{ end }}" href="{{ index .StepURLs "confirm" }}">Done</a>
|
||||
</div>
|
||||
{{ if .Message }}<div class="notice" style="margin-top:12px;">{{ .Message }}</div>{{ end }}
|
||||
</section>
|
||||
|
||||
<section class="panel" id="forms-contract">
|
||||
<div class="panel-head"><h2>Form Contract Demo</h2></div>
|
||||
<form class="forms-grid" method="get" action="/patterns/forms#forms-contract">
|
||||
<input type="hidden" name="mode" value="{{ .Mode }}">
|
||||
<input type="hidden" name="step" value="review">
|
||||
|
||||
<label>Server serial {{ if index .FieldErrors "server_serial" }}<span class="field-error">{{ index .FieldErrors "server_serial" }}</span>{{ end }}
|
||||
<input class="{{ if index .FieldErrors "server_serial" }}input-error{{ end }}" name="server_serial" value="{{ .ServerSerial }}" list="forms-server-list" placeholder="SRV-001">
|
||||
<datalist id="forms-server-list">{{ range .ServerOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
|
||||
</label>
|
||||
|
||||
<label>Location / slot {{ if index .FieldErrors "location" }}<span class="field-error">{{ index .FieldErrors "location" }}</span>{{ end }}
|
||||
<input class="{{ if index .FieldErrors "location" }}input-error{{ end }}" name="location" value="{{ .Location }}" list="forms-location-list" placeholder="AOC#1">
|
||||
<datalist id="forms-location-list">{{ range .LocationOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
|
||||
</label>
|
||||
|
||||
<label>Component serial {{ if index .FieldErrors "component_serial" }}<span class="field-error">{{ index .FieldErrors "component_serial" }}</span>{{ end }}
|
||||
<input class="{{ if index .FieldErrors "component_serial" }}input-error{{ end }}" name="component_serial" value="{{ .ComponentSerial }}" list="forms-component-list" placeholder="NIC-AX210-001">
|
||||
<datalist id="forms-component-list">{{ range .ComponentOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
|
||||
</label>
|
||||
|
||||
<label>Event date {{ if index .FieldErrors "event_date" }}<span class="field-error">{{ index .FieldErrors "event_date" }}</span>{{ end }}
|
||||
<input class="{{ if index .FieldErrors "event_date" }}input-error{{ end }}" type="date" name="event_date" value="{{ .EventDate }}">
|
||||
</label>
|
||||
|
||||
<label class="full-row">Details
|
||||
<textarea name="details" rows="3" placeholder="Optional human-readable note">{{ .Details }}</textarea>
|
||||
</label>
|
||||
|
||||
<label class="full-row">Import file (demo control)
|
||||
<input type="file" name="upload" accept=".csv,text/csv,application/json">
|
||||
<span class="meta">UI-only demo control: actual upload/parse flow is demonstrated in Import/Export pattern.</span>
|
||||
</label>
|
||||
|
||||
<label class="checkbox-row full-row"><input type="checkbox" checked> Show suggestions from full query scope (not current page only)</label>
|
||||
<label class="checkbox-row full-row"><input type="checkbox"> Allow force action on ambiguous match (requires explicit review)</label>
|
||||
|
||||
<div class="button-demo-row full-row">
|
||||
<button class="btn btn-primary" type="submit">Review</button>
|
||||
<a class="btn btn-secondary" href="{{ index .StepURLs "edit" }}">Stay in edit</a>
|
||||
<a class="btn btn-ghost" href="/patterns/forms#forms-contract">Reset</a>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
{{ if or (eq .Step "review") (eq .Step "confirm") }}
|
||||
<section class="panel" id="forms-review">
|
||||
<div class="panel-head"><h2>{{ if eq .Step "confirm" }}Result Summary{{ else }}Review Summary{{ end }}</h2></div>
|
||||
<div class="table-wrap">
|
||||
<table class="ui-table">
|
||||
<tbody>
|
||||
<tr><th style="width:30%;">Mode</th><td>{{ .Mode }}</td></tr>
|
||||
<tr><th>Server serial</th><td>{{ if .ServerSerial }}{{ .ServerSerial }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
|
||||
<tr><th>Location</th><td>{{ if .Location }}{{ .Location }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
|
||||
<tr><th>Component serial</th><td>{{ if .ComponentSerial }}{{ .ComponentSerial }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
|
||||
<tr><th>Date</th><td>{{ .EventDate }}</td></tr>
|
||||
<tr><th>Details</th><td>{{ if .Details }}{{ .Details }}{{ else }}<span class="meta">No note</span>{{ end }}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="button-demo-row" style="margin-top:12px;">
|
||||
{{ if eq .Step "review" }}
|
||||
<a class="btn btn-secondary" href="{{ index .StepURLs "edit" }}">Back to edit</a>
|
||||
<a class="btn btn-primary" href="{{ index .StepURLs "confirm" }}">Confirm</a>
|
||||
{{ else }}
|
||||
<a class="btn btn-primary" href="{{ index .StepURLs "edit" }}">Start new</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
99
demo/web/templates/io_pattern.html
Normal file
99
demo/web/templates/io_pattern.html
Normal file
@@ -0,0 +1,99 @@
|
||||
{{ define "io_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Canonical file transfer UX: import preview/confirm and export with explicit scope/format selection." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<section class="panel" id="io-import">
|
||||
<div class="panel-head"><h2>Import Workflow</h2></div>
|
||||
<div class="notice">{{ .ImportMessage }}</div>
|
||||
<form class="filters" method="get" action="/patterns/io#io-import">
|
||||
<input type="hidden" name="import_mode" value="{{ .ImportMode }}">
|
||||
<label>Source file
|
||||
<input type="text" name="file" value="{{ .FileName }}" placeholder="items.csv">
|
||||
</label>
|
||||
<label>Step
|
||||
<select name="import_mode">
|
||||
<option value="preview" {{ if eq .ImportMode "preview" }}selected{{ end }}>Preview</option>
|
||||
<option value="confirm" {{ if eq .ImportMode "confirm" }}selected{{ end }}>Confirm</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Validation profile
|
||||
<select>
|
||||
<option selected>strict</option>
|
||||
<option>lenient</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="filter-actions">
|
||||
<button class="btn btn-primary btn-pair" type="submit">Render state</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-wrap" style="margin-top:12px;">
|
||||
<table class="ui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Row</th>
|
||||
<th>Code</th>
|
||||
<th>Name</th>
|
||||
<th>Qty</th>
|
||||
<th>Validation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .PreviewRows }}
|
||||
<tr>
|
||||
<td>{{ .RowNo }}</td>
|
||||
<td>{{ .ItemCode }}</td>
|
||||
<td>{{ .Name }}</td>
|
||||
<td>{{ .Qty }}</td>
|
||||
<td><span class="status status-{{ if eq .Status "error" }}warning{{ else }}ready{{ end }}">{{ .Status }}</span></td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="button-demo-row" style="margin-top:12px;">
|
||||
{{ if eq .ImportMode "preview" }}
|
||||
<a class="btn btn-primary" href="/patterns/io?import_mode=confirm&file={{ .FileName }}#io-import">Review Import</a>
|
||||
{{ else }}
|
||||
<a class="btn btn-secondary" href="/patterns/io?import_mode=preview&file={{ .FileName }}#io-import">Back to preview</a>
|
||||
<a class="btn btn-primary" href="/patterns/io?import_mode=preview&file={{ .FileName }}#io-import">Confirm & Import (demo)</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="io-export">
|
||||
<div class="panel-head"><h2>Export Workflow</h2></div>
|
||||
<div class="notice">{{ .ExportMessage }}</div>
|
||||
<form class="filters" method="get" action="/patterns/io#io-export">
|
||||
<input type="hidden" name="export_ready" value="1">
|
||||
<label>Format
|
||||
<select name="format">
|
||||
<option value="csv" {{ if eq .ExportFormat "csv" }}selected{{ end }}>CSV</option>
|
||||
<option value="json" {{ if eq .ExportFormat "json" }}selected{{ end }}>JSON (planned)</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Scope
|
||||
<select name="scope">
|
||||
<option value="filtered" {{ if eq .ExportScope "filtered" }}selected{{ end }}>Filtered rows</option>
|
||||
<option value="selected" {{ if eq .ExportScope "selected" }}selected{{ end }}>Selected rows</option>
|
||||
<option value="all" {{ if eq .ExportScope "all" }}selected{{ end }}>All rows</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Include headers
|
||||
<select>
|
||||
<option selected>Yes</option>
|
||||
<option>No</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="filter-actions">
|
||||
<button class="btn btn-primary btn-pair" type="submit">Prepare export</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="button-demo-row" style="margin-top:12px;">
|
||||
<a class="btn btn-primary" href="/patterns/io/export.csv?scope={{ .ExportScope }}">Download CSV</a>
|
||||
<a class="btn btn-ghost" href="/patterns/io#io-export">Reset</a>
|
||||
</div>
|
||||
<p class="meta" style="margin-top:10px;">Demo export endpoint includes UTF-8 BOM and semicolon delimiter to illustrate spreadsheet compatibility patterns.</p>
|
||||
</section>
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
74
demo/web/templates/modal_pattern.html
Normal file
74
demo/web/templates/modal_pattern.html
Normal file
@@ -0,0 +1,74 @@
|
||||
{{ define "modal_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Single-modal workflow progression: edit → confirm → complete, with explicit cancel/close paths." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<section class="panel" id="modal-open-states">
|
||||
<div class="panel-head"><h2>Open States</h2></div>
|
||||
<div class="button-demo-row">
|
||||
<a class="btn btn-primary" href="/patterns/modals?open=edit&stage=edit&sel=1&sel=3#modal-open-states">Open Edit Modal</a>
|
||||
<a class="btn btn-secondary" href="/patterns/modals?open=delete&stage=confirm&sel=2#modal-open-states">Open Confirm Modal</a>
|
||||
<a class="btn btn-ghost" href="/patterns/modals#modal-open-states">No modal open</a>
|
||||
</div>
|
||||
<div class="notice">{{ .Message }}</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="modal-context">
|
||||
<div class="panel-head"><h2>Page Context</h2></div>
|
||||
<div class="card">
|
||||
<div class="row"><h3>Selected items</h3><span class="status status-{{ if .SelectedIDs }}ready{{ else }}review{{ end }}">{{ if .SelectedIDs }}{{ len .SelectedIDs }} selected{{ else }}none{{ end }}</span></div>
|
||||
<p class="meta">{{ if .SelectedIDs }}IDs: {{ range $i, $id := .SelectedIDs }}{{ if $i }}, {{ end }}{{ $id }}{{ end }}{{ else }}Select rows on the controls page to carry context into modal demos.{{ end }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ if .Open }}
|
||||
<div class="demo-modal-backdrop">
|
||||
<section class="demo-modal">
|
||||
<div class="demo-modal-titlebar">
|
||||
<a class="demo-modal-close-dot" href="/patterns/modals#modal-open-states" aria-label="Close modal"></a>
|
||||
<div class="demo-modal-title">{{ if eq .Open "delete" }}Confirm Destructive Action{{ else }}Edit Items{{ end }}</div>
|
||||
</div>
|
||||
<div class="demo-modal-body">
|
||||
<p class="meta">{{ .Message }}</p>
|
||||
|
||||
{{ if eq .Stage "edit" }}
|
||||
<div class="modal-grid">
|
||||
<label>Display name <input type="text" value="Example group change"></label>
|
||||
<label>Status after action
|
||||
<select>
|
||||
<option>ready</option>
|
||||
<option selected>review</option>
|
||||
<option>warning</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="checkbox-row"><input type="checkbox" checked> Apply to all selected items</label>
|
||||
<label class="checkbox-row"><input type="checkbox"> Clear optional field values</label>
|
||||
</div>
|
||||
<div class="button-demo-row">
|
||||
<a class="btn btn-secondary" href="/patterns/modals#modal-open-states">Cancel</a>
|
||||
<a class="btn btn-primary" href="/patterns/modals?open={{ .Open }}&stage=confirm{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Review Changes</a>
|
||||
</div>
|
||||
{{ else if eq .Stage "confirm" }}
|
||||
<div class="card">
|
||||
<h3 style="margin:0;">Confirmation Summary</h3>
|
||||
<ul>
|
||||
<li>Selected rows are listed and reviewed before submit.</li>
|
||||
<li>Destructive actions require explicit confirmation wording.</li>
|
||||
<li>No nested modals; stay within one modal state machine.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="button-demo-row">
|
||||
<a class="btn btn-secondary" href="/patterns/modals?open={{ .Open }}&stage=edit{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Back</a>
|
||||
<a class="btn {{ if eq .Open "delete" }}btn-danger{{ else }}btn-primary{{ end }}" href="/patterns/modals?open={{ .Open }}&stage=done{{ range .SelectedIDs }}&sel={{ . }}{{ end }}#modal-open-states">Confirm</a>
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="notice success">Action completed. Show human-readable summary and next actions.</div>
|
||||
<div class="button-demo-row">
|
||||
<a class="btn btn-primary" href="/patterns/modals#modal-open-states">Done</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
114
demo/web/templates/operator_tools_pattern.html
Normal file
114
demo/web/templates/operator_tools_pattern.html
Normal file
@@ -0,0 +1,114 @@
|
||||
{{ define "operator_tools_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Universal operator/admin dashboard pattern: tool queue, batch actions, safety checks, import/export shortcuts, and explicit confirmation paths." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<section class="panel panel-composite" id="operator-workbench">
|
||||
<div class="panel-subsection" id="operator-filters">
|
||||
<div class="panel-head">
|
||||
<h2>Tool Scope Tabs</h2>
|
||||
<div class="meta">{{ .VisibleCount }} visible jobs · {{ .SelectedCount }} selected</div>
|
||||
</div>
|
||||
<div class="segmented">
|
||||
<a class="segment {{ if eq .Scope "assets" }}active{{ end }}" href="{{ index .ScopeURLs "assets" }}">Assets</a>
|
||||
<a class="segment {{ if eq .Scope "components" }}active{{ end }}" href="{{ index .ScopeURLs "components" }}">Components</a>
|
||||
<a class="segment {{ if eq .Scope "imports" }}active{{ end }}" href="{{ index .ScopeURLs "imports" }}">Imports</a>
|
||||
<a class="segment {{ if eq .Scope "maintenance" }}active{{ end }}" href="{{ index .ScopeURLs "maintenance" }}">Maintenance</a>
|
||||
<a class="segment {{ if eq .Scope "all" }}active{{ end }}" href="{{ index .ScopeURLs "all" }}">All</a>
|
||||
</div>
|
||||
<div class="segmented" style="margin-top:10px;">
|
||||
<a class="segment {{ if eq .Queue "all" }}active{{ end }}" href="{{ index .QueueURLs "all" }}">All queue states</a>
|
||||
<a class="segment {{ if eq .Queue "queued" }}active{{ end }}" href="{{ index .QueueURLs "queued" }}">Queued</a>
|
||||
<a class="segment {{ if eq .Queue "running" }}active{{ end }}" href="{{ index .QueueURLs "running" }}">Running</a>
|
||||
<a class="segment {{ if eq .Queue "failed" }}active{{ end }}" href="{{ index .QueueURLs "failed" }}">Failed</a>
|
||||
<a class="segment {{ if eq .Queue "done" }}active{{ end }}" href="{{ index .QueueURLs "done" }}">Done</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-subsection panel-subsection-divider" id="operator-actions">
|
||||
<div class="panel-head">
|
||||
<h2>Operator Tooling Actions</h2>
|
||||
<div class="meta">Batch controls must keep scope/filter context explicit</div>
|
||||
</div>
|
||||
{{ if .ActionMessage }}<div class="notice">{{ .ActionMessage }}</div>{{ end }}
|
||||
<p class="meta" style="margin-bottom:12px;">
|
||||
Selected on this view: {{ .SelectedVisible }}{{ if gt .SelectionOutside 0 }} · Selected outside current filter: {{ .SelectionOutside }}{{ end }}
|
||||
</p>
|
||||
<div class="bulk-bar">
|
||||
<a class="btn btn-secondary" href="{{ .SelectVisibleURL }}">Select visible</a>
|
||||
<a class="btn btn-secondary" href="{{ .ClearVisibleURL }}">Clear visible</a>
|
||||
<a class="btn btn-ghost" href="{{ .ClearSelectionURL }}">Clear selection</a>
|
||||
<a class="btn btn-primary" href="{{ .RunSelectedURL }}">Run selected</a>
|
||||
<a class="btn btn-secondary" href="{{ .RetrySelectedURL }}">Retry selected</a>
|
||||
<a class="btn btn-danger" href="{{ .CancelSelectedURL }}">Cancel selected</a>
|
||||
<a class="btn btn-secondary" href="{{ .OpenReviewModalURL }}">Open confirm modal</a>
|
||||
</div>
|
||||
<div class="button-demo-row" style="margin-top:12px;">
|
||||
<a class="btn btn-secondary" href="{{ .ImportPreviewURL }}">Import batch preview</a>
|
||||
<a class="btn btn-secondary" href="{{ .ExportFilteredURL }}">Export filtered</a>
|
||||
<a class="btn btn-secondary" href="{{ .ExportSelectedURL }}">Export selected</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-subsection panel-subsection-divider" id="operator-queue">
|
||||
<div class="panel-head">
|
||||
<h2>Operations Queue</h2>
|
||||
<div class="meta">Complex dashboards may include multiple tables; standardize row actions and statuses first.</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="ui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th>Job ID</th>
|
||||
<th>Tool</th>
|
||||
<th>Scope</th>
|
||||
<th>Mode</th>
|
||||
<th>Status</th>
|
||||
<th>Owner</th>
|
||||
<th>Started</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range .Rows }}
|
||||
<tr>
|
||||
<td><a class="check-toggle {{ if .Selected }}checked{{ end }}" href="{{ .ToggleURL }}" aria-label="Toggle {{ .ID }}">{{ if .Selected }}☑{{ else }}☐{{ end }}</a></td>
|
||||
<td><code>{{ .ID }}</code></td>
|
||||
<td>{{ .Tool }}</td>
|
||||
<td>{{ .Scope }}</td>
|
||||
<td>{{ .Mode }}</td>
|
||||
<td><span class="status status-{{ .Status }}">{{ .Status }}</span></td>
|
||||
<td>{{ .Owner }}</td>
|
||||
<td>{{ .StartedAt }}</td>
|
||||
<td class="action-cell">
|
||||
<a class="text-link" href="{{ .RetryURL }}">Retry</a>
|
||||
<a class="text-link" href="{{ .CancelURL }}">Cancel</a>
|
||||
<a class="text-link" href="{{ .ExportURL }}">Export</a>
|
||||
<a class="text-link" href="{{ .InspectURL }}">Inspect</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ else }}
|
||||
<tr><td colspan="9"><span class="meta">No queued items for this scope/filter combination.</span></td></tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="operator-safety">
|
||||
<div class="panel-head"><h2>Safety Checklist</h2></div>
|
||||
<ul class="meta">
|
||||
{{ range .SafetyChecklist }}
|
||||
<li>{{ . }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<div class="panel-head" style="margin-top:14px;"><h2>Recent Operator Notes</h2></div>
|
||||
<ul class="meta">
|
||||
{{ range .RecentActivityNotes }}
|
||||
<li>{{ . }}</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</section>
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
177
demo/web/templates/style_playground_pattern.html
Normal file
177
demo/web/templates/style_playground_pattern.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{{ define "style_playground_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Experiment with visual directions on identical UI modules. Behavior contracts stay the same; only presentation changes." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<div class="style-playground {{ .StyleClass }}">
|
||||
<section class="panel" id="style-presets">
|
||||
<div class="panel-head">
|
||||
<h2>Theme Presets</h2>
|
||||
<div class="meta">Current: {{ .StyleLabel }}</div>
|
||||
</div>
|
||||
<div class="segmented status-filter-tabs status-filter-tabs-blue">
|
||||
<a class="segment {{ if eq .Style "linen" }}active{{ end }}" href="{{ index .StyleURLs "linen" }}">Linen</a>
|
||||
<a class="segment {{ if eq .Style "slate" }}active{{ end }}" href="{{ index .StyleURLs "slate" }}">Slate</a>
|
||||
<a class="segment {{ if eq .Style "signal" }}active{{ end }}" href="{{ index .StyleURLs "signal" }}">Signal</a>
|
||||
<a class="segment {{ if eq .Style "y2k-silver" }}active{{ end }}" href="{{ index .StyleURLs "y2k-silver" }}">Y2K Silver</a>
|
||||
<a class="segment {{ if eq .Style "vaporwave-soft" }}active{{ end }}" href="{{ index .StyleURLs "vaporwave-soft" }}">Vapor Soft</a>
|
||||
<a class="segment {{ if eq .Style "vaporwave-night" }}active{{ end }}" href="{{ index .StyleURLs "vaporwave-night" }}">Vapor Night</a>
|
||||
<a class="segment {{ if eq .Style "aqua" }}active{{ end }}" href="{{ index .StyleURLs "aqua" }}">Aqua</a>
|
||||
<a class="segment {{ if eq .Style "win9x" }}active{{ end }}" href="{{ index .StyleURLs "win9x" }}">Win9x</a>
|
||||
</div>
|
||||
<p class="meta" style="margin-top:10px;">Use this page to compare visual directions on identical UI modules. Behavior contracts stay the same; only presentation changes.</p>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="style-components">
|
||||
<div class="panel-head">
|
||||
<h2>Component Preview</h2>
|
||||
<div class="button-demo-row" style="margin-top:0;">
|
||||
{{ if .LoadingDemo }}
|
||||
<a class="btn btn-ghost" href="{{ .ClearLoadingURL }}">Stop loading demo</a>
|
||||
{{ else }}
|
||||
<a class="btn btn-secondary" href="{{ .LoadingDemoURL }}">Simulate loading state</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<article class="card">
|
||||
<h3 style="margin-top:0;">Buttons</h3>
|
||||
<div class="button-demo-row">
|
||||
<button class="btn btn-primary" type="button">Apply</button>
|
||||
<button class="btn btn-secondary" type="button">Review</button>
|
||||
<button class="btn btn-ghost" type="button">Reset</button>
|
||||
<button class="btn btn-danger" type="button">Archive</button>
|
||||
{{ if .LoadingDemo }}
|
||||
<a class="btn btn-secondary is-loading" aria-disabled="true" href="{{ .ClearLoadingURL }}">Loading…</a>
|
||||
{{ else }}
|
||||
<button class="btn" type="button" disabled>Disabled</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h3 style="margin-top:0;">Status + Chips</h3>
|
||||
<div class="chip-row">
|
||||
<span class="chip">URL-driven state</span>
|
||||
<span class="chip">Server-rendered</span>
|
||||
<span class="chip">Anchor restore</span>
|
||||
</div>
|
||||
<div class="button-demo-row" style="margin-top:12px;">
|
||||
<span class="status status-ready">ready</span>
|
||||
<span class="status status-warning">warning</span>
|
||||
<span class="status status-review">review</span>
|
||||
<span class="status status-failed">failed</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="style-status-filter">
|
||||
<div class="panel-head">
|
||||
<h2>Segmented Status Filter</h2>
|
||||
<div class="meta">12 filtered • page 1/3 • 0 selected</div>
|
||||
</div>
|
||||
<div class="status-filter-shell">
|
||||
<div class="segmented status-filter-tabs status-filter-tabs-dark" role="tablist" aria-label="Status filter">
|
||||
<button class="segment active" type="button" role="tab" aria-selected="true">All (12)</button>
|
||||
<button class="segment" type="button" role="tab" aria-selected="false">Ready (4)</button>
|
||||
<button class="segment" type="button" role="tab" aria-selected="false">Warning (4)</button>
|
||||
<button class="segment" type="button" role="tab" aria-selected="false">Review (4)</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="style-filters">
|
||||
<div class="panel-head">
|
||||
<h2>Compact Filter Module</h2>
|
||||
<div class="button-demo-row" style="margin-top:0;">
|
||||
<button class="btn btn-primary btn-pair" type="button">Apply</button>
|
||||
<button class="btn btn-ghost btn-pair" type="button">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<form class="filters" action="/patterns/style-playground#style-filters" method="get">
|
||||
<input type="hidden" name="style" value="{{ .Style }}">
|
||||
<label>
|
||||
Search
|
||||
<input type="text" name="q" value="rack / owner / status">
|
||||
</label>
|
||||
<label>
|
||||
Category
|
||||
<select name="category">
|
||||
<option selected>All</option>
|
||||
<option>Compute</option>
|
||||
<option>Networking</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Status
|
||||
<select name="status">
|
||||
<option selected>All</option>
|
||||
<option>ready</option>
|
||||
<option>warning</option>
|
||||
<option>review</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Rows per page
|
||||
<select name="per_page">
|
||||
<option>5</option>
|
||||
<option selected>10</option>
|
||||
<option>20</option>
|
||||
</select>
|
||||
</label>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="panel" id="style-surface">
|
||||
<div class="panel-head">
|
||||
<h2>Surface + Table Readability</h2>
|
||||
<div class="meta">Same content under a different visual direction</div>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="ui-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Category</th>
|
||||
<th class="status-col">Status</th>
|
||||
<th>Owner</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Rack Controller Alpha</td>
|
||||
<td>Compute</td>
|
||||
<td class="status-col"><span class="status status-ready">ready</span></td>
|
||||
<td>Ops</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13</td>
|
||||
<td>Patch Panel Group</td>
|
||||
<td>Networking</td>
|
||||
<td class="status-col"><span class="status status-warning">warning</span></td>
|
||||
<td>Infra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>Mapping Repair Queue</td>
|
||||
<td>Storage</td>
|
||||
<td class="status-col"><span class="status status-review">review</span></td>
|
||||
<td>QA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pager pager-dots" style="margin-top:12px;" aria-label="Pagination preview">
|
||||
<a class="current" aria-current="page" href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Page 1, current">1</a>
|
||||
<a href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Go to page 2">2</a>
|
||||
<span class="ellipsis" aria-hidden="true">…</span>
|
||||
<a href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Go to page 7">7</a>
|
||||
<a href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Go to page 8">8</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
118
demo/web/templates/timeline_pattern.html
Normal file
118
demo/web/templates/timeline_pattern.html
Normal file
@@ -0,0 +1,118 @@
|
||||
{{ define "timeline_pattern.html" }}
|
||||
{{ template "demo_doc_start" . }}
|
||||
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Grouped timeline cards by day with source/action filters and single drilldown modal." "back_url" "/" "back_text" "← Back to catalog") }}
|
||||
|
||||
<section class="panel panel-composite" id="timeline-module">
|
||||
<div class="panel-subsection" id="timeline-filters">
|
||||
<div class="panel-head"><h2>Timeline Filters</h2></div>
|
||||
<div class="segmented" style="margin-bottom:10px;">
|
||||
<a class="segment {{ if eq .ActionFilter "" }}active{{ end }}" href="{{ index .ActionURLs "" }}">All actions</a>
|
||||
<a class="segment {{ if eq .ActionFilter "installation" }}active{{ end }}" href="{{ index .ActionURLs "installation" }}">Installation</a>
|
||||
<a class="segment {{ if eq .ActionFilter "removal" }}active{{ end }}" href="{{ index .ActionURLs "removal" }}">Removal</a>
|
||||
<a class="segment {{ if eq .ActionFilter "edit" }}active{{ end }}" href="{{ index .ActionURLs "edit" }}">Edit</a>
|
||||
</div>
|
||||
<div class="segmented">
|
||||
<a class="segment {{ if eq .SourceFilter "" }}active{{ end }}" href="{{ index .SourceURLs "" }}">All sources</a>
|
||||
<a class="segment {{ if eq .SourceFilter "manual" }}active{{ end }}" href="{{ index .SourceURLs "manual" }}">Manual</a>
|
||||
<a class="segment {{ if eq .SourceFilter "ingest" }}active{{ end }}" href="{{ index .SourceURLs "ingest" }}">Ingest</a>
|
||||
<a class="segment {{ if eq .SourceFilter "system" }}active{{ end }}" href="{{ index .SourceURLs "system" }}">System</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-subsection panel-subsection-divider" id="timeline-cards">
|
||||
<div class="panel-head"><h2>Grouped Cards</h2></div>
|
||||
{{ if .Cards }}
|
||||
<div class="timeline-cards">
|
||||
{{ range .Cards }}
|
||||
<article class="timeline-card">
|
||||
<div class="timeline-card-top">
|
||||
<div>
|
||||
<p class="timeline-day">{{ .Day }}</p>
|
||||
<h3>{{ .Title }}</h3>
|
||||
</div>
|
||||
<div class="timeline-meta">
|
||||
<span class="status status-review">{{ .Action }}</span>
|
||||
<span class="status status-{{ if eq .Source "manual" }}ready{{ else if eq .Source "ingest" }}warning{{ else }}review{{ end }}">{{ .Source }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-summary-grid">
|
||||
<div>
|
||||
<div class="meta">Models / Types</div>
|
||||
<div class="chip-row">{{ range .SummaryLeft }}<span class="chip">{{ . }}</span>{{ end }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="meta">Slots / Scope</div>
|
||||
<div class="chip-row">{{ range .SummaryRight }}<span class="chip">{{ . }}</span>{{ end }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-card-actions">
|
||||
<span class="meta">{{ .Count }} event(s)</span>
|
||||
<a class="btn btn-secondary" href="{{ .OpenURL }}">Open details</a>
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
<div class="notice">No timeline cards match current filters.</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ if .OpenCard }}
|
||||
<div class="demo-modal-backdrop">
|
||||
<section class="demo-modal timeline-modal">
|
||||
<div class="demo-modal-titlebar">
|
||||
<a class="demo-modal-close-dot" href="{{ .ClearCardURL }}" aria-label="Close modal"></a>
|
||||
<div class="demo-modal-title">{{ .OpenCard.Title }}</div>
|
||||
</div>
|
||||
<div class="demo-modal-body">
|
||||
<p class="meta">{{ .OpenCard.Day }} · {{ .OpenCard.Source }} · {{ .OpenCard.Action }}</p>
|
||||
<form id="timeline-drilldown" class="filters" method="get" action="/patterns/timeline#timeline-drilldown" style="margin-top:12px;">
|
||||
<input type="hidden" name="action" value="{{ .ActionFilter }}">
|
||||
<input type="hidden" name="source" value="{{ .SourceFilter }}">
|
||||
<input type="hidden" name="open" value="{{ .OpenCard.ID }}">
|
||||
<label>Filter events in card
|
||||
<input type="search" name="q" value="{{ .CardSearch }}" placeholder="serial / slot / model / source">
|
||||
</label>
|
||||
<div></div><div></div>
|
||||
<div class="filter-actions">
|
||||
<button class="btn btn-primary btn-pair" type="submit">Apply</button>
|
||||
<a class="btn btn-ghost btn-pair" href="{{ .ClearCardURL }}">Reset</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="timeline-drill-grid">
|
||||
<div class="timeline-drill-list">
|
||||
{{ if .OpenCard.Items }}
|
||||
{{ range .OpenCard.Items }}
|
||||
<a class="timeline-item {{ if and $.ActiveEvent (eq $.ActiveEvent.ID .ID) }}active{{ end }}" href="/patterns/timeline?action={{ $.ActionFilter }}&source={{ $.SourceFilter }}&open={{ $.OpenCard.ID }}{{ if $.CardSearch }}&q={{ $.CardSearch }}{{ end }}&event={{ .ID }}#timeline-drilldown">
|
||||
<div class="timeline-item-title">{{ .Action }} · {{ .At }}</div>
|
||||
<div class="timeline-item-meta">{{ .Entity }} · {{ .Target }}</div>
|
||||
<div class="timeline-item-meta">{{ .Slot }} · {{ .Device }} · {{ .Source }}</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<div class="notice">No events match the card filter.</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="timeline-drill-detail">
|
||||
{{ if .ActiveEvent }}
|
||||
<h3 style="margin-top:0;">Event Detail</h3>
|
||||
<div class="meta">When: {{ .ActiveEvent.At }}</div>
|
||||
<div class="meta">Action: {{ .ActiveEvent.Action }}</div>
|
||||
<div class="meta">Source: {{ .ActiveEvent.Source }}</div>
|
||||
<div class="meta">Entity: {{ .ActiveEvent.Entity }}</div>
|
||||
<div class="meta">Target: {{ .ActiveEvent.Target }}</div>
|
||||
<div class="meta">Slot / Device: {{ .ActiveEvent.Slot }} · {{ .ActiveEvent.Device }}</div>
|
||||
<div class="notice" style="margin-top:12px;">{{ .ActiveEvent.Detail }}</div>
|
||||
{{ else }}
|
||||
<div class="meta">Select an event to view details.</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ template "demo_doc_end" . }}
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user