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

ui: Event-Popup-Aktionsbuttons polieren

Browse Source 
Die drei Aktions-Icons (Bearbeiten, Kopieren, Löschen) und der
Schließen-X im Termin-Popup hatten bisher nur den schlichten
icon-btn-Hover (graue Fläche). Jetzt im selben modernen Stil wie die
neuen Pill-Buttons:

- Bearbeiten/Kopieren/Löschen: Hover bekommt Primärfarben-Tint
  (color-mix-Hintergrund + farbige Schrift) plus dezenten farbigen
  Schatten
- Schließen-X: Hover zeigt die Akzentfarbe (rot), passend zur
  destruktiven Geste
- Klick fühlt sich mit kurzem Scale-Down (.92) taktiler an

Version v13 → v14.
This commit is contained in:
Scarriffle
2026-05-11 08:08:12 +02:00
parent 9013f57d02
commit 1d6acceafc
4 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/css/app.css
View File

@@ -990,7 +990,32 @@ a { color: var(--primary); text-decoration: none; }
} }
.popup-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .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-header h4 { flex: 1; font-size: 15px; font-weight: 500; }
.popup-action, .popup-close { width: 32px; height: 32px; font-size: 16px; } .popup-action, .popup-close {
width: 34px; height: 34px;
font-size: 16px;
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);
}
.popup-close:hover {
background: rgba(234,67,53,.15);
background: color-mix(in srgb, var(--accent) 16%, 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-body { padding: 12px 16px; } .popup-body { padding: 12px 16px; }
.popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; } .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; } .popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; }

18
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <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" /> <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 --> <!-- APP_VERSION: update here + version.js on every release -->
<title>Calendarr v13</title> <title>Calendarr v14</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#4285f4" /> <meta name="theme-color" content="#4285f4" />
@@ -80,7 +80,7 @@
<button type="submit" class="btn btn-primary btn-full">Anmelden</button> <button type="submit" class="btn btn-primary btn-full">Anmelden</button>
</form> </form>
</div> </div>
<button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v13</button> <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v14</button>
</div> </div>
<!-- ─── MAIN APP ──────────────────────────────────────────── --> <!-- ─── MAIN APP ──────────────────────────────────────────── -->
@@ -199,7 +199,7 @@
<div id="cal-list-items"></div> <div id="cal-list-items"></div>
</div> </div>
</div> </div>
<button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v13</button> <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v14</button>
</aside> </aside>
<div id="sidebar-backdrop" class="sidebar-backdrop"></div> <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
@@ -235,7 +235,7 @@
<input type="hidden" id="ev-start" /> <input type="hidden" id="ev-start" />
<div class="dt-display" id="ev-start-display" tabindex="0" role="button"> <div class="dt-display" id="ev-start-display" tabindex="0" role="button">
<span class="dt-display-text">—</span> <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 10h5v13H7z"/></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 10h5v14H7z"/></svg>
</div> </div>
</div> </div>
<div class="form-group half"> <div class="form-group half">
@@ -243,7 +243,7 @@
<input type="hidden" id="ev-end" /> <input type="hidden" id="ev-end" />
<div class="dt-display" id="ev-end-display" tabindex="0" role="button"> <div class="dt-display" id="ev-end-display" tabindex="0" role="button">
<span class="dt-display-text">—</span> <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 10h5v13H7z"/></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 10h5v14H7z"/></svg>
</div> </div>
</div> </div>
</div> </div>
@@ -253,7 +253,7 @@
<input type="hidden" id="ev-start-date" /> <input type="hidden" id="ev-start-date" />
<div class="dt-display" id="ev-start-date-display" tabindex="0" role="button"> <div class="dt-display" id="ev-start-date-display" tabindex="0" role="button">
<span class="dt-display-text">—</span> <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 10h5v13H7z"/></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 10h5v14H7z"/></svg>
</div> </div>
</div> </div>
<div class="form-group half"> <div class="form-group half">
@@ -261,7 +261,7 @@
<input type="hidden" id="ev-end-date" /> <input type="hidden" id="ev-end-date" />
<div class="dt-display" id="ev-end-date-display" tabindex="0" role="button"> <div class="dt-display" id="ev-end-date-display" tabindex="0" role="button">
<span class="dt-display-text">—</span> <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 10h5v13H7z"/></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 10h5v14H7z"/></svg>
</div> </div>
</div> </div>
</div> </div>
@@ -311,7 +311,7 @@
<input type="hidden" id="ev-rec-until" /> <input type="hidden" id="ev-rec-until" />
<div class="dt-display" id="ev-rec-until-display" tabindex="0" role="button"> <div class="dt-display" id="ev-rec-until-display" tabindex="0" role="button">
<span class="dt-display-text">—</span> <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 10h5v13H7z"/></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 10h5v14H7z"/></svg>
</div> </div>
</div> </div>
</div> </div>
@@ -884,7 +884,7 @@
<a href="mailto:scarriffleservices@gmail.com">scarriffleservices@gmail.com</a></p> <a href="mailto:scarriffleservices@gmail.com">scarriffleservices@gmail.com</a></p>
</div> </div>
<div class="modal-footer" style="justify-content:space-between;align-items:center"> <div class="modal-footer" style="justify-content:space-between;align-items:center">
<span style="font-size:12px;color:var(--text-3)">Calendarr v13</span> <span style="font-size:12px;color:var(--text-3)">Calendarr v14</span>
<button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button> <button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
</div> </div>
</div> </div>

2
frontend/js/version.js
View File

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

2
frontend/sw.js
View File

@@ -7,7 +7,7 @@
// the entry HTML / version files). New releases take effect on the next // the entry HTML / version files). New releases take effect on the next
// reload, no manual SW unregister required. // reload, no manual SW unregister required.
const CACHE_VERSION = 'calendarr-v13'; const CACHE_VERSION = 'calendarr-v14';
const OFFLINE_SHELL = ['/', '/index.html']; const OFFLINE_SHELL = ['/', '/index.html'];
self.addEventListener('install', event => { self.addEventListener('install', event => {