Files
pxe-server/webapp/templates/_ui.html
cproudlock 35cad62733 Webapp redesign phase 1: shell, tokens and shared components
- static/pxe-ui.css: the redesign's colour tokens (light and dark),
  shell, chips, stage track, expandable rows, menus and buttons. The
  legacy tokens (--bg-card, --border, --text-light, ...) alias onto the
  new ones so pages not yet redesigned blend in.
- base.html: new sidebar (Operate, Images, Updates, Tools) with the GE
  Aerospace logo on the brand blue, to-do count, theme toggle with
  aria-pressed, and a menu button on narrow screens. The to-do banner is
  now a one-line strip. Skip link and <main> landmark added.
- _ui.html: Jinja macros for chip, track, the actions menu and the page
  header.
2026-10-14 13:38:05 -04:00

38 lines
1.6 KiB
HTML

{# Shared redesign macros. Import with: {% import '_ui.html' as ui %} #}
{# Status chip. kind: fail err act run ok warn neutral w11 w10 off edit remove #}
{% macro chip(text, kind='neutral', title=None) -%}
<span class="chip c-{{ kind }}"{% if title %} title="{{ title }}"{% endif %}>{{ text }}</span>
{%- endmacro %}
{# Segmented stage track: one segment per stage; earlier ones grey, the
current one in the status colour (kind: fail act run ok). #}
{% macro track(total, current, kind='run', label=None) -%}
{% set total = total or 0 %}{% set current = current or 0 %}
<div class="track" role="img" aria-label="{{ label or ('Stage ' ~ current ~ ' of ' ~ total) }}">
{%- for i in range(1, total + 1) -%}
<i class="{{ kind if kind == 'ok' else ('d' if i < current else (kind if i == current else '')) }}"></i>
{%- endfor -%}
</div>
{%- endmacro %}
{# "..." menu. The caller block supplies <a>/<button>/<form> items. #}
{% macro more(label, left=False) -%}
<details class="more{{ ' lft' if left }}">
<summary class="ui-btn ghost" aria-label="More actions for {{ label }}">&#8943;</summary>
<div class="menu">{{ caller() }}</div>
</details>
{%- endmacro %}
{# Page header. The caller block, if any, renders the right-hand actions. #}
{% macro head(title, eyebrow=None, sub=None) -%}
<header class="ui-head">
<div>
{% if eyebrow %}<div class="eyebrow-t">{{ eyebrow }}</div>{% endif %}
<h1>{{ title }}</h1>
{% if sub %}<div class="sub" style="margin-top: 2px">{{ sub }}</div>{% endif %}
</div>
{% if caller is defined %}<div class="actions">{{ caller() }}</div>{% endif %}
</header>
{%- endmacro %}