FDS2610/Finanzmanager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Listen: Zahlenspalten überall rechtsbündig

Browse source 
Die Klasse .rechts wurde in Listen von der spezifischeren Grundregel
"table.liste th, table.liste td { text-align: left }" überstimmt – die
Ausrichtung war also überall wirkungslos, nicht nur in den Berichten. Die
Regel steht jetzt bei den Tabellen-Grundregeln und gilt für alle Listen:
Kontenübersicht, Kontoblatt, Wertpapiere, Depotbuchungen, Kategorien und
die Berichte. Die berichtseigene Sonderregel entfällt dadurch.

Budgetplaner und Splittabellen bringen ihre eigene Ausrichtung mit und
bleiben unberührt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
fds2610-bot 2026-08-18 21:13:13 +02:00
parent 6ca247a40d
commit a5e50f8529
3 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Changes.md
View file

@ -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

13
public/static/app.css
View file

@ -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;

19
tests/e2e/specs/module.spec.js
View file

@ -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('/')