Fix CSS hidden specificity and add premium header user badge

2026-05-22 00:29:03 +02:00
parent 205cb1d948
commit 47d73a466b
7 changed files with 37 additions and 6 deletions
--- a/Brain.md
+++ b/Brain.md
@@ -193,3 +193,7 @@ volumes:
  - **Service Worker API-Bypass & PWA Update:** Der Service-Worker (`sw.js`) ignoriert und reicht nun alle API-Anfragen unter `/api/` (z.B. `/api/favorites`, `/api/status`) direkt an das Netzwerk durch, anstatt sie lokal zu cachen. Dadurch werden neu angelegte Favoriten beim einfachen Navigieren auf das Dashboard sofort und ohne manuelles Strg+F5-Neuladen geladen.
  - **Automatisches SSO-Login im Admin Panel:** `/admin.html` prüft nun beim Laden, ob bereits eine aktive Sitzung vorliegt. Falls nicht und kein Fehler vorliegt, wird der Benutzer automatisch an den Keycloak SSO Login (`login()`) weitergeleitet. Dadurch entfällt der zusätzliche Anmelde-Klick komplett. Zum Schutz vor unendlichen Weiterleitungsschleifen nach einer Abmeldung wurde eine temporäre Logout-Erkennung via `sessionStorage` implementiert. Der Cache-Buster für `admin.js` wurde in `admin.html` auf `v=29` erhöht.
  - **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` und `app.js` wurden in `index.html` auf `v=33` bzw. `v=40` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v26` erhöht und die App-Shell-Liste entsprechend angepasst, um ein sofortiges Update der App bei allen Nutzern ohne manuelles Cache-Leeren zu garantieren.
+- **Header User Badge & Fix CSS Specificity (Stand: 2026-05-22):**
+  - **Behebung des CSS-Spezifitätskonflikts:** Ein globaler CSS-Reset `[hidden] { display: none !important; }` wurde am Anfang von `style.css` hinzugefügt. Zuvor hat die Spezifität von `.ghost-button { display: inline-flex; }` die Standard-Browserregel für das `hidden`-Attribut überschrieben, was dazu führte, dass sowohl der Login- als auch der Logout-Button fälschlicherweise gleichzeitig dauerhaft angezeigt wurden.
+  - **Premium Header-User-Badge:** In der Kopfzeile von `admin.html` wurde ein neues Element `<span class="admin-user-badge" id="headerUserBadge" hidden></span>` implementiert, welches bei einer erfolgreichen Authentifizierung in `admin.js` mit dem Text `"Angemeldet als [Nutzername]"` befüllt und stilvoll eingeblendet wird. Der Badge wurde mit einem eleganten Glassmorphismus, dezenter Randlinie und einem 👤-Emoji modern und hochwertig designt.
+  - **Cache-Buster & PWA Cache Update:** Die Cache-Busting-Parameter für `style.css` wurden in `index.html`, `admin.html` und `favorites.html` auf `v=34` hochgestuft. Im Service-Worker (`sw.js`) wurde der Cache-Name auf `mischlabs-pwa-v27` erhöht, um ein sofortiges Update der App-Shell im Browser aller Anwender zu erzwingen. In `admin.html` wurde der Script-Buster von `admin.js` auf `v=30` erhöht.
--- a/admin.html
+++ b/admin.html
@@ -12,7 +12,7 @@
    <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
-    <link rel="stylesheet" href="/style.css?v=30">
+    <link rel="stylesheet" href="/style.css?v=34">
 </head>
 <body>
    <header class="shell hero admin-hero">
@@ -29,6 +29,7 @@
            <a class="ghost-button" id="headerDashboardBtn" href="/">Dashboard</a>
            <button class="ghost-button" id="loginButton" type="button">Mit Keycloak anmelden</button>
            <button class="ghost-button" id="logoutButton" type="button" hidden>Abmelden</button>
