mrwnslz/diora-web
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Layout: Tab-Leiste position:fixed + padding-top korrekt (SW v11)
All checks were successful
Build and push Docker image / build (push) Successful in 15s
Details
Test / test (push) Successful in 16s
Details

Browse source 
Statt padding-top gegen die Navbar zu kämpfen ist #tabs jetzt
position:fixed direkt unterhalb der Navbar (top:var(--nav-h),
z-index:150). Damit ist die Leiste garantiert immer sichtbar,
unabhängig vom Scroll-Zustand oder Offline-Status.

main-content padding-top auf calc(var(--nav-h)+3rem) erhöht um
Platz für Navbar+Tabs zu schaffen. Offline-Banner vereinfacht zu
einer body-Klasse (kein fixed DOM-Element mehr).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
marwin 2026-05-30 00:34:53 +02:00
parent d7a27b188d
commit 5d69edc57e
3 changed files with 21 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
static/css/app.css
View file

@ -149,7 +149,7 @@ a:hover {
.main-content {
max-width: 1100px;
margin: 0 auto;
padding: calc(var(--nav-h) + 0.75rem) 1.5rem calc(var(--bar-h) + 2rem);
padding: calc(var(--nav-h) + 3rem) 1.5rem calc(var(--bar-h) + 2rem);
height: 100%;
overflow-y: auto;
}
@ -315,6 +315,18 @@ a:hover {
gap: 0;
}
/* Haupttab-Leiste: immer sichtbar unterhalb der Navbar */
#tabs {
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
z-index: 150;
background: var(--bg);
margin-bottom: 0;
padding: 0 0.5rem;
}
.tab-btn {
background: none;
border: none;
@ -736,7 +748,10 @@ a:hover {
@media (max-width: 600px) {
.main-content {
padding: calc(var(--nav-h) + 0.5rem) 0.75rem calc(var(--bar-h) + 1.5rem);
padding: calc(var(--nav-h) + 3rem) 0.75rem calc(var(--bar-h) + 1.5rem);
}
#tabs {
padding: 0 0.25rem;
}
.now-playing-bar {
@ -1486,20 +1501,6 @@ body.dnd-mode .timer-display {
padding: 4px 0 8px;
}
.offline-banner {
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
background: var(--accent);
color: #fff;
text-align: center;
font-size: 12px;
padding: 4px 8px;
z-index: 250;
pointer-events: none;
}
.book-key-bar {
display: flex;
align-items: center;

17
static/js/app.js
View file

@ -1040,22 +1040,9 @@ const TOP_TABS = ['radio', 'focus', 'podcasts', 'books'];
const RADIO_SUB_TABS = ['search', 'saved', 'history'];
function showOfflineBanner(offline) {
let banner = $('offline-banner');
if (offline) {
if (!banner) {
banner = document.createElement('div');
banner.id = 'offline-banner';
banner.className = 'offline-banner';
banner.textContent = 'Offline — nur gecachte Bücher verfügbar';
document.body.prepend(banner);
}
document.body.classList.toggle('app-offline', offline);
const uploadArea = $('book-upload-area');
if (uploadArea) uploadArea.style.display = 'none';
} else {
if (banner) banner.remove();
const uploadArea = $('book-upload-area');
if (uploadArea) uploadArea.style.display = '';
}
if (uploadArea) uploadArea.style.display = offline ? 'none' : '';
}
function showTab(name) {

2
static/js/sw.js
View file

@ -2,7 +2,7 @@
* diora service worker — caches the app shell for offline use.
*/
const CACHE = 'diora-v10';
const CACHE = 'diora-v11';
const PODCAST_CACHE = 'diora-podcast-v1';
const SHELL = [
'/static/css/app.css',