From baa7e4c0645aa86415b7775239b9ef17e413c7fa Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Mon, 11 May 2026 08:24:48 +0200 Subject: [PATCH] =?UTF-8?q?ui:=20Event-Popup=20neu=20strukturiert=20?= =?UTF-8?q?=E2=80=94=20Titel=20volle=20Breite,=20Actions=20im=20Footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vorher haben Bearbeiten/Kopieren/Löschen/Schließen im Header über die Hälfte der Breite gefressen, sodass der Titel auf 2-3 Zeilen zusammenschrumpfen musste. Neues Layout: - Schließen-X klein in der oberen rechten Ecke (absolut positioniert) - Header zeigt nur Color-Dot + Titel — voller Platz fürs Lesen - Drei beschriftete Aktions-Buttons (Bearbeiten / Kopieren / Löschen) als gleichbreite Reihe im Footer - Hover-Tint folgt der Primärfarbe; Löschen tönt zur Akzentfarbe - Popup-Breite leicht erhöht (300 → 340 px) für mehr Atemraum - Mobile bekommt die Action-Buttons etwas kompakter IDs der Buttons unverändert (popup-edit/copy/delete/close), bestehende JS-Handler funktionieren weiter. Version v14 → v15. --- frontend/css/app.css | 111 +++++++++++++++++++++++++++-------------- frontend/index.html | 43 +++++++++------- frontend/js/i18n.js | 4 +- frontend/js/version.js | 2 +- frontend/sw.js | 2 +- 5 files changed, 102 insertions(+), 60 deletions(-) diff --git a/frontend/css/app.css b/frontend/css/app.css index bd1fb56..b481fd6 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -981,44 +981,86 @@ a { color: var(--primary); text-decoration: none; } background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); - width: 300px; + width: 340px; box-shadow: var(--shadow-lg); } -.popup-header { - display: flex; align-items: center; gap: 8px; - padding: 12px 16px; border-bottom: 1px solid var(--border); -} -.popup-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } -.popup-header h4 { flex: 1; font-size: 15px; font-weight: 500; } -.popup-action, .popup-close { - width: 34px; height: 34px; - font-size: 16px; + +/* 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%; - color: var(--text-2); - transition: - background var(--transition), - color var(--transition), - transform .1s ease, - box-shadow .15s ease; -} -.popup-action:hover { - background: rgba(66,133,244,.15); - background: color-mix(in srgb, var(--primary) 16%, transparent); - color: var(--primary); - box-shadow: 0 2px 8px rgba(66,133,244,.18); - box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent); + 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,.15); - background: color-mix(in srgb, var(--accent) 16%, transparent); + background: rgba(234,67,53,.18); + background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } -.popup-action svg, .popup-close svg { width: 16px; height: 16px; } -.popup-close { font-size: 20px; } -.popup-action:active, .popup-close:active { transform: scale(.92); } +.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 */ + border-bottom: 1px solid var(--border); +} +.popup-color-dot { + width: 12px; height: 12px; border-radius: 50%; + flex-shrink: 0; + margin-top: 5px; /* visually align with the title's first line */ +} +.popup-header h4 { + flex: 1; font-size: 15px; font-weight: 500; + line-height: 1.35; + word-break: break-word; +} + .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; @@ -1669,15 +1711,10 @@ a { color: var(--primary); text-decoration: none; } .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; } + /* 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; } /* Monatsansicht: Startzeit ausblenden — nur Titel anzeigen ──── */ .month-event-time { display: none; } diff --git a/frontend/index.html b/frontend/index.html index dce93f4..35256fd 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - Calendarr v14 + Calendarr v15 @@ -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,19 +372,10 @@ @@ -884,7 +889,7 @@ scarriffleservices@gmail.com

- Calendarr v14 + Calendarr v15
diff --git a/frontend/js/i18n.js b/frontend/js/i18n.js index ab9310b..ba49419 100644 --- a/frontend/js/i18n.js +++ b/frontend/js/i18n.js @@ -154,7 +154,7 @@ const translations = { rec_every: 'Alle', rec_days: 'Tage', rec_weeks: 'Wochen', rec_months: 'Monate', rec_ends: 'Endet', rec_never: 'Nie', rec_after_count: 'Nach Anzahl', rec_on_date: 'Am Datum', rec_occurrences: 'Termine', - copy_to_calendar: 'Kopieren nach…', event_copied: 'Termin kopiert', + copy_to_calendar: 'Kopieren nach…', event_copied: 'Termin kopiert', copy: 'Kopieren', edit_before_copy: 'Vor dem Kopieren bearbeiten', event_updated: 'Termin aktualisiert', event_created: 'Termin erstellt', confirm_delete_event: '"{title}" wirklich löschen?', @@ -365,7 +365,7 @@ const translations = { rec_every: 'Every', rec_days: 'days', rec_weeks: 'weeks', rec_months: 'months', rec_ends: 'Ends', rec_never: 'Never', rec_after_count: 'After count', rec_on_date: 'On date', rec_occurrences: 'occurrences', - copy_to_calendar: 'Copy to…', event_copied: 'Event copied', + copy_to_calendar: 'Copy to…', event_copied: 'Event copied', copy: 'Copy', edit_before_copy: 'Edit before copying', event_updated: 'Event updated', event_created: 'Event created', confirm_delete_event: 'Really delete "{title}"?', diff --git a/frontend/js/version.js b/frontend/js/version.js index ada9b11..0384aba 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 = 'v14'; +export const APP_VERSION = 'v15'; diff --git a/frontend/sw.js b/frontend/sw.js index 2b3878c..aeed36d 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-v14'; +const CACHE_VERSION = 'calendarr-v15'; const OFFLINE_SHELL = ['/', '/index.html']; self.addEventListener('install', event => {