+            <span class="admin-user-badge" id="headerUserBadge" hidden></span>
            <button class="hamburger-menu-btn" id="hamburgerMenuBtn" aria-label="Menü öffnen" type="button" style="display: none;">
                <span class="hamburger-bar"></span>
                <span class="hamburger-bar"></span>
@@ -241,6 +242,6 @@
        </div>
    </div>

-    <script src="/admin.js?v=29" defer></script>
+    <script src="/admin.js?v=30" defer></script>
 </body>
 </html>
--- a/admin.js
+++ b/admin.js
@@ -10,6 +10,7 @@ const PKCE_KEY = 'mischlabs.admin.pkce';

 const loginButton = document.querySelector('#loginButton');
 const logoutButton = document.querySelector('#logoutButton');
+const headerUserBadge = document.querySelector('#headerUserBadge');
 const loginPanel = document.querySelector('#loginPanel');
 const adminPanel = document.querySelector('#adminPanel');
 const loginMessage = document.querySelector('#loginMessage');
@@ -1196,6 +1197,7 @@ async function boot() {
    adminPanel.hidden = true;
    loginButton.hidden = false;
    logoutButton.hidden = true;
+    if (headerUserBadge) headerUserBadge.hidden = true;
    const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
    if (hamburgerBtn) hamburgerBtn.style.display = 'none';
    return;
@@ -1212,6 +1214,7 @@ async function boot() {
      adminPanel.hidden = true;
      loginButton.hidden = false;
      logoutButton.hidden = true;
+      if (headerUserBadge) headerUserBadge.hidden = true;
      const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
      if (hamburgerBtn) hamburgerBtn.style.display = 'none';
      return;
@@ -1234,6 +1237,10 @@ async function boot() {
  if (headerDashboardBtn) headerDashboardBtn.style.display = 'none';
  loginButton.hidden = true;
  logoutButton.hidden = true;
+  if (headerUserBadge) {
+    headerUserBadge.hidden = false;
+    headerUserBadge.innerHTML = `<span style="opacity: 0.76;">👤</span> Angemeldet als <strong style="color: #67e8f9; font-weight: 600; margin-left: 2px;">${claims.preferred_username || claims.email}</strong>`;
+  }

  const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
  if (hamburgerBtn) hamburgerBtn.style.display = 'flex';
--- a/favorites.html
+++ b/favorites.html
@@ -12,7 +12,7 @@
    <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
-    <link rel="stylesheet" href="/style.css?v=30">
+    <link rel="stylesheet" href="/style.css?v=34">
 </head>
 <body>
    <header class="shell hero admin-hero">
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
    <link rel="icon" type="image/png" sizes="48x48" href="/icons/favicon-48-v4.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-v4.png">
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon-v4.png">
-    <link rel="stylesheet" href="style.css?v=33">
+    <link rel="stylesheet" href="style.css?v=34">
 </head>
 <body>
    <header class="shell hero">
--- a/style.css
+++ b/style.css
@@ -8,6 +8,10 @@
    margin: 0;
 }

+[hidden] {
+    display: none !important;
+}
+
 :root {
    color-scheme: dark;
    --bg: #070914;
@@ -723,6 +727,21 @@ main {
    align-items: center;
 }

+.admin-user-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 42px;
+    padding: 0 18px;
+    color: var(--muted);
+    font-size: 0.92rem;
+    background: rgba(17, 22, 36, 0.45);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    gap: 8px;
+    font-weight: 500;
+}
+
 .ghost-button {
    display: inline-flex;
    align-items: center;
--- a/sw.js
+++ b/sw.js
@@ -1,10 +1,10 @@
-const CACHE_NAME = 'mischlabs-pwa-v26';
+const CACHE_NAME = 'mischlabs-pwa-v27';
 const APP_SHELL = [
  '/',
  '/index.html',
  '/favorites.html',
  '/offline.html',
-  '/style.css?v=33',
+  '/style.css?v=34',
  '/auth.js?v=2',
  '/app.js?v=40',
  '/favorites.js?v=1',