From 254adfa12ac47a3d0e26d1518138f88ab73e6339 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Mon, 11 May 2026 09:10:07 +0200 Subject: [PATCH] =?UTF-8?q?ui:=20Event-Popup-Aktionen=20modernisiert=20?= =?UTF-8?q?=E2=80=94=20kompakte=20Icon-Toolbar=20im=20Header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Das Popup hatte vorher Text+Icon-Buttons in einem Footer mit verschwendeter vertikaler Höhe. Jetzt: - Color-Dot + Titel links (volle Breite, kann sauber umbrechen) - Kompakte 30px-Icon-Toolbar rechts oben: Bearbeiten / Kopieren / Löschen / Schließen - Icons im Ruhezustand transparent (nur SVG sichtbar, sehr dezent) - Auf Hover: runder farbiger Hintergrund. Edit/Copy in Primärfarbe, Delete in Akzentrot, Close in neutralem bg-hover - Klick gibt mit Scale-Down (.9) taktilen Feedback - Popup-Breite leicht erhöht (340 → 360 px) damit Titel + Toolbar bequem nebeneinander passen - Trash- und Copy-SVG-Pfade auf den 24x24-viewBox normalisiert (waren vorher zu lang) Version v16 → v17. --- frontend/css/app.css | 122 +++++++++++++++++++---------------------- frontend/index.html | 47 ++++++++-------- frontend/js/version.js | 2 +- frontend/sw.js | 2 +- 4 files changed, 80 insertions(+), 93 deletions(-) diff --git a/frontend/css/app.css b/frontend/css/app.css index b481fd6..d3a38f0 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -975,92 +975,78 @@ a { color: var(--primary); text-decoration: none; } } .ctx-item:hover { background: var(--bg-hover); } -/* ── Event Popup ────────────────────────────────────────── */ +/* ── Event Popup ────────────────────────────────────────── + Layout: Color-Dot + Title links, kleine Icon-Toolbar rechts oben. + Icons sind im Ruhezustand transparent (nur das SVG selbst sichtbar), + bekommen erst beim Hover einen runden farbigen Hintergrund. Wirkt + modern und lässt dem Titel die meiste Breite. */ .event-popup { position: fixed; z-index: 600; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); - width: 340px; + width: 360px; box-shadow: var(--shadow-lg); } -/* Close-X tucked into the top-right corner so the title gets full width */ -.popup-close { - position: absolute; - top: 8px; right: 8px; - width: 28px; height: 28px; - border-radius: 50%; - display: flex; align-items: center; justify-content: center; - font-size: 18px; line-height: 1; - color: var(--text-3); - background: transparent; - border: none; - cursor: pointer; - z-index: 1; - transition: background var(--transition), color var(--transition), transform .1s ease; -} -.popup-close:hover { - background: rgba(234,67,53,.18); - background: color-mix(in srgb, var(--accent) 18%, transparent); - color: var(--accent); -} -.popup-close:active { transform: scale(.92); } - .popup-header { display: flex; align-items: flex-start; gap: 10px; - padding: 14px 44px 12px 16px; /* right padding leaves room for close-X */ + padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--border); } .popup-color-dot { - width: 12px; height: 12px; border-radius: 50%; + width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; - margin-top: 5px; /* visually align with the title's first line */ + margin-top: 6px; } .popup-header h4 { - flex: 1; font-size: 15px; font-weight: 500; - line-height: 1.35; + flex: 1; + font-size: 14px; font-weight: 500; + line-height: 1.4; word-break: break-word; + padding-top: 2px; } +.popup-toolbar { + display: flex; + gap: 2px; + flex-shrink: 0; + margin-left: 4px; +} +.popup-icon-btn { + width: 30px; height: 30px; + border-radius: 50%; + display: inline-flex; align-items: center; justify-content: center; + background: transparent; + border: none; + cursor: pointer; + color: var(--text-3); + -webkit-tap-highlight-color: transparent; + transition: + background var(--transition), + color var(--transition), + transform .1s ease; +} +.popup-icon-btn svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; } +.popup-icon-btn:hover { + background: rgba(66,133,244,.16); + background: color-mix(in srgb, var(--primary) 16%, transparent); + color: var(--primary); +} +.popup-icon-btn-danger:hover { + background: rgba(234,67,53,.16); + background: color-mix(in srgb, var(--accent) 16%, transparent); + color: var(--accent); +} +.popup-icon-btn-close:hover { + background: var(--bg-hover); + color: var(--text-1); +} +.popup-icon-btn:active { transform: scale(.9); } + .popup-body { padding: 12px 16px; } .popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; } - -/* Footer with the three action buttons, each takes equal width */ -.popup-actions { - display: flex; - gap: 4px; - padding: 8px 10px 10px; - border-top: 1px solid var(--border); -} -.popup-action-btn { - flex: 1; - display: inline-flex; align-items: center; justify-content: center; - gap: 6px; - padding: 8px 6px; - border-radius: 8px; - background: transparent; - border: none; - cursor: pointer; - color: var(--text-2); - font-size: 12px; - font-weight: 500; - -webkit-tap-highlight-color: transparent; - transition: background var(--transition), color var(--transition), transform .1s ease; -} -.popup-action-btn svg { width: 16px; height: 16px; fill: currentColor; } -.popup-action-btn:hover { - background: rgba(66,133,244,.14); - background: color-mix(in srgb, var(--primary) 14%, transparent); - color: var(--primary); -} -.popup-action-btn.popup-action-danger:hover { - background: rgba(234,67,53,.14); - background: color-mix(in srgb, var(--accent) 14%, transparent); - color: var(--accent); -} -.popup-action-btn:active { transform: scale(.96); } .popup-copy-menu { border-top: 1px solid var(--border); padding: 4px 0; @@ -1712,9 +1698,11 @@ a { color: var(--primary); text-decoration: none; } .topbar-right { gap: 0; } /* Event-Popup auf Mobile: an Viewport-Breite anpassen */ - .event-popup { width: min(94vw, 360px); max-width: 94vw; } - .popup-actions { padding: 8px 8px 10px; } - .popup-action-btn { font-size: 11px; padding: 8px 4px; } + .event-popup { width: min(94vw, 380px); max-width: 94vw; } + .popup-header { padding: 10px 8px 10px 14px; } + .popup-header h4 { font-size: 13.5px; } + .popup-icon-btn { width: 32px; height: 32px; } + .popup-icon-btn svg { width: 16px; height: 16px; } /* Monatsansicht: Startzeit ausblenden — nur Titel anzeigen ──── */ .month-event-time { display: none; } diff --git a/frontend/index.html b/frontend/index.html index e73b5dd..5ee5a49 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - Calendarr v16 + Calendarr v17 @@ -80,7 +80,7 @@ - + @@ -199,7 +199,7 @@
- + @@ -235,7 +235,7 @@
— - +
@@ -243,7 +243,7 @@
— - +
@@ -253,7 +253,7 @@
— - +
@@ -261,7 +261,7 @@
— - +
@@ -311,7 +311,7 @@
— - +
@@ -372,10 +372,23 @@ @@ -889,7 +888,7 @@ scarriffleservices@gmail.com

- Calendarr v16 + Calendarr v17
diff --git a/frontend/js/version.js b/frontend/js/version.js index 15b9c55..9b7797e 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 = 'v16'; +export const APP_VERSION = 'v17'; diff --git a/frontend/sw.js b/frontend/sw.js index 344e6a0..7d26e5f 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -7,7 +7,7 @@ // the entry HTML / version files). New releases take effect on the next // reload, no manual SW unregister required. -const CACHE_VERSION = 'calendarr-v16'; +const CACHE_VERSION = 'calendarr-v17'; const OFFLINE_SHELL = ['/', '/index.html']; self.addEventListener('install', event => {