P0: x-cloak aktiv + Emojis durch Inline-SVG-Icons ersetzt

- base.html: [x-cloak]-CSS gegen Alpine-Flackern
- Neues zentrales Icon-Makro-Template (icons.html, Heroicons-Stil,
  currentColor, aria-hidden)
- Logo-Würfelbecher, Sync-Pfeile, Sortier-Chevrons, Warn-/Check-Icons,
  dedup-Karten (Gebäude/Tag/Buch/Dokument), Cover-Platzhalter als SVG
- Cover-Platzhalter: 'Kein Cover'-Text in Großansicht, Mindestgröße
  48x68 px in der Kartenansicht
This commit is contained in:
Flo Hartmann
2026-08-26 08:33:37 +00:00
parent 929cea1887
commit e1ef7ba926
13 changed files with 181 additions and 49 deletions

View File

@@ -7,11 +7,14 @@
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
<style>[x-cloak] { display: none !important; }</style>
</head>
<body class="bg-slate-100 text-slate-800 min-h-screen flex flex-col">
<header class="bg-white border-b border-slate-200" x-data="{ menue: false }">
<nav class="max-w-6xl mx-auto px-4 py-2 md:py-3 flex items-center gap-5" aria-label="Hauptnavigation">
<a href="/" class="font-bold text-emerald-700 whitespace-nowrap">&#127923; {{ app_name }}</a>
<a href="/" class="font-bold text-emerald-700 whitespace-nowrap inline-flex items-center gap-1.5">
{% from "icons.html" import icon_wuerfelbecher %}{{ icon_wuerfelbecher("h-5 w-5") }} {{ app_name }}
</a>
<!-- Desktop: horizontale Navigationsleiste -->
<span class="hidden md:flex items-center gap-5 flex-1">
{% for eintrag in plugin_nav %}
@@ -35,7 +38,8 @@
{% if user %}
<button type="button" @click="offen = !offen"
class="text-sm font-medium px-2 py-1 rounded hover:bg-slate-100 inline-flex items-center min-h-[44px] md:min-h-0">
{{ user.display_name }} &#9662;
{{ user.display_name }}
{% from "icons.html" import icon_chevron_unten %}{{ icon_chevron_unten("h-3.5 w-3.5") }}
</button>
<div x-show="offen" x-cloak @click.outside="offen = false"
class="absolute right-0 mt-2 w-56 bg-white border border-slate-200 rounded-lg shadow-lg p-3 text-sm z-10">