feat(mobile): Heute-Button im Topbar + runder FAB für Termin-Erstellen

- "Heute"-Button auf Mobile wieder im Topbar-Center sichtbar
  (kompakter mit weniger Padding) statt nur im View-Popup.
- Neuer runder Floating-Action-Button unten rechts auf Mobile mit
  Plus-Icon, öffnet das "Termin erstellen"-Modal — Google-Calendar-
  artige Bedienung.
- Der "Erstellen"-Button in der Sidebar wird auf Mobile ausgeblendet,
  weil der FAB ihn ersetzt. Auf Desktop bleibt alles wie bisher.
- iOS-Safe-Area unten respektiert (Home-Indicator).

Version v7 → v8.
This commit is contained in:
Scarriffle
2026-05-07 19:31:17 +02:00
parent 7cabfb10de
commit e0a61b7368
5 changed files with 50 additions and 15 deletions

View File

@@ -1223,6 +1223,7 @@ a { color: var(--primary); text-decoration: none; }
.settings-nav-toggle { display: none; }
.settings-nav-backdrop { display: none; }
.dropdown-item-mobile-only { display: none; }
.create-fab { display: none; }
@media (max-width: 768px) {
html, body { overflow-x: hidden; max-width: 100vw; }
@@ -1418,8 +1419,35 @@ a { color: var(--primary); text-decoration: none; }
.view-mobile-wrapper { display: inline-block; }
.dropdown-item-mobile-only { display: flex; }
/* Hide "Heute" button on desktop topbar (it's in the view popup now) */
.topbar #btn-today { display: none; }
/* Heute-Button bleibt im Topbar-Center, kompakter Stil für Mobile */
.topbar #btn-today {
padding: 6px 10px;
font-size: 13px;
min-height: 36px;
flex-shrink: 0;
}
/* Sidebar create-button: auf Mobile durch den runden FAB ersetzt */
#btn-create-event { display: none; }
/* Floating action button — bottom-right round button */
.create-fab {
display: flex;
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
right: 20px;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--primary);
color: #fff;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,.5);
z-index: 450;
transition: filter var(--transition), transform var(--transition);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.create-fab:active { transform: scale(.95); }
.create-fab:hover { filter: brightness(1.1); }
/* The title is the most important info — let it grow */
.topbar-center { flex: 1; min-width: 0; }