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

- 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

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 () => {