From f4bcdf458ba3260f29fbd4cc4e7df62587087963 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Thu, 7 May 2026 19:40:20 +0200 Subject: [PATCH] fix(mobile): zweizeiliger Titel, kompaktes Event-Popup, keine Uhrzeit in Monatszelle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Titel im Topbar wird auf Mobile auf 2 Zeilen aufgeteilt: Hauptlabel (z.B. "Mai – Jun") oben, Jahr ("2026") darunter in kleinerer Schrift. Auf Desktop bleibt es einzeilig durch margin-left auf der Year-Span. - Event-Popup: 44px-Mindestgröße der Icon-Buttons greift hier nicht mehr — Buttons bleiben kompakt 32px, weniger Gap, schmaleres Popup (max 92vw / 340px), sodass das Schließen-X nicht aus dem Rand herausragt. - Monatsansicht auf Mobile: Startuhrzeit ("00:00 Lemgo") wird versteckt, nur der Titel ist sichtbar. Auf Desktop wie bisher mit Uhrzeit-Präfix. Die Info bleibt im Termin-Popup verfügbar. Version v8 → v9. --- frontend/css/app.css | 36 ++++++++++++++++++++++++++++++++++- frontend/index.html | 22 ++++++++++----------- frontend/js/calendar.js | 39 ++++++++++++++++++++++++-------------- frontend/js/version.js | 2 +- frontend/js/views/month.js | 9 +++++---- frontend/sw.js | 2 +- 6 files changed, 78 insertions(+), 32 deletions(-) diff --git a/frontend/css/app.css b/frontend/css/app.css index 547de3b..d2d4da2 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -1225,6 +1225,9 @@ a { color: var(--primary); text-decoration: none; } .dropdown-item-mobile-only { display: none; } .create-fab { display: none; } +/* View-title spans: visual space between main and year on desktop */ +.view-title-year { margin-left: 6px; } + @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100vw; } @@ -1452,14 +1455,45 @@ a { color: var(--primary); text-decoration: none; } /* The title is the most important info — let it grow */ .topbar-center { flex: 1; min-width: 0; } .topbar-center .view-title { - font-size: 17px; + font-size: 15px; font-weight: 500; padding-left: 4px; flex: 1; + line-height: 1.1; + display: flex; + flex-direction: column; + align-items: flex-start; + overflow: hidden; + } + .view-title-main { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; + } + .view-title-year { + font-size: 11px; + font-weight: 400; + color: var(--text-2); + line-height: 1.1; + margin-left: 0; } .topbar-left { gap: 0; } .topbar-right { gap: 0; } + /* Event-Popup: Buttons kompakt halten, kein 44px-Override ───── */ + .event-popup .icon-btn { + min-width: 32px !important; + min-height: 32px !important; + width: 32px; + height: 32px; + } + .event-popup .popup-header { gap: 2px; padding: 10px 12px; } + .event-popup { width: min(92vw, 340px); max-width: 92vw; } + + /* Monatsansicht: Startzeit ausblenden — nur Titel anzeigen ──── */ + .month-event-time { display: none; } + /* ── Settings modal: nav becomes a slide-in overlay ──────── */ .settings-nav-toggle { display: inline-flex !important; } .settings-page-body { position: relative; } diff --git a/frontend/index.html b/frontend/index.html index 1ebe8b2..12ee6ed 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - Calendarr v8 + Calendarr v9 @@ -80,7 +80,7 @@ - + @@ -159,7 +159,7 @@ @@ -235,7 +235,7 @@
— - +
@@ -243,7 +243,7 @@
— - +
@@ -253,7 +253,7 @@
— - +
@@ -261,7 +261,7 @@
— - +
@@ -311,7 +311,7 @@
— - +
@@ -870,7 +870,7 @@ scarriffleservices@gmail.com

