rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: Formular-Buttons in Modal-Footer + Kalender-Icons amber

Browse source 
- 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
This commit is contained in:
rene 2026-04-13 21:12:15 +02:00
parent e5492841ec
commit 956e34db88
6 changed files with 57 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

8
backend/static/css/components.css
View file

@ -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 {

17
backend/static/js/pages/diary.js
View file

@ -417,16 +417,17 @@ window.Page_diary = (() => {
object-fit:cover;border-radius:var(--radius-md);margin-top:var(--space-2)">
</div>
` : ''}
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-4)">
<button type="button" class="btn btn-secondary flex-1" id="diary-form-cancel">Abbrechen</button>
<button type="submit" class="btn btn-primary flex-1">
${isEdit ? 'Speichern' : 'Erstellen'}
</button>
</div>
</form>
`;
UI.modal.open({ title: isEdit ? 'Eintrag bearbeiten' : 'Neuer Eintrag', body });
const footer = `
<button type="button" class="btn btn-secondary flex-1" id="diary-form-cancel">Abbrechen</button>
<button type="submit" form="diary-form" class="btn btn-primary flex-1">
${isEdit ? 'Speichern' : 'Erstellen'}
</button>
`;
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

27
backend/static/js/pages/dog-profile.js
View file

@ -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: `
<button type="button" class="btn btn-secondary flex-1" id="dp-form-cancel">Abbrechen</button>
<button type="submit" form="dp-form" class="btn btn-primary flex-1">🐕 Hund anlegen</button>
`,
});
_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: `
<button type="button" class="btn btn-secondary flex-1" id="dp-form-cancel">Abbrechen</button>
<button type="submit" form="dp-form" class="btn btn-primary flex-1">Speichern</button>
`,
});
_bindForm(dog, true);
}
@ -310,13 +324,14 @@ window.Page_dog_profile = (() => {
</div>
</div>
${!inModal ? `
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-4)">
${(dog || inModal) ? `<button type="button" class="btn btn-secondary flex-1"
id="dp-form-cancel">Abbrechen</button>` : ''}
${dog ? `<button type="button" class="btn btn-secondary flex-1"
id="dp-form-cancel">Abbrechen</button>` : ''}
<button type="submit" class="btn btn-primary flex-1">
${dog ? 'Speichern' : '🐕 Hund anlegen'}
</button>
</div>
</div>` : ''}
${dog ? `
<div style="margin-top:var(--space-5);padding-top:var(--space-4);
@ -380,7 +395,7 @@ window.Page_dog_profile = (() => {
form.addEventListener('submit', async e => {
e.preventDefault();
const btn = form.querySelector('[type="submit"]');
const btn = document.querySelector('[form="dp-form"][type="submit"]') || form.querySelector('[type="submit"]');
const fd = UI.formData(form);
if (!fd.name?.trim()) {

23
backend/static/js/pages/health.js
View file

@ -782,15 +782,16 @@ window.Page_health = (() => {
${extraFields}
${notizField}
${uploadField}
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-4)">
<button type="button" class="btn btn-secondary flex-1" id="health-form-cancel">Abbrechen</button>
<button type="submit" class="btn btn-primary flex-1">${isEdit ? 'Speichern' : 'Erstellen'}</button>
</div>
</form>
`;
const footer = `
<button type="button" class="btn btn-secondary flex-1" id="health-form-cancel">Abbrechen</button>
<button type="submit" form="health-form" class="btn btn-primary flex-1">${isEdit ? 'Speichern' : 'Erstellen'}</button>
`;
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)
</label>
</div>` : ''}
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-4)">
<button type="button" class="btn btn-secondary flex-1" id="praxis-cancel">Abbrechen</button>
<button type="submit" class="btn btn-primary flex-1">${isEdit ? 'Speichern' : 'Hinzufügen'}</button>
</div>
</form>
`,
footer: `
<button type="button" class="btn btn-secondary flex-1" id="praxis-cancel">Abbrechen</button>
<button type="submit" form="praxis-form" class="btn btn-primary flex-1">${isEdit ? 'Speichern' : 'Hinzufügen'}</button>
`,
});
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 () => {

18
backend/static/js/pages/poison.js
View file

@ -505,17 +505,17 @@ window.Page_poison = (() => {
border-radius:var(--radius-md);margin-top:var(--space-2)">
</div>
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-4)">
<button type="button" class="btn btn-secondary flex-1"
id="pf-cancel">Abbrechen</button>
<button type="submit" class="btn btn-danger flex-1">
⚠️ Meldung abschicken
</button>
</div>
</form>
`;
UI.modal.open({ title: '⚠️ Giftköder melden', body });
const footer = `
<button type="button" class="btn btn-secondary flex-1" id="pf-cancel">Abbrechen</button>
<button type="submit" form="poison-form" class="btn btn-danger flex-1">
⚠️ Meldung abschicken
</button>
`;
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) {

2
backend/static/sw.js
View file

@ -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)