Thomas Stallinger
fc03a3c3a9
Siehe ADR-0020 (platform-docs) für die vollständige Begründung. - base.html: Nav-Marke 'Kundenplattform' -> 'Flotten-Management'. Navigation von flacher horizontaler Liste auf vertikale Primär-Spalte (Flotte/Organisation/Installationsmedium/Admin) + horizontale Sekundär-Nav umgestellt. Struktur und Gruppen sind jetzt Unterpunkte von Organisation. Aktive Kategorie wird aus dem URL-Pfad abgeleitet, keine Router-Änderungen nötig, URLs unverändert. - app.py: FastAPI-Titel ebenfalls angepasst (aktuell dormant, da /docs deaktiviert). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
91 lines
4.5 KiB
HTML
91 lines
4.5 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; }
|
|
|
|
/* 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>
|