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.
This commit is contained in:
cproudlock
37
webapp/templates/_ui.html
Normal file
37
webapp/templates/_ui.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{# 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 }}">⋯</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 %}
|
||||
@@ -10,6 +10,8 @@
|
||||
<link href="{{ url_for('static', filename='bootstrap-icons.min.css') }}" rel="stylesheet">
|
||||
<!-- pxe-theme.css loads AFTER bootstrap so its token+component rules win -->
|
||||
<link href="{{ url_for('static', filename='pxe-theme.css') }}" rel="stylesheet">
|
||||
<!-- pxe-ui.css: redesign tokens and components; legacy tokens alias onto it -->
|
||||
<link href="{{ url_for('static', filename='pxe-ui.css') }}" rel="stylesheet">
|
||||
<script>
|
||||
// Set the theme before first paint to avoid an unstyled flash.
|
||||
(function () {
|
||||
@@ -26,164 +28,92 @@
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<nav class="sidebar d-flex flex-column">
|
||||
<div class="sidebar-header">
|
||||
<img class="sidebar-logo" src="{{ url_for('static', filename='ge-aerospace-logo.svg') }}" alt="GE Aerospace">
|
||||
<div class="brand-title">PXE Manager</div>
|
||||
</div>
|
||||
|
||||
<ul class="sidebar-nav nav flex-column mt-2">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'dashboard' %}active{% endif %}"
|
||||
href="{{ url_for('dashboard') }}">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'images_import' %}active{% endif %}"
|
||||
href="{{ url_for('images_import') }}">
|
||||
<i class="bi bi-box-arrow-in-down"></i> Image Import
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'imaging_dashboard' %}active{% endif %}"
|
||||
href="{{ url_for('imaging_dashboard') }}">
|
||||
<i class="bi bi-activity"></i> Imaging Progress
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="nav-section">Tools</div>
|
||||
<ul class="sidebar-nav nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint in ['startnet_editor', 'shopfloor_menu'] %}active{% endif %}"
|
||||
href="{{ url_for('startnet_editor') }}">
|
||||
<i class="bi bi-list-ol"></i> Boot Menu
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'clonezilla_backups' %}active{% endif %}"
|
||||
href="{{ url_for('clonezilla_backups') }}">
|
||||
<i class="bi bi-hdd-stack"></i> Clonezilla Backups
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'blancco_reports' %}active{% endif %}"
|
||||
href="{{ url_for('blancco_reports') }}">
|
||||
<i class="bi bi-shield-check"></i> Blancco Reports
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'hardware_page' %}active{% endif %}"
|
||||
href="{{ url_for('hardware_page') }}">
|
||||
<i class="bi bi-cpu"></i> Hardware Coverage
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'blancco_todo' %}active{% endif %}"
|
||||
href="{{ url_for('blancco_todo') }}">
|
||||
<i class="bi bi-clipboard-check"></i> Technician To-Do
|
||||
{% if blancco_todo.total %}<span class="badge badge-warning ms-1">{{ blancco_todo.total }}</span>{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'enrollment' %}active{% endif %}"
|
||||
href="{{ url_for('enrollment') }}">
|
||||
<i class="bi bi-pc-display"></i> Enrollment
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint == 'audit_log' %}active{% endif %}"
|
||||
href="{{ url_for('audit_log') }}">
|
||||
<i class="bi bi-list-check"></i> Audit Log
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="nav-section">Updates</div>
|
||||
<ul class="sidebar-nav nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint and request.endpoint.startswith('dell_updates.') %}active{% endif %}"
|
||||
href="{{ url_for('dell_updates.page') }}">
|
||||
<i class="bi bi-motherboard"></i> Dell Drivers and BIOS
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint and request.endpoint.startswith('ipxe.') %}active{% endif %}"
|
||||
href="{{ url_for('ipxe.page') }}">
|
||||
<i class="bi bi-shield-lock"></i> iPXE Boot Files
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.endpoint and request.endpoint.startswith('blancco_update.') %}active{% endif %}"
|
||||
href="{{ url_for('blancco_update.page') }}">
|
||||
<i class="bi bi-eraser"></i> Blancco Updates
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
{# Plain href: the page still renders if views.bprt_sync is not registered yet. #}
|
||||
<a class="nav-link {% if request.endpoint and request.endpoint.startswith('bprt_sync.') %}active{% endif %}"
|
||||
href="/updates/bprt/">
|
||||
<i class="bi bi-arrow-left-right"></i> BPRT Sync
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="nav-section">GE Aerospace Images</div>
|
||||
<ul class="sidebar-nav nav flex-column">
|
||||
{% for it in all_image_types if it.startswith('gea-') %}
|
||||
{# One entry per image; active on any of its tabs (see _image_header.html). #}
|
||||
{% set _on_image = image_type is defined and image_type == it
|
||||
and ((active_tab is defined and active_tab) or image_tab_for_endpoint(request.endpoint)) %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if _on_image %}active{% endif %}"
|
||||
href="{{ image_tab_url(it, 'overview') }}">
|
||||
<i class="bi bi-windows"></i> {{ all_friendly_names[it] }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<!-- Footer pinned to bottom -->
|
||||
<div class="sidebar-footer mt-auto">
|
||||
<button type="button" id="themeToggle" class="theme-toggle">
|
||||
<i class="bi bi-moon-stars" id="themeToggleIcon"></i>
|
||||
<span id="themeToggleLabel">Dark</span>
|
||||
<a class="skip-link" href="#main">Skip to content</a>
|
||||
{% set ep = request.endpoint or '' %}
|
||||
{% macro navlink(label, href, on, count=None) -%}
|
||||
<a class="ui-navlink" href="{{ href }}"{% if on %} aria-current="page"{% endif %}>{{ label }}{% if count %}<span class="count">{{ count }}<span class="vh"> open</span></span>{% endif %}</a>
|
||||
{%- endmacro %}
|
||||
<div class="ui-shell">
|
||||
<nav class="ui-side" id="uiSide" aria-label="Main">
|
||||
<div class="ui-brand">
|
||||
<div>
|
||||
<img class="logo" src="{{ url_for('static', filename='ge-aerospace-logo.svg') }}" alt="GE Aerospace">
|
||||
<div class="app">PXE Manager</div>
|
||||
<div class="host">{{ request.host.split(':')[0] }}</div>
|
||||
</div>
|
||||
<button type="button" class="ui-menu-btn" id="uiMenuBtn" aria-label="Open menu" aria-expanded="false" aria-controls="uiGroups">
|
||||
<i class="bi bi-list" aria-hidden="true" style="font-size: 20px"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ui-groups" id="uiGroups">
|
||||
<div class="ui-group">
|
||||
<div class="ui-navhead">Operate</div>
|
||||
{{ navlink('Overview', url_for('dashboard'), ep == 'dashboard') }}
|
||||
{{ navlink('Imaging floor', url_for('imaging_dashboard'), ep in ('imaging_dashboard', 'imaging_session_detail')) }}
|
||||
{{ navlink('Technician to-do', url_for('blancco_todo'), ep in ('blancco_todo', 'blancco_servicenow'), blancco_todo.total) }}
|
||||
{{ navlink('Blancco reports', url_for('blancco_reports'), ep in ('blancco_reports', 'blancco_view_report')) }}
|
||||
{{ navlink('Hardware coverage', url_for('hardware_page'), ep == 'hardware_page') }}
|
||||
</div>
|
||||
<div class="ui-group">
|
||||
<div class="ui-navhead">Images</div>
|
||||
{% for it in all_image_types if it.startswith('gea-') %}
|
||||
{# One entry per image; active on any of its tabs (see _image_header.html). #}
|
||||
{% set _on_image = image_type is defined and image_type == it
|
||||
and ((active_tab is defined and active_tab) or image_tab_for_endpoint(request.endpoint)) %}
|
||||
{{ navlink(all_friendly_names[it] | replace('GE Aerospace ', ''), image_tab_url(it, 'overview'), _on_image) }}
|
||||
{% endfor %}
|
||||
{{ navlink('All images and import', url_for('images_import'), ep == 'images_import') }}
|
||||
</div>
|
||||
<div class="ui-group">
|
||||
<div class="ui-navhead">Updates</div>
|
||||
{{ navlink('Dell drivers and BIOS', url_for('dell_updates.page'), ep.startswith('dell_updates.')) }}
|
||||
{{ navlink('iPXE boot files', url_for('ipxe.page'), ep.startswith('ipxe.')) }}
|
||||
{{ navlink('Blancco releases', url_for('blancco_update.page'), ep.startswith('blancco_update.')) }}
|
||||
{# Plain href: the page still renders if views.bprt_sync is not registered yet. #}
|
||||
{{ navlink('BPRT sync', '/updates/bprt/', ep.startswith('bprt_sync.')) }}
|
||||
</div>
|
||||
<div class="ui-group">
|
||||
<div class="ui-navhead">Tools</div>
|
||||
{{ navlink('Boot menu', url_for('startnet_editor'), ep in ('startnet_editor', 'shopfloor_menu')) }}
|
||||
{{ navlink('Enrollment packages', url_for('enrollment'), ep == 'enrollment') }}
|
||||
{{ navlink('Clonezilla backups', url_for('clonezilla_backups'), ep == 'clonezilla_backups') }}
|
||||
{{ navlink('Audit log', url_for('audit_log'), ep == 'audit_log') }}
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="themeToggle" class="ui-theme" aria-pressed="false">
|
||||
<i class="bi bi-moon-stars" id="themeToggleIcon" aria-hidden="true"></i>
|
||||
<span id="themeToggleLabel">Dark theme</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="main-content">
|
||||
<main class="ui-main main-content" id="main">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Dismiss"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
{% if blancco_todo.total and request.endpoint not in ('blancco_todo', 'imaging_tiles') %}
|
||||
<div class="alert alert-warning d-flex flex-wrap align-items-center gap-2 py-2" role="alert">
|
||||
<i class="bi bi-clipboard-check"></i>
|
||||
<strong>Technician to-do:</strong>
|
||||
{% set parts = [] %}
|
||||
{% if blancco_todo.servicenow %}{% set _ = parts.append(blancco_todo.servicenow ~ ' wipe' ~ ('s' if blancco_todo.servicenow != 1) ~ ' to tick in ServiceNow') %}{% endif %}
|
||||
{% if blancco_todo.evidence %}{% set _ = parts.append(blancco_todo.evidence ~ ' evidence pack' ~ ('s' if blancco_todo.evidence != 1) ~ ' to upload to Box') %}{% endif %}
|
||||
{% if blancco_todo.failed %}{% set _ = parts.append(blancco_todo.failed ~ ' failed wipe' ~ ('s' if blancco_todo.failed != 1) ~ ' needing a Certificate of Destruction') %}{% endif %}
|
||||
{% if blancco_todo.not_in_cloud %}{% set _ = parts.append(blancco_todo.not_in_cloud ~ ' report' ~ ('s' if blancco_todo.not_in_cloud != 1) ~ ' not in the Blancco cloud') %}{% endif %}
|
||||
{% if blancco_todo.hardware %}{% set _ = parts.append(blancco_todo.hardware ~ ' new model' ~ ('s' if blancco_todo.hardware != 1) ~ ' missing drivers/BIOS') %}{% endif %}
|
||||
<span>{{ parts | join(' | ') }}</span>
|
||||
<a href="{{ url_for('blancco_todo') }}" class="ms-auto pxe-btn pxe-btn-secondary btn-row-action">Open to-do</a>
|
||||
</div>
|
||||
{% if blancco_todo.total and ep not in ('blancco_todo', 'blancco_servicenow', 'imaging_tiles') %}
|
||||
{% set parts = [] %}
|
||||
{% if blancco_todo.servicenow %}{% set _ = parts.append(blancco_todo.servicenow ~ ' to tick in ServiceNow') %}{% endif %}
|
||||
{% if blancco_todo.failed %}{% set _ = parts.append(blancco_todo.failed ~ ' drive' ~ ('s' if blancco_todo.failed != 1) ~ ' to destroy') %}{% endif %}
|
||||
{% if blancco_todo.evidence %}{% set _ = parts.append(blancco_todo.evidence ~ ' evidence pack' ~ ('s' if blancco_todo.evidence != 1) ~ ' to upload') %}{% endif %}
|
||||
{% if blancco_todo.not_in_cloud %}{% set _ = parts.append(blancco_todo.not_in_cloud ~ ' not in the Blancco cloud') %}{% endif %}
|
||||
{% if blancco_todo.hardware %}{% set _ = parts.append(blancco_todo.hardware ~ ' hardware gap' ~ ('s' if blancco_todo.hardware != 1)) %}{% endif %}
|
||||
<a class="ui-todo" href="{{ url_for('blancco_todo') }}">
|
||||
<span class="chip c-neutral">To-do</span>
|
||||
<span class="trunc" style="flex: 1 1 auto"><strong>{{ blancco_todo.total }} open:</strong> <span class="muted">{{ parts | join(', ') }}</span></span>
|
||||
<span style="font-weight: 600; color: var(--accent); white-space: nowrap">Open to-do</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -198,11 +128,12 @@
|
||||
// Label/icon advertise the theme you would switch TO.
|
||||
if (theme === 'dark') {
|
||||
if (icon) icon.className = 'bi bi-sun';
|
||||
if (label) label.textContent = 'Light';
|
||||
if (label) label.textContent = 'Light theme';
|
||||
} else {
|
||||
if (icon) icon.className = 'bi bi-moon-stars';
|
||||
if (label) label.textContent = 'Dark';
|
||||
if (label) label.textContent = 'Dark theme';
|
||||
}
|
||||
if (btn) btn.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
|
||||
}
|
||||
|
||||
function apply(theme) {
|
||||
@@ -223,6 +154,19 @@
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Narrow screens: the sidebar collapses to a top bar with a menu button.
|
||||
(function () {
|
||||
var side = document.getElementById('uiSide');
|
||||
var btn = document.getElementById('uiMenuBtn');
|
||||
if (!side || !btn) return;
|
||||
btn.addEventListener('click', function () {
|
||||
var open = side.classList.toggle('open');
|
||||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||||
btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='qrcode.min.js') }}"></script>
|
||||
|
||||
Reference in New Issue
Block a user