From a22c33bb12a04fb90f15e4813fc50d95d132ffcd Mon Sep 17 00:00:00 2001 From: fds2610-bot Date: Mon, 17 Aug 2026 23:12:35 +0200 Subject: [PATCH] Kontoformular zweispaltig MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Konto bearbeiten und Neues Konto zeigen ihre vierzehn Felder in zwei Spalten, damit alles ohne vertikales Scrollen auf einen Bildschirm passt. - Neue Formularvariante .formular.zweispaltig: 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 fällt das Formular auf eine Spalte zurück. - Feldreihenfolge zeilenweise; Namen, Werte und Feld-IDs unverändert. - E2E-Test: Kontoart steht rechts neben dem Namen, das Formular endet oberhalb der Fensterhöhe. Co-Authored-By: Claude Opus 5 --- Changes.md | 17 ++++ public/static/app.css | 39 ++++++++ src/Views/konten/formular.php | 146 +++++++++++++++++------------ tests/e2e/specs/stammdaten.spec.js | 18 ++++ 4 files changed, 159 insertions(+), 61 deletions(-) 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 -
+ - - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - +
+ + +
- - -

- Kontostand vor der ersten erfassten Buchung. Der QIF-Export enthält ihn nicht – - nach einem Import wird er hier je Konto nachgetragen. -

+
+ + +
- - +
+ + +

+ Kontostand vor der ersten erfassten Buchung. Der QIF-Export enthält ihn nicht – + nach einem Import wird er hier je Konto nachgetragen. +

+
- - +
+ + +
- - -

Kleinere Werte stehen in der Kontenübersicht weiter oben.

+
+ + +

Kleinere Werte stehen in der Kontenübersicht weiter oben.

+
- +
+ - -

- Entspricht der Σ-Spalte im FinanzManager. Konten, die kein eigenes Vermögen - darstellen – durchlaufende Auslagen etwa –, bleiben so aus der Gesamtsumme heraus, - erscheinen aber weiter in der Übersicht. -

+ +

+ Entspricht der Σ-Spalte im FinanzManager. Konten, die kein eigenes Vermögen + darstellen – durchlaufende Auslagen etwa –, bleiben so aus der Gesamtsumme heraus, + erscheinen aber weiter in der Übersicht. +

+
@@ -101,7 +125,7 @@ include __DIR__ . '/../layout/kopf.php'; -

Konto löschen

diff --git a/tests/e2e/specs/stammdaten.spec.js b/tests/e2e/specs/stammdaten.spec.js index 9c1adc2..b5f4f5e 100644 --- a/tests/e2e/specs/stammdaten.spec.js +++ b/tests/e2e/specs/stammdaten.spec.js @@ -89,6 +89,24 @@ test.describe('Stammdaten', () => { await expect(page.locator('tr', { hasText: name })).not.toContainText('ohne Σ') }) + // Das Kontoformular steht zweispaltig, damit alle Felder ohne vertikales + // Scrollen sichtbar sind. Geprüft wird an den Kästen: Kontoart steht rechts + // neben dem Namen, und das Formular endet oberhalb der Fensterhöhe. + test('Kontoformular steht zweispaltig und ohne Scrollen', async ({ page }) => { + await page.setViewportSize({ width: 1280, height: 900 }) + await page.goto('/konten/neu') + + const name = await page.locator('#name').boundingBox() + const kontoart = await page.locator('#kontoart').boundingBox() + + // Gleiche Zeile, zweite Spalte. + expect(Math.abs(name.y - kontoart.y)).toBeLessThan(5) + expect(kontoart.x).toBeGreaterThan(name.x + name.width) + + const knopf = await page.locator('.formular button[type="submit"]').first().boundingBox() + expect(knopf.y + knopf.height).toBeLessThan(900) + }) + test('Kategorie mit Unterkategorie anlegen', async ({ page }) => { const oben = `E2E Wohnen ${MARKE}` const unten = `Strom ${MARKE}`