From 956e34db886292772c78b7ce5e51d3d156957e03 Mon Sep 17 00:00:00 2001 From: rene Date: Mon, 13 Apr 2026 21:12:15 +0200 Subject: [PATCH] UX: Formular-Buttons in Modal-Footer + Kalender-Icons amber MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Alle Formular-Buttons (health, praxen, diary, dog-profile, poison) aus dem scrollbaren Body in den festen Modal-Footer verschoben (form="form-id" Attribut, btn-Suche via document.querySelector) - Kalender-Icon Filter korrigiert: brightness(0)+invert(0.55) vermeidet Channel-Clipping bei sepia auf Weiß → ergibt echtes Amber (~#C4843A) - SW-Cache: by-v18 → by-v19 --- backend/static/css/components.css | 8 +++++--- backend/static/js/pages/diary.js | 17 ++++++++-------- backend/static/js/pages/dog-profile.js | 27 ++++++++++++++++++++------ backend/static/js/pages/health.js | 23 +++++++++++----------- backend/static/js/pages/poison.js | 18 ++++++++--------- backend/static/sw.js | 2 +- 6 files changed, 57 insertions(+), 38 deletions(-) diff --git a/backend/static/css/components.css b/backend/static/css/components.css index 8904fb6..1c8b332 100644 --- a/backend/static/css/components.css +++ b/backend/static/css/components.css @@ -239,8 +239,10 @@ .form-control::placeholder { color: var(--c-text-muted); } -/* Kalender-Icon in Datumseingaben: Amber statt weiß/schwarz - color-scheme: light → Browser rendert schwarzes Icon → Filter tönt es amber */ +/* Kalender-Icon in Datumseingaben: Amber statt schwarz + color-scheme: light → schwarzes Icon + invert(0.55) → mittleres Grau (vermeidet Clipping bei sepia auf Weiß) + → sepia → saturate → brightness auf ~#C4843A bringen */ input[type="date"], input[type="time"] { color-scheme: light; @@ -248,7 +250,7 @@ input[type="time"] { input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; - filter: sepia(1) saturate(1.8) hue-rotate(-8deg) brightness(0.85); + filter: brightness(0) invert(0.55) sepia(1) saturate(4) brightness(0.77); } .form-control:focus { diff --git a/backend/static/js/pages/diary.js b/backend/static/js/pages/diary.js index 0bb4f05..de3520a 100644 --- a/backend/static/js/pages/diary.js +++ b/backend/static/js/pages/diary.js @@ -417,16 +417,17 @@ window.Page_diary = (() => { object-fit:cover;border-radius:var(--radius-md);margin-top:var(--space-2)"> ` : ''} -
- - -
`; - UI.modal.open({ title: isEdit ? 'Eintrag bearbeiten' : 'Neuer Eintrag', body }); + const footer = ` + + + `; + + UI.modal.open({ title: isEdit ? 'Eintrag bearbeiten' : 'Neuer Eintrag', body, footer }); const form = document.getElementById('diary-form'); @@ -454,7 +455,7 @@ window.Page_diary = (() => { form.addEventListener('submit', async e => { e.preventDefault(); - const submitBtn = form.querySelector('[type="submit"]'); + const submitBtn = document.querySelector('[form="diary-form"][type="submit"]') || form.querySelector('[type="submit"]'); const fd = UI.formData(form); // dog_ids zusammenbauen: aktiver Hund + gewählte weitere diff --git a/backend/static/js/pages/dog-profile.js b/backend/static/js/pages/dog-profile.js index e8fa20c..ea66e3e 100644 --- a/backend/static/js/pages/dog-profile.js +++ b/backend/static/js/pages/dog-profile.js @@ -210,7 +210,14 @@ window.Page_dog_profile = (() => { // NEUEN HUND ANLEGEN (Modal) — auch aufrufbar via addNew() // ---------------------------------------------------------- function _openCreateModal() { - UI.modal.open({ title: 'Weiteren Hund anlegen', body: _formHTML(null, true) }); + UI.modal.open({ + title: 'Weiteren Hund anlegen', + body: _formHTML(null, true), + footer: ` + + + `, + }); _bindForm(null, true); } @@ -218,7 +225,14 @@ window.Page_dog_profile = (() => { // BEARBEITEN (Modal) // ---------------------------------------------------------- function _openEditModal(dog) { - UI.modal.open({ title: `${dog.name} bearbeiten`, body: _formHTML(dog, true) }); + UI.modal.open({ + title: `${dog.name} bearbeiten`, + body: _formHTML(dog, true), + footer: ` + + + `, + }); _bindForm(dog, true); } @@ -310,13 +324,14 @@ window.Page_dog_profile = (() => { + ${!inModal ? `
- ${(dog || inModal) ? `` : ''} + ${dog ? `` : ''} -
+ ` : ''} ${dog ? `
{ ${extraFields} ${notizField} ${uploadField} -
- - -
`; + const footer = ` + + + `; + const tabInfo = TABS.find(tab => tab.key === t) || TABS[0]; - UI.modal.open({ title: `${tabInfo.icon} ${isEdit ? 'Bearbeiten' : tabInfo.label}`, body }); + UI.modal.open({ title: `${tabInfo.icon} ${isEdit ? 'Bearbeiten' : tabInfo.label}`, body, footer }); const form = document.getElementById('health-form'); setTimeout(() => { @@ -807,7 +808,7 @@ window.Page_health = (() => { form.addEventListener('submit', async e => { e.preventDefault(); - const btn = form.querySelector('[type="submit"]'); + const btn = document.querySelector('[form="health-form"][type="submit"]') || form.querySelector('[type="submit"]'); const fd = UI.formData(form); await UI.asyncButton(btn, async () => { @@ -1178,19 +1179,19 @@ window.Page_health = (() => { Als ehemalige Praxis markieren (bei Umzug / Arztwechsel)
` : ''} -
- - -
`, + footer: ` + + + `, }); document.getElementById('praxis-cancel')?.addEventListener('click', UI.modal.close); document.getElementById('praxis-form')?.addEventListener('submit', async e => { e.preventDefault(); - const btn = e.target.querySelector('[type="submit"]'); + const btn = document.querySelector('[form="praxis-form"][type="submit"]') || e.target.querySelector('[type="submit"]'); const fd = UI.formData(e.target); await UI.asyncButton(btn, async () => { diff --git a/backend/static/js/pages/poison.js b/backend/static/js/pages/poison.js index ab04687..9fc7c96 100644 --- a/backend/static/js/pages/poison.js +++ b/backend/static/js/pages/poison.js @@ -505,17 +505,17 @@ window.Page_poison = (() => { border-radius:var(--radius-md);margin-top:var(--space-2)"> -
- - -
`; - UI.modal.open({ title: '⚠️ Giftköder melden', body }); + const footer = ` + + + `; + + UI.modal.open({ title: '⚠️ Giftköder melden', body, footer }); // Standort vorausfüllen wenn bekannt if (_userPos) { @@ -559,7 +559,7 @@ window.Page_poison = (() => { // Formular absenden document.getElementById('poison-form')?.addEventListener('submit', async e => { e.preventDefault(); - const submitBtn = e.target.querySelector('[type="submit"]'); + const submitBtn = document.querySelector('[form="poison-form"][type="submit"]') || e.target.querySelector('[type="submit"]'); const fd = UI.formData(e.target); if (!fd.lat || !fd.lon) { diff --git a/backend/static/sw.js b/backend/static/sw.js index 31ea824..a2d2c54 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications ============================================================ */ -const CACHE_VERSION = 'by-v18'; +const CACHE_VERSION = 'by-v19'; const CACHE_STATIC = `${CACHE_VERSION}-static`; // Diese Dateien werden beim Install gecacht (App Shell)