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

Einige kleine verbesserungen #1

Open
Scarriffle wants to merge 115 commits from beta into master
pull from: beta
merge into: Scarriffle:master
Conversation 0 Commits 115 Files Changed 26 +102 -60
5 changed files with 102 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit baa7e4c064 - Show all commits

111
frontend/css/app.css
View File

@@ -981,44 +981,86 @@ a { color: var(--primary); text-decoration: none; }
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
width: 300px; width: 340px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }
.popup-header {
display: flex; align-items: center; gap: 8px; /* Close-X tucked into the top-right corner so the title gets full width */
padding: 12px 16px; border-bottom: 1px solid var(--border); .popup-close {
} position: absolute;
.popup-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } top: 8px; right: 8px;
.popup-header h4 { flex: 1; font-size: 15px; font-weight: 500; } width: 28px; height: 28px;
.popup-action, .popup-close {
width: 34px; height: 34px;
font-size: 16px;
border-radius: 50%; border-radius: 50%;
color: var(--text-2); display: flex; align-items: center; justify-content: center;
transition: font-size: 18px; line-height: 1;
background var(--transition), color: var(--text-3);
color var(--transition), background: transparent;
transform .1s ease, border: none;
box-shadow .15s ease; cursor: pointer;
} z-index: 1;
.popup-action:hover { transition: background var(--transition), color var(--transition), transform .1s ease;
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 { .popup-close:hover {
background: rgba(234,67,53,.15); background: rgba(234,67,53,.18);
background: color-mix(in srgb, var(--accent) 16%, transparent); background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent); color: var(--accent);
} }
.popup-action svg, .popup-close svg { width: 16px; height: 16px; } .popup-close:active { transform: scale(.92); }
.popup-close { font-size: 20px; }
.popup-action:active, .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-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; }
/* 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 { .popup-copy-menu {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
padding: 4px 0; padding: 4px 0;
@@ -1669,15 +1711,10 @@ a { color: var(--primary); text-decoration: none; }
.topbar-left { gap: 0; } .topbar-left { gap: 0; }
.topbar-right { gap: 0; } .topbar-right { gap: 0; }
/* Event-Popup: Buttons kompakt halten, kein 44px-Override ───── */ /* Event-Popup auf Mobile: an Viewport-Breite anpassen */
.event-popup .icon-btn { .event-popup { width: min(94vw, 360px); max-width: 94vw; }
min-width: 32px !important; .popup-actions { padding: 8px 8px 10px; }
min-height: 32px !important; .popup-action-btn { font-size: 11px; padding: 8px 4px; }
width: 32px;
height: 32px;
}
.event-popup .popup-header { gap: 2px; padding: 10px 12px; }
.event-popup { width: min(92vw, 340px); max-width: 92vw; }
/* Monatsansicht: Startzeit ausblenden — nur Titel anzeigen ──── */ /* Monatsansicht: Startzeit ausblenden — nur Titel anzeigen ──── */
.month-event-time { display: none; } .month-event-time { display: none; }

43
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 v14</title> <title>Calendarr v15</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;v14</button> <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v15</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;v14</button> <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v15</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 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> </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 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> </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 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> </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 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> </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 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> </div>
</div> </div>
@@ -372,19 +372,10 @@
<!-- Event Detail Popup --> <!-- Event Detail Popup -->
<div id="popup-event" class="event-popup hidden"> <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-header">
<div class="popup-color-dot" id="popup-color-dot"></div> <div class="popup-color-dot" id="popup-color-dot"></div>
<h4 id="popup-title"></h4> <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>
<div class="popup-body"> <div class="popup-body">
<div class="popup-time" id="popup-time"></div> <div class="popup-time" id="popup-time"></div>
@@ -392,6 +383,20 @@
<div class="popup-description" id="popup-description"></div> <div class="popup-description" id="popup-description"></div>
<div class="popup-calendar" id="popup-calendar"></div> <div class="popup-calendar" id="popup-calendar"></div>
</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 id="popup-copy-menu" class="popup-copy-menu hidden"></div>
</div> </div>
@@ -884,7 +889,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 v14</span> <span style="font-size:12px;color:var(--text-3)">Calendarr v15</span>
<button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button> <button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
</div> </div>
</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_every: 'Alle', rec_days: 'Tage', rec_weeks: 'Wochen', rec_months: 'Monate',
rec_ends: 'Endet', rec_never: 'Nie', rec_after_count: 'Nach Anzahl', rec_ends: 'Endet', rec_never: 'Nie', rec_after_count: 'Nach Anzahl',
rec_on_date: 'Am Datum', rec_occurrences: 'Termine', 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', edit_before_copy: 'Vor dem Kopieren bearbeiten',
event_updated: 'Termin aktualisiert', event_created: 'Termin erstellt', event_updated: 'Termin aktualisiert', event_created: 'Termin erstellt',
confirm_delete_event: '"{title}" wirklich löschen?', 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_every: 'Every', rec_days: 'days', rec_weeks: 'weeks', rec_months: 'months',
rec_ends: 'Ends', rec_never: 'Never', rec_after_count: 'After count', rec_ends: 'Ends', rec_never: 'Never', rec_after_count: 'After count',
rec_on_date: 'On date', rec_occurrences: 'occurrences', 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', edit_before_copy: 'Edit before copying',
event_updated: 'Event updated', event_created: 'Event created', event_updated: 'Event updated', event_created: 'Event created',
confirm_delete_event: 'Really delete "{title}"?', confirm_delete_event: 'Really delete "{title}"?',

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