- Calendarr v8 + Calendarr v9
diff --git a/frontend/js/calendar.js b/frontend/js/calendar.js index 9d1cc46..7f65df4 100644 --- a/frontend/js/calendar.js +++ b/frontend/js/calendar.js @@ -328,38 +328,49 @@ function showLoading() { function updateTitle() { const d = state.currentDate; - let title = ''; + let main = ''; // primary label (months / day range) + let year = ''; // year — separated so mobile can wrap to a 2nd line const M = t('months'); if (state.currentView === 'month') { - // Show date range of the rolling 5-week window const ws = weekStart(d, weekStartDay); - const we = new Date(ws); we.setDate(we.getDate() + 34); // last day of 5th week + const we = new Date(ws); we.setDate(we.getDate() + 34); const Ms = t('months_short'); if (ws.getFullYear() !== we.getFullYear()) { - title = `${Ms[ws.getMonth()]} ${ws.getFullYear()} – ${Ms[we.getMonth()]} ${we.getFullYear()}`; + // Cross-year: keep both years inline in main, no separate year + main = `${Ms[ws.getMonth()]} ${ws.getFullYear()} – ${Ms[we.getMonth()]} ${we.getFullYear()}`; } else if (ws.getMonth() !== we.getMonth()) { - title = `${Ms[ws.getMonth()]} – ${Ms[we.getMonth()]} ${we.getFullYear()}`; + main = `${Ms[ws.getMonth()]} – ${Ms[we.getMonth()]}`; + year = `${we.getFullYear()}`; } else { - title = `${M[ws.getMonth()]} ${ws.getFullYear()}`; + main = `${M[ws.getMonth()]}`; + year = `${ws.getFullYear()}`; } } else if (state.currentView === 'week') { const mon = weekStart(d, weekStartDay); const sun = new Date(mon); sun.setDate(mon.getDate() + 6); const sameMonth = mon.getMonth() === sun.getMonth(); - title = sameMonth - ? `${mon.getDate()}. – ${sun.getDate()}. ${M[sun.getMonth()]} ${sun.getFullYear()}` - : `${mon.getDate()}. ${M[mon.getMonth()]} – ${sun.getDate()}. ${M[sun.getMonth()]} ${sun.getFullYear()}`; + main = sameMonth + ? `${mon.getDate()}. – ${sun.getDate()}. ${M[sun.getMonth()]}` + : `${mon.getDate()}. ${M[mon.getMonth()]} – ${sun.getDate()}. ${M[sun.getMonth()]}`; + year = `${sun.getFullYear()}`; } else if (state.currentView === 'day') { - title = `${d.getDate()}. ${M[d.getMonth()]} ${d.getFullYear()}`; + main = `${d.getDate()}. ${M[d.getMonth()]}`; + year = `${d.getFullYear()}`; } else if (state.currentView === 'quarter') { const q = Math.floor(d.getMonth() / 3) + 1; - title = `Q${q} ${d.getFullYear()}`; + main = `Q${q}`; + year = `${d.getFullYear()}`; } else { - title = `${d.getDate()}. ${M[d.getMonth()]} ${d.getFullYear()}`; + main = `${d.getDate()}. ${M[d.getMonth()]}`; + year = `${d.getFullYear()}`; } - document.getElementById('view-title').textContent = title; - document.title = `Calendarr - ${title}`; + const fullText = year ? `${main} ${year}` : main; + const titleEl = document.getElementById('view-title'); + titleEl.innerHTML = + `${main}` + + (year ? `${year}` : ''); + document.title = `Calendarr - ${fullText}`; } function updateViewButtons() { diff --git a/frontend/js/version.js b/frontend/js/version.js index 5056cca..90db215 100644 --- a/frontend/js/version.js +++ b/frontend/js/version.js @@ -1,2 +1,2 @@ // Increment APP_VERSION with every code change -export const APP_VERSION = 'v8'; +export const APP_VERSION = 'v9'; diff --git a/frontend/js/views/month.js b/frontend/js/views/month.js index 1b19c2a..b9a3431 100644 --- a/frontend/js/views/month.js +++ b/frontend/js/views/month.js @@ -102,13 +102,14 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC const pastCls = isPast(ev) ? 'past' : ''; const cL = continuesLeft ? 'continues-left' : ''; const cR = continuesRight ? 'continues-right' : ''; - const label = ev.allDay - ? ev.title - : `${fmtTime(new Date(ev.start))} ${ev.title}`; + const titleEsc = escHtml(ev.title); + const labelHtml = ev.allDay + ? titleEsc + : `${escHtml(fmtTime(new Date(ev.start)))} ${titleEsc}`; eventsHtml += `
${escHtml(label)}
`; + title="${escAttr(ev.title)}">${labelHtml}`; }); // "+N more" per column diff --git a/frontend/sw.js b/frontend/sw.js index b987b31..f19b29b 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -1,7 +1,7 @@ // Calendarr Service Worker // Cache-first for static assets, network-first for /api/* (graceful offline) -const CACHE_VERSION = 'calendarr-v8'; +const CACHE_VERSION = 'calendarr-v9'; const STATIC_ASSETS = [ '/', '/index.html',