diff --git a/Changes.md b/Changes.md index d8a8c7d..67e0414 100644 --- a/Changes.md +++ b/Changes.md @@ -12,10 +12,11 @@ bisherigen Verhalten: Die Tabelle darf hinausragen und waagerecht scrollen, stat Dabei fiel auf, dass die Zahlenspalten **gar nicht rechtsbündig** standen: `.rechts` und `.betrag` sind nur einfach spezifisch, `table.liste th, table.liste td { text-align: left }` weiter oben im Stilblatt ist spezifischer und gewann. Solange die Spalten über den Bildschirm -gezogen waren, fiel es kaum auf – in der schmalen Tabelle sofort. Für Berichte steht die -Ausrichtung jetzt ausdrücklich (`table.liste.bericht td.rechts`), sodass die letzte Spalte – -die Betragsspalte – ihre Zahlen rechtsbündig an ihrer eigenen Kante ausrichtet. Die übrigen -Listen (Kontenübersicht, Wertpapiere) sind unverändert geblieben. +gezogen waren, fiel es kaum auf – in der schmalen Tabelle sofort. Die Ausrichtung steht jetzt +für **alle Listen** ausdrücklich (`table.liste th.rechts, table.liste td.rechts`): Beträge, +Salden, Stückzahlen und Aktionsspalten stehen überall rechts, wo `.rechts` gesetzt ist – +Kontenübersicht, Kontoblatt, Wertpapiere, Depotbuchungen, Kategorien und die Berichte +gleichermaßen. Die Klasse tut damit endlich das, was ihr Name sagt. Der neue E2E-Test misst alles drei: dass der Summenbericht deutlich schmaler bleibt als sein Rahmen und links wie rechts gleich viel Luft behält, dass die letzte Spalte diff --git a/public/static/app.css b/public/static/app.css index f0d0644..f091782 100644 --- a/public/static/app.css +++ b/public/static/app.css @@ -762,6 +762,13 @@ table.liste tbody tr:hover { background: var(--flaeche-gedaempft); } .rechts { text-align: right; } +/* In Listen reicht `.rechts` allein nicht: `table.liste th, table.liste td` + weiter oben setzt text-align auf links und ist spezifischer. Zahlen- und + Aktionsspalten stehen deshalb ausdrücklich rechts – die Klasse tut damit + überall das, was ihr Name sagt. */ +table.liste th.rechts, +table.liste td.rechts { text-align: right; } + .betrag { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; @@ -1751,12 +1758,6 @@ table.liste.bericht { sonst quetschte max-width die zwölf Monatsspalten in Umbrüche. */ .breittabelle table.liste.bericht { max-width: none; } -/* `.rechts` allein reicht hier nicht: `table.liste th, td` setzt weiter oben - text-align auf links und ist spezifischer. Die Zahlenspalten – allen voran - die letzte – stehen deshalb ausdrücklich rechtsbündig. */ -table.liste.bericht th.rechts, -table.liste.bericht td.rechts { text-align: right; } - /* Abschnittsüberschrift „Einnahmen“ / „Ausgaben“. */ table.bericht tr.abschnittszeile th { text-align: left; diff --git a/tests/e2e/specs/module.spec.js b/tests/e2e/specs/module.spec.js index 1356400..bc4f1b3 100644 --- a/tests/e2e/specs/module.spec.js +++ b/tests/e2e/specs/module.spec.js @@ -54,6 +54,25 @@ test.describe('Module der Phasen 4 bis 7', () => { } }) + test('Zahlenspalten stehen in allen Listen rechtsbündig', async ({ page }) => { + // `.rechts` markiert Zahlen- und Aktionsspalten. Die Klasse muss die + // linksbündige Grundregel der Listen überall schlagen – nicht nur in den + // Berichten, wo es zuerst auffiel. + for (const pfad of ['/konten', '/wertpapiere', '/wertpapiere/buchungen']) { + await page.goto(pfad) + + for (const art of ['th', 'td']) { + const zellen = page.locator(`table.liste ${art}.rechts`) + const anzahl = await zellen.count() + expect(anzahl, `${pfad}: ${art}.rechts vorhanden`).toBeGreaterThan(0) + + for (const stelle of [0, anzahl - 1]) { + await expect(zellen.nth(stelle)).toHaveCSS('text-align', 'right') + } + } + } + }) + test('Das Cockpit zeichnet seine Kacheln', async ({ page }) => { await page.goto('/')