Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- "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 85d427f9b2
commit 15388e5806
5 changed files with 50 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/app.css
+30 -2
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; }
frontend/index.html
+16 -11
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<!-- APP_VERSION: update here + version.js on every release -->
<title>Calendarr v7</title>
<title>Calendarr v8</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#4285f4" />
@@ -80,7 +80,7 @@
<button type="submit" class="btn btn-primary btn-full">Anmelden</button>
</form>
</div>
<button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v7</button>
<button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v8</button>
</div>
<!-- ─── MAIN APP ──────────────────────────────────────────── -->
@@ -159,7 +159,7 @@
<aside class="sidebar" id="sidebar">
<div class="sidebar-inner">
<button class="btn btn-fab" id="btn-create-event">
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M19 13h-6v7h-2v-6H5v-2h6V5h2v7h6v2z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M19 13h-6v8h-2v-6H5v-2h6V5h2v8h6v2z"/></svg>
<span data-i18n="btn_create">Erstellen</span>
</button>
@@ -185,7 +185,7 @@
<span data-i18n="my_calendars">Meine Kalender</span>
<div class="add-cal-dropdown-wrap">
<button class="icon-btn mini-btn" id="btn-add-cal" title="Kalender hinzufügen">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v7h-2v-6H5v-2h6V5h2v7h6v2z"/></svg>
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v8h-2v-6H5v-2h6V5h2v8h6v2z"/></svg>
</button>
<div class="add-cal-dropdown hidden" id="add-cal-dropdown">
<button data-action="local">Lokaler Kalender</button>
@@ -199,7 +199,7 @@
<div id="cal-list-items"></div>
</div>
</div>
<button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v7</button>
<button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v8</button>
</aside>
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
@@ -235,7 +235,7 @@
<input type="hidden" id="ev-start" />
<div class="dt-display" id="ev-start-display" tabindex="0" role="button">
<span class="dt-display-text">—</span>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v7H7z"/></svg>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v8H7z"/></svg>
</div>
</div>
<div class="form-group half">
@@ -243,7 +243,7 @@
<input type="hidden" id="ev-end" />
<div class="dt-display" id="ev-end-display" tabindex="0" role="button">
<span class="dt-display-text">—</span>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v7H7z"/></svg>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v8H7z"/></svg>
</div>
</div>
</div>
@@ -253,7 +253,7 @@
<input type="hidden" id="ev-start-date" />
<div class="dt-display" id="ev-start-date-display" tabindex="0" role="button">
<span class="dt-display-text">—</span>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v7H7z"/></svg>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v8H7z"/></svg>
</div>
</div>
<div class="form-group half">
@@ -261,7 +261,7 @@
<input type="hidden" id="ev-end-date" />
<div class="dt-display" id="ev-end-date-display" tabindex="0" role="button">
<span class="dt-display-text">—</span>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v7H7z"/></svg>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v8H7z"/></svg>
</div>
</div>
</div>
@@ -311,7 +311,7 @@
<input type="hidden" id="ev-rec-until" />
<div class="dt-display" id="ev-rec-until-display" tabindex="0" role="button">
<span class="dt-display-text">—</span>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v7H7z"/></svg>
<svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v8H7z"/></svg>
</div>
</div>
</div>
@@ -844,6 +844,11 @@
</div>
<!-- Toast -->
<!-- Floating action button (mobile only — create event) -->
<button id="btn-create-fab" class="create-fab" title="Termin erstellen" aria-label="Termin erstellen">
<svg viewBox="0 0 24 24" fill="currentColor" width="28" height="28"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
</button>
<div id="toast" class="toast hidden"></div>
<!-- Impressum Modal -->
@@ -865,7 +870,7 @@
<a href="mailto:scarriffleservices@gmail.com">scarriffleservices@gmail.com</a></p>
</div>
<div class="modal-footer" style="justify-content:space-between;align-items:center">
<span style="font-size:12px;color:var(--text-3)">Calendarr v7</span>
<span style="font-size:12px;color:var(--text-3)">Calendarr v8</span>
<button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
</div>
</div>
frontend/js/calendar.js
+2
View File
@@ -865,6 +865,8 @@ function bindTopbar() {
document.getElementById('btn-settings').onclick = openSettingsModal;
document.getElementById('btn-create-event').onclick = () => openNewEventModal(state.selectedDate || state.currentDate);
const fab = document.getElementById('btn-create-fab');
if (fab) fab.onclick = () => openNewEventModal(state.selectedDate || state.currentDate);
// Mobile view-toggle popup
const viewMobileBtn = document.getElementById('btn-view-mobile');
frontend/js/version.js
+1 -1
View File
@@ -1,2 +1,2 @@
// Increment APP_VERSION with every code change
export const APP_VERSION = 'v7';
export const APP_VERSION = 'v8';
frontend/sw.js
+1 -1
View File
@@ -1,7 +1,7 @@
// Calendarr Service Worker
// Cache-first for static assets, network-first for /api/* (graceful offline)
const CACHE_VERSION = 'calendarr-v7';
const CACHE_VERSION = 'calendarr-v8';
const STATIC_ASSETS = [
'/',
'/index.html',