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}`