rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Layout: JETZT/HUND/WELT Nav nach unten, Info-Karte höher

Browse source 
- #world-dots: ausgeblendet auf Mobile (Labels dienen als Tab-Indikator)
- #world-labels: von top→bottom (safe-area+20px), pill-Style für active
  right:80px damit FAB nicht überlappt, backdrop-blur auf active label
- .world-panel top-padding: 58→32px (Info-Karte startet weiter oben)
- Desktop @media 768px: Nav bleibt oben (dots+labels wie vorher)
- components.css ?v=1003, SW by-v1004, APP_VER 1004
This commit is contained in:
rene 2026-05-16 08:53:14 +02:00
parent d03e49800d
commit d6eb2bcf98
5 changed files with 35 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

66
backend/static/css/components.css
View file

@ -7876,58 +7876,53 @@ svg.empty-state-icon {
}
#wp-welt { overflow: hidden; position: relative; }
/* Navigation-Punkte */
/* Navigation-Punkte — auf Mobile ausgeblendet, Labels übernehmen */
#world-dots {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 14px);
left: 0; right: 0;
display: flex;
justify-content: center;
gap: 5px;
z-index: 60;
pointer-events: none;
}
.wdot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-text);
opacity: 0.2;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
}
.wdot.active {
width: 22px;
border-radius: 3px;
opacity: 1;
background: var(--c-primary);
display: none;
}
/* Welt-Labels */
/* Welt-Labels — jetzt unten als Tab-Bar */
#world-labels {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 28px);
left: 0; right: 0;
bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
top: auto;
left: 0; right: 80px; /* Platz für FAB rechts */
display: flex;
justify-content: center;
gap: 28px;
gap: 8px;
z-index: 59;
pointer-events: none;
}
.wlabel {
font-size: 9px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
letter-spacing: 0.1em;
color: white;
opacity: 0.4;
opacity: 0.45;
text-transform: uppercase;
transition: opacity 0.18s;
transition: opacity 0.18s, background 0.18s;
padding: 6px 16px;
border-radius: 20px;
}
.wlabel.active {
opacity: 1;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.wlabel.active { opacity: 1; }
@media (min-width: 768px) {
/* Desktop: Nav wieder oben, Dots wieder sichtbar */
#world-dots {
display: flex;
top: calc(env(safe-area-inset-top, 0px) + 14px);
bottom: auto;
}
#world-labels {
bottom: auto;
top: calc(env(safe-area-inset-top, 0px) + 28px);
right: 0;
gap: 40px;
top: calc(env(safe-area-inset-top, 0px) + 18px);
}
.wlabel {
font-size: 13px;
@ -7936,7 +7931,6 @@ svg.empty-state-icon {
padding: 6px 14px;
border-radius: 20px;
text-shadow: 0 1px 6px rgba(0,0,0,0.7);
transition: opacity 0.18s, background 0.18s;
}
.wlabel:hover {
opacity: 0.85;
@ -7946,6 +7940,8 @@ svg.empty-state-icon {
opacity: 1;
background: rgba(255, 255, 255, 0.18);
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
@ -8041,7 +8037,7 @@ svg.empty-state-icon {
display: flex;
flex-direction: column;
justify-content: space-between; /* Info oben, Chips unten */
padding: calc(env(safe-area-inset-top, 0px) + 58px) 14px
padding: calc(env(safe-area-inset-top, 0px) + 32px) 14px
calc(env(safe-area-inset-bottom, 0px) + 76px);
overflow-y: auto;
overflow-x: hidden;