danielkrause/BSN-Chatsystem
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile-Layout-Fixes: Header-Wrapping + Overlay-Click-Through verhindern

Browse Source 
- .site-header: flex-wrap:wrap, kleinere padding/gap, mobile optimiert
- .site-logo-sub: white-space:nowrap entfernt → bricht bei schmalen Screens um
- Overlay-Backdrop z-index auf 10000 (über Bubbles mit 9999)
- Overlays z-index auf 10001 (über Backdrop)
- Bubbles werden via .hidden-Klasse versteckt wenn Overlay offen
- chat-bubble/submit-bubble: opacity/pointer-events Transition
This commit is contained in:
Hermes Agent
2026-06-19 20:11:00 +02:00
parent 4d55bc1b13
commit b458bfd5d4
1 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+30 -11
View File
@@ -2895,12 +2895,12 @@ def public_frontend():
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#E8E4DC; color:#1a1a2e; min-height:100vh; }
/* Header — dark bar like SPIEL Essen */
.site-header { background:#20228a; padding:1rem 2rem; display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,0.15); }
.site-logo { display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:#fff; }
.site-logo .logo-icon { width:40px; height:40px; background:#20228a; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.site-logo .logo-text { font-weight:800; font-size:1.15rem; letter-spacing:-0.01em; color:#fff; }
.site-header { background:#20228a; padding:0.75rem 1.2rem; display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,0.15); }
.site-logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:#fff; min-width:0; flex-shrink:1; }
.site-logo .logo-icon { width:36px; height:36px; background:#20228a; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.site-logo .logo-text { font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; color:#fff; white-space:nowrap; }
.site-logo .logo-sub { font-weight:400; color:#888; font-size:0.75rem; }
.site-logo-sub { font-size:0.7rem; font-weight:500; color:rgba(255,255,255,0.7); letter-spacing:0.03em; margin-left:0.5rem; white-space:nowrap; }
.site-logo-sub { font-size:0.68rem; font-weight:500; color:rgba(255,255,255,0.7); letter-spacing:0.03em; margin-left:0.3rem; white-space:normal; word-break:break-word; }
.site-header .header-right { margin-left:auto; }
.site-header .header-right a { color:#aaa; text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
.site-header .header-right a:hover { color:#fff; }
@@ -3022,7 +3022,10 @@ def public_frontend():
@media(max-width:500px) {
.main-grid { column-count:1; padding:0 0.8rem; }
.story-card { margin-bottom:1rem; }
.site-header { padding:0.8rem 1rem; }
.site-header { padding:0.6rem 0.8rem; gap:0.4rem; }
.site-logo-sub { font-size:0.62rem; }
.header-right { display:flex; align-items:center; gap:0.3rem; }
.header-right a { font-size:0.7rem !important; }
.submit-bubble { bottom:1rem; right:5rem; }
.chat-overlay { bottom:5rem; right:0.5rem; width:calc(100vw - 1rem); max-height:60vh; }
.chat-bubble { bottom:1rem; right:1rem; }
@@ -3031,19 +3034,20 @@ def public_frontend():
.chat-bubble { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
width:56px; height:56px; border-radius:50%; background:#20228a;
color:#fff; border:none; cursor:pointer; font-size:1.6rem;
box-shadow:0 6px 24px rgba(0,0,0,0.25); transition:transform 0.2s,box-shadow 0.2s;
box-shadow:0 6px 24px rgba(0,0,0,0.25); transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s;
display:flex; align-items:center; justify-content:center; }
.chat-bubble.hidden { opacity:0; pointer-events:none; }
.chat-bubble:hover { transform:scale(1.08); box-shadow:0 8px 32px rgba(0,0,0,0.35); }
.chat-bubble:active { transform:scale(0.95); }
.chat-bubble .bubble-dot { position:absolute; top:6px; right:6px; width:12px; height:12px;
background:#28a745; border-radius:50%; border:2px solid #fff; }
.chat-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:9998;
.chat-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:10001;
width:380px; max-width:calc(100vw - 2rem); max-height:520px;
background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.22);
display:none; flex-direction:column; overflow:hidden; }
.chat-overlay.open { display:flex; }
.chat-backdrop { position:fixed; inset:0; z-index:9997; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; }
.chat-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; }
.chat-backdrop.open { display:block; }
.chat-header { background:#20228a; color:#fff; padding:0.9rem 1.2rem;
font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; }
@@ -3075,12 +3079,13 @@ def public_frontend():
.submit-bubble { position:fixed; bottom:1.5rem; right:5.5rem; z-index:9999;
width:56px; height:56px; border-radius:50%; background:#20228a;
color:#fff; border:none; cursor:pointer; font-size:1.8rem; font-weight:300; line-height:1;
box-shadow:0 6px 24px rgba(0,0,0,0.25); transition:transform 0.2s,box-shadow 0.2s;
box-shadow:0 6px 24px rgba(0,0,0,0.25); transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s;
display:flex; align-items:center; justify-content:center; }
.submit-bubble.hidden { opacity:0; pointer-events:none; }
.submit-bubble:hover { transform:scale(1.08); box-shadow:0 8px 32px rgba(0,0,0,0.35); }
.submit-bubble:active { transform:scale(0.95); }
.submit-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:9998;
.submit-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:10001;
width:400px; max-width:calc(100vw - 2rem); max-height:85vh;
background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.22);
display:none; flex-direction:column; overflow:hidden; }
@@ -3257,6 +3262,7 @@ def public_frontend():
const sClose = document.getElementById('submitClose');
const sSend = document.getElementById('submitSend');
const sStatus = document.getElementById('submitStatus');
const chatBubble = document.getElementById('chatBubble');
let sOpen = false;
const sBackdrop = document.getElementById('chatBackdrop');
@@ -3265,6 +3271,9 @@ def public_frontend():
sOpen = !sOpen;
sOverlay.classList.toggle('open', sOpen);
if (sBackdrop) sBackdrop.classList.toggle('open', sOpen);
// Bubbles verstecken wenn Overlay offen
if (sBubble) sBubble.classList.toggle('hidden', sOpen);
if (chatBubble) chatBubble.classList.toggle('hidden', sOpen);
const chatO = document.getElementById('chatOverlay');
if (chatO) chatO.classList.remove('open');
});
@@ -3272,6 +3281,8 @@ def public_frontend():
sOpen = false;
sOverlay.classList.remove('open');
if (sBackdrop) sBackdrop.classList.remove('open');
if (sBubble) sBubble.classList.remove('hidden');
if (chatBubble) chatBubble.classList.remove('hidden');
});
sSend.addEventListener('click', async () => {
@@ -3441,11 +3452,15 @@ def public_frontend():
let open = false;
const backdrop = document.getElementById('chatBackdrop');
const sBubble = document.getElementById('submitBubble');
function toggle() {
open = !open;
overlay.classList.toggle('open', open);
if (backdrop) backdrop.classList.toggle('open', open);
// Bubbles verstecken wenn Overlay offen, damit man nicht versehentlich darunter klickt
if (bubble) bubble.classList.toggle('hidden', open);
if (sBubble) sBubble.classList.toggle('hidden', open);
if (open) setTimeout(() => input.focus(), 100);
}
@@ -3454,6 +3469,8 @@ def public_frontend():
open = false;
overlay.classList.remove('open');
if (backdrop) backdrop.classList.remove('open');
if (bubble) bubble.classList.remove('hidden');
if (sBubble) sBubble.classList.remove('hidden');
});
// Click backdrop to close either overlay
@@ -3462,6 +3479,8 @@ def public_frontend():
open = false;
overlay.classList.remove('open');
backdrop.classList.remove('open');
if (bubble) bubble.classList.remove('hidden');
if (sBubble) sBubble.classList.remove('hidden');
// Also close submit overlay if open
const sO = document.getElementById('submitOverlay');
if (sO) { sO.classList.remove('open'); }