diff --git a/Changes.md b/Changes.md index 0440a14..d8bfd70 100644 --- a/Changes.md +++ b/Changes.md @@ -1,5 +1,22 @@ # Änderungen +## Kontoformular zweispaltig (17.08.2026) + +*Konto bearbeiten* und *Neues Konto* zeigen ihre Felder in zwei Spalten. Alle Eingaben +stehen damit auf einem Bildschirm, ohne zu scrollen; bisher lagen die vierzehn Felder +untereinander. + +- Neue Formularvariante `.formular.zweispaltig` (`public/static/app.css`): ein Grid mit + zwei Spalten, je Feld ein `.feld` aus Beschriftung, Eingabe und Hinweis. Überschriften, + Knopfleiste und `.feld.ganz` laufen über beide Spalten. Unter 720 px Fensterbreite fällt + das Formular auf eine Spalte zurück. +- Feldreihenfolge zeilenweise: Name/Kontoart, Kontengruppe/Beschreibung, Bank/Kontonummer, + IBAN/BIC, Anfangssaldo/Kreditlimit, Sortierung/Kennzeichen. Namen, Werte und Feld-IDs + bleiben unverändert. +- Der Bereich *Konto löschen* darunter bekommt dieselbe Breite, bleibt aber einspaltig. +- E2E-Test in `tests/e2e/specs/stammdaten.spec.js`: Kontoart steht rechts neben dem Namen, + und das Formular endet oberhalb der Fensterhöhe. + ## Import und Export in zwei Formaten (17.08.2026) Aus der Kachel *QIF-Import* wird **Import/Export** mit je einem Knopf für beide Richtungen. diff --git a/public/static/app.css b/public/static/app.css index 1bf1805..d48e5b6 100644 --- a/public/static/app.css +++ b/public/static/app.css @@ -1231,6 +1231,45 @@ table.kostentabelle .gruppenzeile th { padding-top: .7rem; font-weight: 600; } margin-top: .6rem; } +/* Zweispaltiges Formular: je Feld ein .feld mit Beschriftung, Eingabe und + Hinweis, zwei davon nebeneinander. Lange Formulare – das Kontoformular etwa – + bleiben so ohne vertikales Scrollen einsehbar. */ +.formular.zweispaltig { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + align-items: start; + gap: 1rem 1.5rem; +} + +.formular.breit.zweispaltig { max-width: 900px; } + +.formular.zweispaltig .feld { + display: flex; + flex-direction: column; + gap: .3rem; +} + +.formular.zweispaltig .feld label { margin-top: 0; } + +.formular.zweispaltig .feld .feldhinweis { margin-top: 0; } + +/* Über beide Spalten: verstecktes CSRF-Feld, Überschriften, Knopfleiste und + Felder, die für eine halbe Zeile zu breit sind. */ +.formular.zweispaltig > input[type="hidden"], +.formular.zweispaltig > h3, +.formular.zweispaltig > p, +.formular.zweispaltig > .knopfleiste, +.formular.zweispaltig .feld.ganz { grid-column: 1 / -1; } + +/* Die Abstände kommen im Grid aus dem gap – eigene Ränder addierten sich dazu. */ +.formular.zweispaltig > h3 { margin: 0; } +.formular.zweispaltig > p { margin: 0; } +.formular.zweispaltig > .knopfleiste { margin-top: .5rem; } + +@media (max-width: 720px) { + .formular.zweispaltig { grid-template-columns: 1fr; } +} + .formular label.ankreuzfeld { display: flex; align-items: center; diff --git a/src/Views/konten/formular.php b/src/Views/konten/formular.php index 629330c..2fe8c3e 100644 --- a/src/Views/konten/formular.php +++ b/src/Views/konten/formular.php @@ -19,80 +19,104 @@ include __DIR__ . '/../layout/kopf.php'; Zurück zur Kontenübersicht -