diff --git a/CHANGELOG.md b/CHANGELOG.md index 898b3d1..b25996c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/). ### Fixed +- Anmeldeseite: Die Marke zeigt wie die Seitenleiste nach dem Anmelden das Coinstack-Symbol + und den fetten, zweifarbigen Schriftzug „Finanzmanager“ statt einer grauen Statusmarke (#130) - Buchungsmaske: Eine falsche Splitsumme zeigte zwar die Fehlermeldung, riss aber über die Weiterleitung zur leeren Maske alle gerade erfassten Splitzeilen heraus; jetzt bleibt die Maske mit den eigenen Eingaben stehen, bis die Summe stimmt (#95) diff --git a/Changes.md b/Changes.md index 169f03c..2cc3e11 100644 --- a/Changes.md +++ b/Changes.md @@ -1,5 +1,12 @@ # Änderungen +## Anmeldeseite: Marke wie in der Seitenleiste (12.10.2026) + +- Anlass (#130): Icon und Schrift des Logos auf der Anmeldeseite wichen von der Marke im angemeldeten Zustand ab. +- Der schlichte Rahmen (`src/Views/layout/schlicht.php` – Anmeldung, Ersteinrichtung, Fehlerseite) zeigt jetzt das Coinstack-Symbol und den Schriftzug „Finanz**manager**“ im Schriftschnitt der Seitenleiste. Bisher erbte der Schriftzug die Regeln der kleinen Statusmarke (`.marke`) und stand grau mit Rahmen da. +- Weil die Karte hell ist, trägt die erste Worthälfte die Textfarbe und die zweite die lesbare Akzentfarbe (`--akzent-schrift`); im dunklen Thema entspricht das dem Blau der Seitenleiste. +- Tests: `tests/64_AnmeldeMarkeTest.php`, `tests/e2e/specs/smoke.spec.js`. + ## Depotbuchung erfassen: Stück, Kurs und Betrag rechnen sich (12.10.2026) - Anlass (#129): Bei Kauf und Verkauf sollten sich Betrag, Stück und Kurs gegenseitig ergeben – Betrag = Stück × Kurs. diff --git a/public/static/app.css b/public/static/app.css index a60176a..e0ce994 100644 --- a/public/static/app.css +++ b/public/static/app.css @@ -1782,12 +1782,23 @@ body.schlicht { max-width: 400px; } -.marke.gross { +/* Die Marke der Anmeldung gleicht der Seitenleiste: Symbol, Schriftschnitt und + zweite Worthälfte in Akzentfarbe. Weiß auf der hellen Karte wäre unsichtbar, + deshalb trägt die erste Hälfte die Textfarbe und die zweite die lesbare + Variante des Akzents. */ +.anmelde-marke { + display: flex; + align-items: center; + gap: .6rem; padding: 0 0 1.25rem; font-size: 1.3rem; - color: var(--text); + font-weight: 700; + letter-spacing: .01em; } +.anmelde-marke .marken-text { color: var(--text); } +.anmelde-marke .marken-text span { color: var(--akzent-schrift); } + /* ── Auswertungen ────────────────────────────────────────────────────────── */ /* Aufklappmenü ohne JavaScript:
in der Aktionsleiste. Ein eigenes diff --git a/src/Views/layout/schlicht.php b/src/Views/layout/schlicht.php index 8591f8f..cae61f3 100644 --- a/src/Views/layout/schlicht.php +++ b/src/Views/layout/schlicht.php @@ -22,7 +22,12 @@ use Finanzmanager\View;
-
Finanzmanager
+ +
+ + Finanzmanager +
diff --git a/tests/64_AnmeldeMarkeTest.php b/tests/64_AnmeldeMarkeTest.php new file mode 100644 index 0000000..4d56b04 --- /dev/null +++ b/tests/64_AnmeldeMarkeTest.php @@ -0,0 +1,78 @@ +anmeldungZeigtSymbolUndSchriftzug(); + $this->stilblattGleichtDerSeitenleiste(); + } + + private function anmeldungZeigtSymbolUndSchriftzug(): void + { + $seite = $this->rendereAnmeldung(); + + $this->assert( + str_contains($seite, '
'), + 'Die Anmeldeseite hat eine eigene Marke' + ); + $this->assert( + str_contains($seite, ''), + 'Die Marke führt das Coinstack-Symbol wie die Seitenleiste' + ); + $this->assert( + str_contains($seite, 'Finanzmanager'), + 'Der Schriftzug ist wie in der Seitenleiste zweigeteilt' + ); + $this->assert( + !str_contains($seite, 'class="marke gross"'), + 'Die alte Marke im Stil einer Statusmarke ist verschwunden' + ); + } + + private function stilblattGleichtDerSeitenleiste(): void + { + $css = (string)file_get_contents(dirname(__DIR__) . '/public/static/app.css'); + + $this->assert( + (bool)preg_match('/\.anmelde-marke\s*\{[^}]*font-weight:\s*700;/', $css), + 'Der Schriftzug ist fett wie in der Seitenleiste' + ); + $this->assert( + (bool)preg_match('/\.anmelde-marke\s*\{[^}]*display:\s*flex;[^}]*align-items:\s*center;/', $css), + 'Symbol und Schriftzug stehen nebeneinander auf einer Linie' + ); + $this->assert( + (bool)preg_match('/\.anmelde-marke \.marken-text span\s*\{\s*color:\s*var\(--akzent-schrift\);/', $css), + 'Die zweite Worthälfte trägt die Akzentfarbe' + ); + $this->assert( + !preg_match('/\.marke\.gross\s*\{/', $css), + 'Die alte Regel für die große Statusmarke ist entfernt' + ); + } + + private function rendereAnmeldung(): string + { + $csrfToken = 'test'; + $titel = 'Anmeldung'; + $flash = []; + + ob_start(); + try { + include dirname(__DIR__) . '/src/Views/auth/login.php'; + } finally { + $html = (string)ob_get_clean(); + } + return $html; + } +} diff --git a/tests/e2e/specs/smoke.spec.js b/tests/e2e/specs/smoke.spec.js index fa187c6..4f7744d 100644 --- a/tests/e2e/specs/smoke.spec.js +++ b/tests/e2e/specs/smoke.spec.js @@ -27,10 +27,33 @@ async function anmelden(page) { test.describe('Grundgerüst', () => { test('Anmeldeseite ist erreichbar', async ({ page }) => { await page.goto('/login') - await expect(page.locator('h1, .marke')).toContainText(/Finanzmanager|Anmeldung/) + await expect(page.locator('h1, .anmelde-marke')).toContainText(/Finanzmanager|Anmeldung/) await expect(page.locator('#benutzername')).toBeVisible() }) + test('Anmeldeseite zeigt dieselbe Marke wie die Seitenleiste', async ({ page }) => { + const stil = loc => loc.evaluate(k => { + const s = getComputedStyle(k) + return { familie: s.fontFamily, gewicht: s.fontWeight } + }) + + await page.goto('/login') + const marke = page.locator('.anmelde-marke') + await expect(marke.locator('img.marken-symbol')).toHaveAttribute('src', '/static/coinstack.png') + await expect(marke.locator('img.marken-symbol')).toBeVisible() + await expect(marke.locator('.marken-text')).toHaveText('Finanzmanager') + const anmeldung = await stil(marke.locator('.marken-text')) + // Die zweite Worthälfte hebt sich farblich ab, wie in der Seitenleiste. + const farben = await marke.locator('.marken-text').evaluate(k => [ + getComputedStyle(k).color, getComputedStyle(k.querySelector('span')).color, + ]) + expect(farben[0]).not.toBe(farben[1]) + + await anmelden(page) + const leiste = await stil(page.locator('.seitenleisten-marke .marken-text')) + expect(anmeldung).toEqual(leiste) + }) + test('Ohne Anmeldung führt jeder Weg zur Anmeldung', async ({ page }) => { await page.goto('/einstellungen') await expect(page).toHaveURL(/\/(login|einrichtung)/)