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

ui: Event-Popup neu strukturiert — Titel volle Breite, Actions im Footer

Browse Source 
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.
This commit is contained in:
Scarriffle
2026-05-11 08:24:48 +02:00
parent 1d6acceafc
commit baa7e4c064
5 changed files with 102 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/css/app.css
View File

@@ -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; }

43
frontend/index.html
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 v14</title>
<title>Calendarr v15</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;v14</button>
<button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v15</button>
</div>
<!-- ─── MAIN APP ──────────────────────────────────────────── -->
@@ -199,7 +199,7 @@
<div id="cal-list-items"></div>
</div>
</div>
<button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v14</button>
<button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v15</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 10h5v14H7z"/></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 10h5v15H7z"/></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 10h5v14H7z"/></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 10h5v15H7z"/></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 10h5v14H7z"/></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 10h5v15H7z"/></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 10h5v14H7z"/></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 10h5v15H7z"/></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 10h5v14H7z"/></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 10h5v15H7z"/></svg>
</div>
</div>
</div>
@@ -372,19 +372,10 @@
<!-- Event Detail Popup -->
<div id="popup-event" class="event-popup hidden">
<button class="popup-close" id="popup-close" title="Schließen" aria-label="Schließen">&times;</button>
<div class="popup-header">
<div class="popup-color-dot" id="popup-color-dot"></div>
<h4 id="popup-title"></h4>
<button class="icon-btn popup-action" id="popup-edit" title="Bearbeiten">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</button>
<button class="icon-btn popup-action" id="popup-copy" title="Kopieren nach…">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v24h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v24z"/></svg>
</button>
<button class="icon-btn popup-action" id="popup-delete" title="Löschen">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v22zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
</button>
<button class="icon-btn popup-close" id="popup-close">&times;</button>
</div>
<div class="popup-body">
<div class="popup-time" id="popup-time"></div>
@@ -392,6 +383,20 @@
<div class="popup-description" id="popup-description"></div>
<div class="popup-calendar" id="popup-calendar"></div>
</div>
<div class="popup-actions">
<button class="popup-action-btn" id="popup-edit">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
<span data-i18n="edit">Bearbeiten</span>
</button>
<button class="popup-action-btn" id="popup-copy">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v24h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v24z"/></svg>
<span data-i18n="copy">Kopieren</span>
</button>
<button class="popup-action-btn popup-action-danger" id="popup-delete">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v22zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
<span data-i18n="delete">Löschen</span>
</button>
</div>
<div id="popup-copy-menu" class="popup-copy-menu hidden"></div>
</div>
@@ -884,7 +889,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 v14</span>
<span style="font-size:12px;color:var(--text-3)">Calendarr v15</span>
<button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
</div>
</div>

4
frontend/js/i18n.js
View File

@@ -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}"?',

2
frontend/js/version.js
View File

@@ -1,2 +1,2 @@
// Increment APP_VERSION with every code change
export const APP_VERSION = 'v14';
export const APP_VERSION = 'v15';

2
frontend/sw.js
View File

@@ -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 => {