feat: FAB (Floating Action Button) auf allen Unterseiten für Mobile

- Einheitlicher blauer Plus-Button unten rechts auf Mobile (tasks, calendar,
  notes, contacts, budget) — konsistent mit Dashboard-FAB
- Toolbar-"Neu"-Buttons auf Mobile versteckt, auf Desktop weiterhin sichtbar
- Wiederverwendbare .page-fab CSS-Klasse in layout.css
- Dashboard-FAB Position an neue Nav-Höhe angepasst
- Service Worker Cache v13

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-26 07:09:15 +01:00
parent a2adb2b94c
commit b115b644c7
8 changed files with 86 additions and 11 deletions
+52
View File
@@ -177,6 +177,58 @@
line-height: 1;
}
/* --------------------------------------------------------
* Page FAB — Schwebender Erstellen-Button (nur Mobile/Tablet)
*
* Einheitlicher FAB auf Unterseiten. Auf Desktop versteckt,
* da der Toolbar-Button dort gut erreichbar ist.
* -------------------------------------------------------- */
.page-fab {
position: fixed;
bottom: calc(var(--nav-height-mobile) + 24px + var(--safe-area-inset-bottom));
right: var(--space-4);
width: 52px;
height: 52px;
border-radius: var(--radius-full);
background-color: var(--color-accent);
color: #ffffff;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
z-index: calc(var(--z-nav) - 1);
transition: transform var(--transition-base), background-color var(--transition-fast);
-webkit-tap-highlight-color: transparent;
}
.page-fab:hover {
background-color: var(--color-accent-hover);
}
.page-fab:active {
transform: scale(0.92);
}
/* Auf Desktop: FAB verstecken, Toolbar-Button reicht */
@media (min-width: 1024px) {
.page-fab {
display: none;
}
}
/* Auf Mobile: Toolbar-"Neu"-Buttons verstecken, FAB übernimmt */
@media (max-width: 1023px) {
#btn-new-task,
#notes-add-btn,
#contacts-add-btn,
#budget-add,
#cal-add {
display: none !important;
}
}
/* ================================================================
* Sidebar Navigation — Desktop (≥ 1024px)
*