fix: Notizen-Leerstate zentrieren + FAB auf Desktop und Mobile einheitlich
- notes-empty: column-span:all für korrekte Zentrierung im Multicolumn-Layout - Inline-Style grid-column entfernt (wirkte nicht bei CSS columns) - FAB jetzt auch auf Desktop sichtbar (48px, unten rechts) - Toolbar-"Neu"-Buttons auf allen Breakpoints versteckt — FAB ist einziger Erstellen-Button, kein Design-Bruch mehr zwischen Mobile und Desktop - Service Worker Cache v15 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -86,7 +86,7 @@ function renderGrid() {
|
|||||||
|
|
||||||
if (!state.notes.length) {
|
if (!state.notes.length) {
|
||||||
grid.innerHTML = `
|
grid.innerHTML = `
|
||||||
<div class="notes-empty" style="columns:unset;grid-column:1/-1;">
|
<div class="notes-empty">
|
||||||
<i data-lucide="sticky-note" class="notes-empty__icon"></i>
|
<i data-lucide="sticky-note" class="notes-empty__icon"></i>
|
||||||
<div style="font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);">Noch keine Notizen</div>
|
<div style="font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);">Noch keine Notizen</div>
|
||||||
<div style="font-size:var(--text-sm);">Klicke auf „Neue Notiz" um loszulegen.</div>
|
<div style="font-size:var(--text-sm);">Klicke auf „Neue Notiz" um loszulegen.</div>
|
||||||
|
|||||||
+15
-13
@@ -178,10 +178,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* --------------------------------------------------------
|
/* --------------------------------------------------------
|
||||||
* Page FAB — Schwebender Erstellen-Button (nur Mobile/Tablet)
|
* Page FAB — Schwebender Erstellen-Button (alle Breakpoints)
|
||||||
*
|
*
|
||||||
* Einheitlicher FAB auf Unterseiten. Auf Desktop versteckt,
|
* Einheitlicher runder Plus-Button auf allen Unterseiten.
|
||||||
* da der Toolbar-Button dort gut erreichbar ist.
|
* Mobile: über der Bottom-Nav. Desktop: unten rechts im Content.
|
||||||
|
* Toolbar-"Neu"-Buttons werden überall versteckt.
|
||||||
* -------------------------------------------------------- */
|
* -------------------------------------------------------- */
|
||||||
.page-fab {
|
.page-fab {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -211,22 +212,23 @@
|
|||||||
transform: scale(0.92);
|
transform: scale(0.92);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Auf Desktop: FAB verstecken, Toolbar-Button reicht */
|
/* Desktop: FAB Position anpassen (keine Bottom-Nav) und etwas kleiner */
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
.page-fab {
|
.page-fab {
|
||||||
display: none;
|
bottom: var(--space-8);
|
||||||
|
right: var(--space-8);
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Auf Mobile: Toolbar-"Neu"-Buttons verstecken, FAB übernimmt */
|
/* Toolbar-"Neu"-Buttons überall verstecken — FAB übernimmt */
|
||||||
@media (max-width: 1023px) {
|
#btn-new-task,
|
||||||
#btn-new-task,
|
#notes-add-btn,
|
||||||
#notes-add-btn,
|
#contacts-add-btn,
|
||||||
#contacts-add-btn,
|
#budget-add,
|
||||||
#budget-add,
|
#cal-add {
|
||||||
#cal-add {
|
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ================================================================
|
/* ================================================================
|
||||||
|
|||||||
@@ -202,8 +202,8 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: var(--space-12) var(--space-6);
|
padding: var(--space-12) var(--space-6);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
flex: 1;
|
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
|
column-span: all; /* Multicolumn: volle Breite */
|
||||||
}
|
}
|
||||||
|
|
||||||
.notes-empty__icon {
|
.notes-empty__icon {
|
||||||
|
|||||||
+3
-3
@@ -12,9 +12,9 @@
|
|||||||
* API: Immer Netzwerk (kein Caching von Nutzerdaten)
|
* API: Immer Netzwerk (kein Caching von Nutzerdaten)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const SHELL_CACHE = 'oikos-shell-v14';
|
const SHELL_CACHE = 'oikos-shell-v15';
|
||||||
const PAGES_CACHE = 'oikos-pages-v14';
|
const PAGES_CACHE = 'oikos-pages-v15';
|
||||||
const ASSETS_CACHE = 'oikos-assets-v14';
|
const ASSETS_CACHE = 'oikos-assets-v15';
|
||||||
const ALL_CACHES = [SHELL_CACHE, PAGES_CACHE, ASSETS_CACHE];
|
const ALL_CACHES = [SHELL_CACHE, PAGES_CACHE, ASSETS_CACHE];
|
||||||
|
|
||||||
// App-Shell: sofort benötigt für ersten Render
|
// App-Shell: sofort benötigt für ersten Render
|
||||||
|
|||||||
Reference in New Issue
Block a user