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:
@@ -7,6 +7,7 @@ import { andFilter, condition, type GridifyQuery } from '../api/gridify'
|
||||
import type { Litter } from '../api/types'
|
||||
import { useApi } from '../hooks/useApi'
|
||||
import { formatDate } from '../format/labels'
|
||||
import { FilterPanel } from '../components/FilterPanel'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
@@ -111,7 +112,10 @@ export default function WuerfeListPage() {
|
||||
|
||||
{tab === 'litters' && (
|
||||
<>
|
||||
<div className="filters">
|
||||
<FilterPanel
|
||||
activeCount={year !== '' ? 1 : 0}
|
||||
onReset={() => { setYear(''); setSort('dateDesc'); setPage(1) }}
|
||||
>
|
||||
<label className="field">
|
||||
<span>{t.filterYear}</span>
|
||||
<select
|
||||
@@ -136,7 +140,7 @@ export default function WuerfeListPage() {
|
||||
<option value="dateAsc">{t.sort.dateAsc}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</FilterPanel>
|
||||
|
||||
{litters.loading && <p className="muted">{de.common.loading}</p>}
|
||||
{litters.error && (
|
||||
|
||||
Reference in New Issue
Block a user