fix(mobile): zweizeiliger Titel, kompaktes Event-Popup, keine Uhrzeit in Monatszelle

- 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.
2026-05-07 19:40:20 +02:00
parent e0a61b7368
commit f4bcdf458b
6 changed files with 78 additions and 32 deletions
--- 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; }
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -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 v8</title>
+  <title>Calendarr v9</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;v8</button>
+  <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v9</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-6v8h-2v-6H5v-2h6V5h2v8h6v2z"/></svg>
+          <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M19 13h-6v9h-2v-6H5v-2h6V5h2v9h6v2z"/></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-6v8h-2v-6H5v-2h6V5h2v8h6v2z"/></svg>
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v9h-2v-6H5v-2h6V5h2v9h6v2z"/></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;v8</button>
+      <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v9</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 10h5v8H7z"/></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 10h5v9H7z"/></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 10h5v8H7z"/></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 10h5v9H7z"/></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 10h5v8H7z"/></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 10h5v9H7z"/></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 10h5v8H7z"/></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 10h5v9H7z"/></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 10h5v8H7z"/></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 10h5v9H7z"/></svg>
          </div>
        </div>
      </div>
@@ -870,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 v8</span>
+      <span style="font-size:12px;color:var(--text-3)">Calendarr v9</span>
      <button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
    </div>
  </div>
--- 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 =
+    `<span class="view-title-main">${main}</span>` +
+    (year ? `<span class="view-title-year">${year}</span>` : '');
+  document.title = `Calendarr - ${fullText}`;
 }

 function updateViewButtons() {
--- 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';
--- 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
+        : `<span class="month-event-time">${escHtml(fmtTime(new Date(ev.start)))}</span> ${titleEsc}`;
      eventsHtml += `<div class="month-span-event ${pastCls} ${cL} ${cR}"
        data-id="${ev.id}" data-url="${escAttr(ev.url)}"
        style="left:${leftPct.toFixed(3)}%;width:${widthPct.toFixed(3)}%;top:${topPx}px;background:${color}"
-        title="${escAttr(ev.title)}">${escHtml(label)}</div>`;
+        title="${escAttr(ev.title)}">${labelHtml}</div>`;
    });

    // "+N more" per column
--- 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',