MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CSS hidden specificity and add premium header user badge
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-22 00:29:03 +02:00
parent 205cb1d948
commit 47d73a466b
7 changed files with 37 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Brain.md
View File

@@ -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. - **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. - **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. - **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.

5
admin.html
View File

@@ -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="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-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="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> </head>
<body> <body>
<header class="shell hero admin-hero"> <header class="shell hero admin-hero">
@@ -29,6 +29,7 @@
<a class="ghost-button" id="headerDashboardBtn" href="/">Dashboard</a> <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="loginButton" type="button">Mit Keycloak anmelden</button>
<button class="ghost-button" id="logoutButton" type="button" hidden>Abmelden</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;"> <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>
<span class="hamburger-bar"></span> <span class="hamburger-bar"></span>
@@ -241,6 +242,6 @@
</div> </div>
</div> </div>
<script src="/admin.js?v=29" defer></script> <script src="/admin.js?v=30" defer></script>
</body> </body>
</html> </html>

7
admin.js
View File

@@ -10,6 +10,7 @@ const PKCE_KEY = 'mischlabs.admin.pkce';
const loginButton = document.querySelector('#loginButton'); const loginButton = document.querySelector('#loginButton');
const logoutButton = document.querySelector('#logoutButton'); const logoutButton = document.querySelector('#logoutButton');
const headerUserBadge = document.querySelector('#headerUserBadge');
const loginPanel = document.querySelector('#loginPanel'); const loginPanel = document.querySelector('#loginPanel');
const adminPanel = document.querySelector('#adminPanel'); const adminPanel = document.querySelector('#adminPanel');
const loginMessage = document.querySelector('#loginMessage'); const loginMessage = document.querySelector('#loginMessage');
@@ -1196,6 +1197,7 @@ async function boot() {
adminPanel.hidden = true; adminPanel.hidden = true;
loginButton.hidden = false; loginButton.hidden = false;
logoutButton.hidden = true; logoutButton.hidden = true;
if (headerUserBadge) headerUserBadge.hidden = true;
const hamburgerBtn = document.getElementById('hamburgerMenuBtn'); const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
if (hamburgerBtn) hamburgerBtn.style.display = 'none'; if (hamburgerBtn) hamburgerBtn.style.display = 'none';
return; return;
@@ -1212,6 +1214,7 @@ async function boot() {
adminPanel.hidden = true; adminPanel.hidden = true;
loginButton.hidden = false; loginButton.hidden = false;
logoutButton.hidden = true; logoutButton.hidden = true;
if (headerUserBadge) headerUserBadge.hidden = true;
const hamburgerBtn = document.getElementById('hamburgerMenuBtn'); const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
if (hamburgerBtn) hamburgerBtn.style.display = 'none'; if (hamburgerBtn) hamburgerBtn.style.display = 'none';
return; return;
@@ -1234,6 +1237,10 @@ async function boot() {
if (headerDashboardBtn) headerDashboardBtn.style.display = 'none'; if (headerDashboardBtn) headerDashboardBtn.style.display = 'none';
loginButton.hidden = true; loginButton.hidden = true;
logoutButton.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'); const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
if (hamburgerBtn) hamburgerBtn.style.display = 'flex'; if (hamburgerBtn) hamburgerBtn.style.display = 'flex';

2
favorites.html
View File

@@ -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="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-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="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> </head>
<body> <body>
<header class="shell hero admin-hero"> <header class="shell hero admin-hero">

2
index.html
View File

@@ -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="48x48" href="/icons/favicon-48-v4.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192-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="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> </head>
<body> <body>
<header class="shell hero"> <header class="shell hero">

19
style.css
View File

@@ -8,6 +8,10 @@
margin: 0; margin: 0;
} }
[hidden] {
display: none !important;
}
:root { :root {
color-scheme: dark; color-scheme: dark;
--bg: #070914; --bg: #070914;
@@ -723,6 +727,21 @@ main {
align-items: center; 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 { .ghost-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

4
sw.js
View File

@@ -1,10 +1,10 @@
const CACHE_NAME = 'mischlabs-pwa-v26'; const CACHE_NAME = 'mischlabs-pwa-v27';
const APP_SHELL = [ const APP_SHELL = [
'/', '/',
'/index.html', '/index.html',
'/favorites.html', '/favorites.html',
'/offline.html', '/offline.html',
'/style.css?v=33', '/style.css?v=34',
'/auth.js?v=2', '/auth.js?v=2',
'/app.js?v=40', '/app.js?v=40',
'/favorites.js?v=1', '/favorites.js?v=1',