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

ui: Event-Popup-Aktionen modernisiert — kompakte Icon-Toolbar im Header

Browse Source 
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.
This commit is contained in:
Scarriffle
2026-05-11 09:10:07 +02:00
parent dc1cb4b57d
commit 254adfa12a
4 changed files with 80 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
frontend/css/app.css
View File

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

47
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 v16</title>
<title>Calendarr v17</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;v16</button>
<button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v17</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;v16</button>
<button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v17</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 10h5v16H7z"/></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 10h5v17H7z"/></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 10h5v16H7z"/></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 10h5v17H7z"/></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 10h5v16H7z"/></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 10h5v17H7z"/></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 10h5v16H7z"/></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 10h5v17H7z"/></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 10h5v16H7z"/></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 10h5v17H7z"/></svg>
</div>
</div>
</div>
@@ -372,10 +372,23 @@
<!-- 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>
<div class="popup-toolbar">
<button class="popup-icon-btn" id="popup-edit" title="Bearbeiten" aria-label="Bearbeiten">
<svg width="15" height="15" 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="popup-icon-btn" id="popup-copy" title="Kopieren" aria-label="Kopieren">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
</button>
<button class="popup-icon-btn popup-icon-btn-danger" id="popup-delete" title="Löschen" aria-label="Löschen">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
</button>
<button class="popup-icon-btn popup-icon-btn-close" id="popup-close" title="Schließen" aria-label="Schließen">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</div>
</div>
<div class="popup-body">
<div class="popup-time" id="popup-time"></div>
@@ -383,20 +396,6 @@
<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 width="16" height="16" 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 width="16" height="16" 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 width="16" height="16" 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>
@@ -889,7 +888,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 v16</span>
<span style="font-size:12px;color:var(--text-3)">Calendarr v17</span>
<button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
</div>
</div>

2
frontend/js/version.js
View File

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

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-v16';
const CACHE_VERSION = 'calendarr-v17';
const OFFLINE_SHELL = ['/', '/index.html'];
self.addEventListener('install', event => {