Thomas Stallinger
06ba70d970
Nutzer-Feedback (01.09.2026, echter Hardware-Test): - "Wenn man ein Installationsmedium erstellt... wird relativ weit oben die Erstellungsinfo sichtbar. Aber etwas unscheinbar. Vielleicht kann man das leicht farbig hinterlegen" - neue .highlight-box-Klasse (farbiger linker Rand + Picos eigene Sectioning-Hintergrundfarbe, Dark/Light-Mode- sicher da nur Pico-CSS-Variablen) auf der "Aktuelles Installationsmedium" Sektion. - "Bitte nach ISO-Build auch die Größe anzeigen lassen" - zeigt iso_build.size_bytes (neu von provisioning-server geliefert, siehe dortiger Commit fb87a23) über Jinjas eingebauten filesizeformat-Filter an.
105 lines
5.2 KiB
HTML
105 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}Tuxflotte{% endblock %}</title>
|
|
<link rel="stylesheet" href="/static/pico.min.css">
|
|
<style>
|
|
.state-present { color: var(--pico-ins-color); font-weight: 600; }
|
|
.state-absent { color: var(--pico-muted-color); }
|
|
.optionen label { font-weight: normal; }
|
|
td form { margin-bottom: 0; }
|
|
.brand-logo { height: 2.2rem; vertical-align: middle; margin-right: 0.5rem; }
|
|
/* Nutzer-Feedback (01.09.2026): die Erstellungsinfo auf
|
|
/installationsmedium ("Aktuelles Installationsmedium") stand relativ
|
|
weit oben, war aber "etwas unscheinbar" - nach dem Absenden des
|
|
Erstellen-Formulars weiter unten fiel die aktualisierte Info oben
|
|
kaum auf. Farbiger linker Rand + Pico-eigene Sectioning-Hintergrund-
|
|
farbe statt eigener Farbwerte, damit Dark/Light-Mode automatisch
|
|
erhalten bleibt.
|
|
*/
|
|
.highlight-box {
|
|
border-left: 4px solid var(--pico-primary);
|
|
background: var(--pico-card-sectioning-background-color);
|
|
padding: 1rem 1.25rem;
|
|
border-radius: var(--pico-border-radius);
|
|
}
|
|
|
|
/* Nav-Umbau 26.08.2026 (siehe ADR "Produktname und Navigationsstruktur"):
|
|
vertikale Primär-Nav links, Hauptbereich rechts. Pico bringt kein
|
|
Sidebar-Pattern mit, daher dieses schlanke Flex-Layout - nutzt
|
|
weiterhin Picos CSS-Variablen, damit Dark/Light-Mode automatisch
|
|
erhalten bleibt (kein eigenes Farbschema hier definiert). */
|
|
.app-layout { display: flex; align-items: flex-start; gap: 2rem; }
|
|
.primary-nav { flex: 0 0 12rem; }
|
|
.primary-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.primary-nav a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--pico-border-radius); text-decoration: none; }
|
|
.primary-nav a.active { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
|
|
.app-main { flex: 1 1 auto; min-width: 0; }
|
|
.sekundaer-nav ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 0 0 1rem 0; }
|
|
.sekundaer-nav a.active { font-weight: 700; text-decoration: underline; }
|
|
@media (max-width: 768px) {
|
|
.app-layout { flex-direction: column; }
|
|
.primary-nav { flex: 1 1 auto; }
|
|
.primary-nav ul { flex-direction: row; flex-wrap: wrap; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{% set pfad = request.url.path %}
|
|
{% set aktiver_bereich =
|
|
"flotte" if pfad.startswith("/geraete")
|
|
else "organisation" if (pfad.startswith("/organisation") or pfad.startswith("/struktur") or pfad.startswith("/gruppen"))
|
|
else "installationsmedium" if pfad.startswith("/installationsmedium")
|
|
else "admin" if pfad.startswith("/admin")
|
|
else "" %}
|
|
{% set aktive_unterseite =
|
|
"organisation" if pfad.startswith("/organisation")
|
|
else "struktur" if pfad.startswith("/struktur")
|
|
else "gruppen" if pfad.startswith("/gruppen")
|
|
else "" %}
|
|
<header class="container">
|
|
<nav>
|
|
<ul><li><strong><a href="/geraete"><img src="/static/tuxflotte-logo.svg" alt="Tuxflotte" class="brand-logo">Flotten-Management</a></strong></li></ul>
|
|
{% if user %}
|
|
<ul>
|
|
<li>{{ user.email }}</li>
|
|
<li><a href="/logout" role="button" class="secondary outline">Abmelden</a></li>
|
|
</ul>
|
|
{% endif %}
|
|
</nav>
|
|
</header>
|
|
{% if user %}
|
|
<div class="container app-layout">
|
|
<nav class="primary-nav" aria-label="Hauptnavigation">
|
|
<ul>
|
|
<li><a href="/geraete" {% if aktiver_bereich == "flotte" %}class="active"{% endif %}>Flotte</a></li>
|
|
<li><a href="/organisation" {% if aktiver_bereich == "organisation" %}class="active"{% endif %}>Organisation</a></li>
|
|
<li><a href="/installationsmedium" {% if aktiver_bereich == "installationsmedium" %}class="active"{% endif %}>Installationsmedium</a></li>
|
|
{% if user.is_superuser %}<li><a href="/admin/technik" {% if aktiver_bereich == "admin" %}class="active"{% endif %}>Admin</a></li>{% endif %}
|
|
</ul>
|
|
</nav>
|
|
<main class="app-main">
|
|
{% if aktiver_bereich == "organisation" %}
|
|
<nav class="sekundaer-nav" aria-label="Organisation-Unterseiten">
|
|
<ul>
|
|
<li><a href="/organisation" {% if aktive_unterseite == "organisation" %}class="active"{% endif %}>Stammdaten/Konten</a></li>
|
|
<li><a href="/struktur" {% if aktive_unterseite == "struktur" %}class="active"{% endif %}>Struktur</a></li>
|
|
<li><a href="/gruppen" {% if aktive_unterseite == "gruppen" %}class="active"{% endif %}>Gruppen</a></li>
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
{% else %}
|
|
<main class="container">
|
|
{% endif %}
|
|
{% block content %}{% endblock %}
|
|
{% if user %}
|
|
</main>
|
|
</div>
|
|
{% else %}
|
|
</main>
|
|
{% endif %}
|
|
</body>
|
|
</html>
|