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 +121 -34
4 changed files with 121 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9013f57d02 - Show all commits

131
frontend/css/app.css
View File

@@ -55,49 +55,129 @@ a { color: var(--primary); text-decoration: none; }
.flex-col { display: flex; flex-direction: column; } .flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-8 { gap: 8px; }
/* ── Buttons ────────────────────────────────────────────── */ /* ── Buttons ──────────────────────────────────────────────
Modern pill style: fully rounded, subtle coloured shadow on the
prominent variants, lift on hover, snap back on press. The
primary-coloured glow follows --primary via color-mix(), so it adapts
when the user changes the theme colour in settings. */
.btn { .btn {
display: inline-flex; align-items: center; gap: 6px; display: inline-flex; align-items: center; justify-content: center;
padding: 8px 16px; border-radius: 20px; gap: 8px;
font-weight: 500; transition: background var(--transition), color var(--transition); padding: 10px 22px;
border-radius: 999px;
font-weight: 500; font-size: 14px;
letter-spacing: .1px;
white-space: nowrap; white-space: nowrap;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
background var(--transition),
color var(--transition),
border-color var(--transition),
box-shadow .18s ease,
transform .12s ease,
filter var(--transition);
} }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .05s; }
.btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.btn-primary { .btn-primary {
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
box-shadow: 0 2px 8px rgba(66,133,244,.28);
box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
} }
.btn-primary:hover { filter: brightness(1.12); } .btn-primary:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(66,133,244,.42);
box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent);
}
.btn-secondary { .btn-secondary {
background: var(--bg-surface); background: var(--bg-surface);
color: var(--text-1); color: var(--text-1);
border: 1px solid var(--border); border: 1px solid var(--border);
} }
.btn-secondary:hover { background: var(--bg-hover); } .btn-secondary:hover {
.btn-ghost { color: var(--primary); } background: var(--bg-hover);
.btn-ghost:hover { background: var(--primary-dim); } border-color: var(--primary);
.btn-danger { background: var(--accent); color: #fff; } transform: translateY(-1px);
.btn-danger:hover { filter: brightness(1.1); } }
.btn-full { width: 100%; justify-content: center; }
.btn-ghost {
color: var(--primary);
background: transparent;
}
.btn-ghost:hover {
background: var(--primary-dim);
transform: translateY(-1px);
}
.btn-danger {
background: var(--accent);
color: #fff;
box-shadow: 0 2px 8px rgba(234,67,53,.28);
box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-danger:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(234,67,53,.42);
box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn-full { width: 100%; }
/* The big sidebar "Erstellen" button: same pill aesthetic, primary tinted,
lives in the calm dark sidebar so the shadow is a touch stronger. */
.btn-fab { .btn-fab {
display: flex; align-items: center; gap: 10px; display: flex; align-items: center; gap: 10px;
padding: 12px 20px; border-radius: 24px; padding: 12px 22px;
background: var(--bg-surface); border-radius: 999px;
color: var(--text-1); background: var(--primary);
color: #fff;
font-weight: 600; font-weight: 600;
box-shadow: var(--shadow);
margin: 16px 12px 8px; margin: 16px 12px 8px;
transition: background var(--transition), box-shadow var(--transition); box-shadow: 0 4px 14px rgba(66,133,244,.32);
box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
transition:
background var(--transition),
box-shadow .18s ease,
transform .12s ease,
filter var(--transition);
} }
.btn-fab:hover { background: var(--bg-hover); box-shadow: var(--shadow-lg); } .btn-fab:hover {
filter: brightness(1.08);
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(66,133,244,.5);
box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 50%, transparent);
}
.btn-fab:active { transform: translateY(0) scale(.985); }
/* Circular icon buttons (topbar nav, modal close, etc.) */
.icon-btn { .icon-btn {
display: inline-flex; align-items: center; justify-content: center; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; width: 40px; height: 40px;
color: var(--text-2); transition: background var(--transition); border-radius: 50%;
color: var(--text-2);
flex-shrink: 0; flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
transition:
background var(--transition),
color var(--transition),
transform .1s ease;
} }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; } .icon-btn svg { width: 20px; height: 20px; fill: currentColor; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-1); } .icon-btn:hover { background: var(--bg-hover); color: var(--text-1); }
.icon-btn:active { transform: scale(.92); }
.icon-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* ── Auth Screens ───────────────────────────────────────── */ /* ── Auth Screens ───────────────────────────────────────── */
.auth-screen { .auth-screen {
@@ -140,15 +220,22 @@ a { color: var(--primary); text-decoration: none; }
.form-group input, .form-group select, .form-group textarea { .form-group input, .form-group select, .form-group textarea {
background: var(--bg-app); background: var(--bg-app);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-sm); border-radius: 8px;
padding: 10px 12px; padding: 11px 14px;
color: var(--text-1); color: var(--text-1);
outline: none; outline: none;
transition: border-color var(--transition); transition: border-color var(--transition), box-shadow var(--transition);
width: 100%; width: 100%;
} }
.form-group input:hover:not(:focus),
.form-group select:hover:not(:focus),
.form-group textarea:hover:not(:focus) {
border-color: var(--text-3);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color: var(--primary); border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(66,133,244,.18);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
} }
.form-group textarea { resize: vertical; } .form-group textarea { resize: vertical; }

20
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 v12</title> <title>Calendarr v13</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;v12</button> <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v13</button>
</div> </div>
<!-- ─── MAIN APP ──────────────────────────────────────────── --> <!-- ─── MAIN APP ──────────────────────────────────────────── -->
@@ -185,7 +185,7 @@
<span data-i18n="my_calendars">Meine Kalender</span> <span data-i18n="my_calendars">Meine Kalender</span>
<div class="add-cal-dropdown-wrap"> <div class="add-cal-dropdown-wrap">
<button class="icon-btn mini-btn" id="btn-add-cal" title="Kalender hinzufügen"> <button class="icon-btn mini-btn" id="btn-add-cal" title="Kalender hinzufügen">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v12h-2v-6H5v-2h6V5h2v12h6v2z"/></svg> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
</button> </button>
<div class="add-cal-dropdown hidden" id="add-cal-dropdown"> <div class="add-cal-dropdown hidden" id="add-cal-dropdown">
<button data-action="local">Lokaler Kalender</button> <button data-action="local">Lokaler Kalender</button>
@@ -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;v12</button> <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v13</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 10h5v12H7z"/></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 10h5v13H7z"/></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 10h5v12H7z"/></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 10h5v13H7z"/></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 10h5v12H7z"/></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 10h5v13H7z"/></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 10h5v12H7z"/></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 10h5v13H7z"/></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 10h5v12H7z"/></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 10h5v13H7z"/></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 v12</span> <span style="font-size:12px;color:var(--text-3)">Calendarr v13</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 = 'v12'; export const APP_VERSION = 'v13';

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