Experiment: Chip-Layout unten — Hintergrundbild bekommt mehr Raum

- Section-Labels entfernt ('Deine Bereiche', 'Alles über X', 'Die Welt da draußen')
- Chip-Grid: Höhe 80→74px, Gap 8→7px
- world-bottom gap 8→5px
- Footer-Links: Padding reduziert, Schrift 11→10px
- CSS-Version ?v=1001 für immutable-Cache-Busting
- SW by-v1002, APP_VER 1002
This commit is contained in:
rene 2026-05-15 21:18:44 +02:00
parent f962cf2f4d
commit a8c63e87da
6 changed files with 11 additions and 15 deletions

View file

@ -410,7 +410,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.") raise _HE(404, "Nicht gefunden.")
return _media_response(filepath) return _media_response(filepath)
APP_VER = "1001" # muss mit APP_VER in app.js übereinstimmen APP_VER = "1002" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json") @app.get("/.well-known/assetlinks.json")
async def assetlinks(): async def assetlinks():

View file

@ -8061,8 +8061,8 @@ svg.empty-state-icon {
/* Oberer Bereich: Info + Reminders */ /* Oberer Bereich: Info + Reminders */
.world-top { display: flex; flex-direction: column; gap: 10px; } .world-top { display: flex; flex-direction: column; gap: 10px; }
/* Unterer Bereich: Chips (Daumen-Zone) */ /* Unterer Bereich: Chips (Daumen-Zone) — kompakt, ganz unten */
.world-bottom { display: flex; flex-direction: column; gap: 8px; } .world-bottom { display: flex; flex-direction: column; gap: 5px; }
/* Frosted-Glass Info-Card (oben in jeder Welt) */ /* Frosted-Glass Info-Card (oben in jeder Welt) */
.world-info-card { .world-info-card {
@ -8107,9 +8107,8 @@ svg.empty-state-icon {
.world-chips-grid { .world-chips-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 80px; /* alle Chips gleich hoch */ grid-auto-rows: 74px;
gap: 8px; gap: 7px;
margin-top: auto;
} }
/* Einzelner Chip: Frosted Glass */ /* Einzelner Chip: Frosted Glass */
@ -8130,7 +8129,7 @@ svg.empty-state-icon {
transition: background 0.12s, transform 0.1s; transition: background 0.12s, transform 0.1s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
user-select: none; user-select: none;
min-height: 80px; /* alle Chips gleich hoch */ min-height: 74px;
} }
.world-chip:active { .world-chip:active {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
@ -8209,10 +8208,10 @@ svg.empty-state-icon {
/* Footer-Links (Impressum / Die 100 / Datenschutz) */ /* Footer-Links (Impressum / Die 100 / Datenschutz) */
.world-footer-links { .world-footer-links {
text-align: center; text-align: center;
padding: 10px 0 2px; padding: 4px 0 0;
} }
.world-footer-links span { .world-footer-links span {
font-size: 11px; font-size: 10px;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
cursor: pointer; cursor: pointer;
letter-spacing: 0.05em; letter-spacing: 0.05em;

View file

@ -103,7 +103,7 @@
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=907"> <link rel="stylesheet" href="/css/design-system.css?v=907">
<link rel="stylesheet" href="/css/layout.css?v=973"> <link rel="stylesheet" href="/css/layout.css?v=973">
<link rel="stylesheet" href="/css/components.css?v=907"> <link rel="stylesheet" href="/css/components.css?v=1001">
</head> </head>
<body> <body>

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '1001'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '1002'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen // Cache-Bust-Parameter nach Update-Reload sofort entfernen

View file

@ -1199,7 +1199,6 @@ window.Worlds = (() => {
</div>` : ''} </div>` : ''}
</div> </div>
<div class="world-bottom"> <div class="world-bottom">
<div class="world-section-label">Deine Bereiche</div>
<div class="world-chips-grid"> <div class="world-chips-grid">
${features.map(f => _chip(f.icon, f.label, f.page, false, false, false)).join('')} ${features.map(f => _chip(f.icon, f.label, f.page, false, false, false)).join('')}
</div> </div>
@ -1491,7 +1490,6 @@ window.Worlds = (() => {
</div> </div>
</div> </div>
` : ''} ` : ''}
<div class="world-section-label">Alles über ${_esc(dog.name)}</div>
<div class="world-chips-grid"> <div class="world-chips-grid">
${chips.map(c => _chip(c.icon, c.label, c.page, false, false, false)).join('')} ${chips.map(c => _chip(c.icon, c.label, c.page, false, false, false)).join('')}
</div> </div>
@ -1665,7 +1663,6 @@ window.Worlds = (() => {
</div> </div>
</div> </div>
<div class="world-bottom"> <div class="world-bottom">
<div class="world-section-label">Die Welt da draußen</div>
<div class="world-chips-grid"> <div class="world-chips-grid">
${chips.map(c => _chip(c.icon, c.label, c.page, false, false, false)).join('')} ${chips.map(c => _chip(c.icon, c.label, c.page, false, false, false)).join('')}
</div> </div>

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v1001'; const CACHE_VERSION = 'by-v1002';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache