Show the configured logo above the login and setup screens
Adds setup/login auth-logo elements that share applyLogo's existence check, so the brand image appears on the unauthenticated screens too when one is configured and quietly stays hidden otherwise. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
82782c4f92
commit
5713d6dbc9
|
|
@ -166,7 +166,9 @@
|
||||||
.muted { color: var(--text-muted); }
|
.muted { color: var(--text-muted); }
|
||||||
|
|
||||||
/* Login/Setup center view */
|
/* Login/Setup center view */
|
||||||
.center { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
|
.center { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
|
||||||
|
justify-content: center; padding: 1.5rem; gap: 1.5rem; }
|
||||||
|
.auth-logo { max-width: 240px; max-height: 80px; object-fit: contain; display: block; }
|
||||||
.auth-card { width: 100%; max-width: 420px; }
|
.auth-card { width: 100%; max-width: 420px; }
|
||||||
.auth-card h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
|
.auth-card h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
|
||||||
.auth-card p.small { margin: 0 0 1.25rem; }
|
.auth-card p.small { margin: 0 0 1.25rem; }
|
||||||
|
|
@ -215,6 +217,7 @@
|
||||||
|
|
||||||
<!-- SETUP VIEW -->
|
<!-- SETUP VIEW -->
|
||||||
<div id="view-setup" class="center" style="display:none">
|
<div id="view-setup" class="center" style="display:none">
|
||||||
|
<img id="setupLogo" class="auth-logo" alt="" style="display:none" />
|
||||||
<div class="card auth-card">
|
<div class="card auth-card">
|
||||||
<h2>Willkommen 👋</h2>
|
<h2>Willkommen 👋</h2>
|
||||||
<p class="small">Lege den ersten Admin-Account an. Dieser kann später weitere Benutzer verwalten.</p>
|
<p class="small">Lege den ersten Admin-Account an. Dieser kann später weitere Benutzer verwalten.</p>
|
||||||
|
|
@ -231,6 +234,7 @@
|
||||||
|
|
||||||
<!-- LOGIN VIEW -->
|
<!-- LOGIN VIEW -->
|
||||||
<div id="view-login" class="center" style="display:none">
|
<div id="view-login" class="center" style="display:none">
|
||||||
|
<img id="loginLogo" class="auth-logo" alt="" style="display:none" />
|
||||||
<div class="card auth-card">
|
<div class="card auth-card">
|
||||||
<h2>Login</h2>
|
<h2>Login</h2>
|
||||||
<p class="small">Melde dich mit deinem Account an.</p>
|
<p class="small">Melde dich mit deinem Account an.</p>
|
||||||
|
|
@ -542,11 +546,20 @@ function applySizeStyle(el, w, h) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function applyLogo(width, height) {
|
async function applyLogo(width, height) {
|
||||||
const img = document.getElementById('navLogo');
|
const navImg = document.getElementById('navLogo');
|
||||||
|
const setupImg = document.getElementById('setupLogo');
|
||||||
|
const loginImg = document.getElementById('loginLogo');
|
||||||
const src = '/logo?t=' + Date.now();
|
const src = '/logo?t=' + Date.now();
|
||||||
const r = await fetch(src, { method: 'HEAD' });
|
const r = await fetch(src, { method: 'HEAD' });
|
||||||
if (r.ok) { img.src = src; img.style.display = ''; applySizeStyle(img, width, height); }
|
if (r.ok) {
|
||||||
else img.style.display = 'none';
|
navImg.src = src; navImg.style.display = ''; applySizeStyle(navImg, width, height);
|
||||||
|
if (setupImg) { setupImg.src = src; setupImg.style.display = ''; }
|
||||||
|
if (loginImg) { loginImg.src = src; loginImg.style.display = ''; }
|
||||||
|
} else {
|
||||||
|
navImg.style.display = 'none';
|
||||||
|
if (setupImg) setupImg.style.display = 'none';
|
||||||
|
if (loginImg) loginImg.style.display = 'none';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function measureNatural() {
|
function measureNatural() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue