UX-MOBILE-1: FilterPanel — einklappbare Filter auf Mobil (390px)
Neues FilterPanel-Muster (src/components/FilterPanel.tsx + filterPanel.css): - Mobil (<768px): Suchfeld immer sichtbar; alle weiteren Filter hinter einem 'Filter (N)'-Button eingeklappt (Badge = Anzahl aktiver Nicht-Default-Filter). Tippen öffnet/schließt den Drawer. 'Filter zurücksetzen' im Drawer. - Desktop (>=768px): Toggle versteckt, Drawer als display:contents → alle Controls inline in der bestehenden .filters-Flexzeile, wie bisher. Auf GerbilsPage, WuerfeListPage und AnfragenPage ausgerollt. BeckenPage/KontaktePage nur ein Suchfeld → kein Panel nötig. e2e: filter-panel.spec.ts (8 Tests, phone+desktop); bestand/tiere/anfragen-Specs erhalten openFilterPanel-Aufruf vor Drawer-Controls; fixtures.ts +openFilterPanel(). Vitest 78 / e2e 102 grün. Mobil-Pass (390px, Durchsicht): Hauptproblem behoben. Beobachtete Restpunkte für god (nicht selbst gefixed): - .genotype-table in Genetik/Probeverpaarung: Genotyp-Strings können eng werden - Stammbaum (react-d3-tree SVG): kein explizites mobile Viewport-Handling - BreedingResultView Genotyp-Detail-Tabelle: ggf. horizontal scrollbar-los Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
/** BESTAND-FILTER: die Tiere-Liste zeigt standardmäßig nur den eigenen Bestand. */
|
||||
import { de, expect, gotoSection, skipUnlessMock, test } from './fixtures'
|
||||
import { de, expect, gotoSection, openFilterPanel, skipUnlessMock, test } from './fixtures'
|
||||
|
||||
const t = de.pages.gerbils
|
||||
|
||||
@@ -14,11 +14,13 @@ test('Tiere-Liste blendet externe Ahnen standardmäßig aus', async ({ page }) =
|
||||
await expect(page.locator('.gerbil-row', { hasText: 'Max' })).toHaveCount(0)
|
||||
})
|
||||
|
||||
test('Toggle „Externe Ahnen einblenden“ zeigt externe Tiere mit Extern-Markierung', async ({ page }) => {
|
||||
test('Toggle „Externe Ahnen einblenden” zeigt externe Tiere mit Extern-Markierung', async ({ page }) => {
|
||||
skipUnlessMock()
|
||||
await gotoSection(page, de.nav.gerbils)
|
||||
await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()
|
||||
|
||||
// UX-MOBILE-1: Checkbox liegt im Filter-Drawer — auf Mobil erst öffnen.
|
||||
await openFilterPanel(page)
|
||||
await page.getByRole('checkbox', { name: t.filters.showExternal }).check()
|
||||
|
||||
const maxRow = page.locator('.gerbil-row', { hasText: 'Max' })
|
||||
|
||||
Reference in New Issue
Block a user