openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/budget.js
+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();
}
public/pages/calendar.js
+5
View File
@@ -159,6 +159,9 @@ export async function render(container, { user }) {
<div class="calendar-page" id="calendar-page">
<div class="cal-toolbar" id="cal-toolbar"></div>
<div id="cal-body" style="flex:1;display:flex;flex-direction:column;overflow:hidden;"></div>
<button class="page-fab" id="fab-new-event" aria-label="Neuer Termin">
<i data-lucide="plus" style="width:24px;height:24px"></i>
</button>
</div>
`;
@@ -167,6 +170,8 @@ export async function render(container, { user }) {
renderToolbar();
renderView();
container.querySelector('#fab-new-event')?.addEventListener('click', () => openEventModal({ mode: 'create' }));
}
// --------------------------------------------------------
public/pages/contacts.js
+6 -3
View File
@@ -61,6 +61,9 @@ export async function render(container, { user }) {
`).join('')}
</div>
<div id="contacts-list" class="contacts-list"></div>
<button class="page-fab" id="fab-new-contact" aria-label="Neuer Kontakt">
<i data-lucide="plus" style="width:24px;height:24px"></i>
</button>
</div>
`;
@@ -92,9 +95,9 @@ export async function render(container, { user }) {
});
// Neu
_container.querySelector('#contacts-add-btn').addEventListener('click', () =>
openModal({ mode: 'create' })
);
const addHandler = () => openModal({ mode: 'create' });
_container.querySelector('#contacts-add-btn').addEventListener('click', addHandler);
_container.querySelector('#fab-new-contact').addEventListener('click', addHandler);
}
// --------------------------------------------------------
public/pages/notes.js
+6 -1
View File
@@ -53,6 +53,9 @@ export async function render(container, { user }) {
</button>
</div>
<div id="notes-grid" class="notes-grid"></div>
<button class="page-fab" id="fab-new-note" aria-label="Neue Notiz">
<i data-lucide="plus" style="width:24px;height:24px"></i>
</button>
</div>
`;
@@ -68,7 +71,9 @@ export async function render(container, { user }) {
}
renderGrid();
_container.querySelector('#notes-add-btn').addEventListener('click', () => openModal({ mode: 'create' }));
const addHandler = () => openModal({ mode: 'create' });
_container.querySelector('#notes-add-btn').addEventListener('click', addHandler);
_container.querySelector('#fab-new-note').addEventListener('click', addHandler);
}
// --------------------------------------------------------
public/pages/tasks.js
+7 -2
View File
@@ -864,10 +864,12 @@ function wireGroupToggle(container) {
}
function wireNewTaskBtn(container) {
container.querySelector('#btn-new-task')?.addEventListener('click', () => {
const handler = () => {
openModal(renderModal({ users: state.users }));
wireModalEvents(container);
});
};
container.querySelector('#btn-new-task')?.addEventListener('click', handler);
container.querySelector('#fab-new-task')?.addEventListener('click', handler);
}
function wireModalEvents(container) {
@@ -974,6 +976,9 @@ export async function render(container, { user }) {
<div class="skeleton skeleton-line skeleton-line--short" style="height:12px"></div>
</div>`).join('')}
</div>
<button class="page-fab" id="fab-new-task" aria-label="Neue Aufgabe">
<i data-lucide="plus" style="width:24px;height:24px"></i>
</button>
</div>
`;
public/styles/dashboard.css
+1 -1
View File
@@ -621,7 +621,7 @@
* -------------------------------------------------------- */
.fab-container {
position: fixed;
bottom: calc(var(--nav-height-mobile) + var(--safe-area-inset-bottom) + var(--space-4));
bottom: calc(var(--nav-height-mobile) + 24px + var(--safe-area-inset-bottom));
right: var(--space-4);
z-index: calc(var(--z-nav) - 1);
display: flex;
public/styles/layout.css
+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)
*
public/sw.js
+3 -3
View File
@@ -12,9 +12,9 @@
* API: Immer Netzwerk (kein Caching von Nutzerdaten)
*/
const SHELL_CACHE = 'oikos-shell-v12';
const PAGES_CACHE = 'oikos-pages-v12';
const ASSETS_CACHE = 'oikos-assets-v12';
const SHELL_CACHE = 'oikos-shell-v13';
const PAGES_CACHE = 'oikos-pages-v13';
const ASSETS_CACHE = 'oikos-assets-v13';
const ALL_CACHES = [SHELL_CACHE, PAGES_CACHE, ASSETS_CACHE];
// App-Shell: sofort benötigt für ersten Render