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
+6 -1
View File
@@ -98,6 +98,9 @@ export async function render(container, { user }) {
<div id="budget-body" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
<div style="padding:2rem;text-align:center;color:var(--color-text-disabled);">Lade…</div>
</div>
<button class="page-fab" id="fab-new-budget" aria-label="Neuer Eintrag">
<i data-lucide="plus" style="width:24px;height:24px"></i>
</button>
</div>
`;
@@ -131,7 +134,9 @@ function wireNav() {
renderBody();
updateLabel();
});
_container.querySelector('#budget-add').addEventListener('click', () => openModal({ mode: 'create' }));
const addHandler = () => openModal({ mode: 'create' });
_container.querySelector('#budget-add').addEventListener('click', addHandler);
_container.querySelector('#fab-new-budget').addEventListener('click', addHandler);
updateLabel();
}