feat(rennmaeuse): Tiere-Liste neu im Rennmaus-Filter-Design
Filter-UX aus dem Design: - Quick-Chip-Kategorien (Status/Geschlecht/Farbschlag/Herkunft) öffnen ein Bottom-Sheet mit Mehrfachauswahl (suchbar bei Farbschlag/Herkunft); aktive Filter als entfernbare Chips; Sortierung + "Externe Ahnen" als gleich große Chips (Sortierung öffnet dasselbe Drawer). - Neue zweizeilige Tierkarte (Name + Geschlechts-Kreis + Status-Badge, Meta-Zeile), cardIn/Chip/Sheet-Animationen, Titel blendet beim Scrollen aus. App-weit: - Design-Palette (Creme/Braun/Terrakotta), Hanken-Grotesk-Schrift und gemeinsamer --shadow-Token; obere "Rennmaus-Manager"-Titelleiste entfernt (mobil bleibt die untere Aktionsleiste); fixe Shell-Höhe, nur der Hauptbereich scrollt. Funktion: - Infinite Scroll via useInfiniteList (seitenweise) + IntersectionObserver-Sentinel. - Namensgenerator: Option männlich/weiblich/egal. - Mehrfach-OR-Filter über gridify orGroup; e2e an die neue UI angepasst. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,33 +1,247 @@
|
||||
/* FEAT-12a multi-select on the Tiere list — page-scoped. */
|
||||
|
||||
/* The sticky header supplies the top spacing, so opt out of the global .page top
|
||||
padding (otherwise the bar wouldn't pin flush to the top). */
|
||||
.gerbils-page {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.gerbil-row {
|
||||
/* DESIGN (Rennmaus Filter): cards ease in (fade + slight rise) instead of popping
|
||||
when the result set changes. React keys by id, so only newly-appearing rows
|
||||
replay this; rows that persist across a filter change are reused and stay put. */
|
||||
animation: gerbilRowIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
/* Light cascade so a fresh result set sweeps in rather than landing all at once.
|
||||
Capped at the first handful of rows; the rest share the last delay. */
|
||||
.gerbil-row:nth-child(1) { animation-delay: 0s; }
|
||||
.gerbil-row:nth-child(2) { animation-delay: 0.03s; }
|
||||
.gerbil-row:nth-child(3) { animation-delay: 0.06s; }
|
||||
.gerbil-row:nth-child(4) { animation-delay: 0.09s; }
|
||||
.gerbil-row:nth-child(5) { animation-delay: 0.12s; }
|
||||
.gerbil-row:nth-child(6) { animation-delay: 0.15s; }
|
||||
.gerbil-row:nth-child(n + 7) { animation-delay: 0.18s; }
|
||||
|
||||
@keyframes gerbilRowIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.gerbil-row {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rm-noresults {
|
||||
text-align: center;
|
||||
padding: 2.5rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.gerbil-row__check {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
min-height: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.gerbil-row > .gerbil-card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bulk-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.6rem 0.9rem;
|
||||
margin: 0.5rem 0;
|
||||
border: 1px solid var(--color-accent);
|
||||
border-radius: 0.5rem;
|
||||
background: var(--color-accent-soft);
|
||||
}
|
||||
|
||||
/* Consistent breathing room below the sticky header: between the header and the
|
||||
list (no active filters) and between the active chips and the first card. */
|
||||
.gerbils-page .card-list {
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
/* Infinite scroll: invisible sentinel observed to trigger the next page,
|
||||
plus a centered "loading more" line while a page is being appended. */
|
||||
.rmf-sentinel {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
.rmf-loadmore {
|
||||
text-align: center;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
/* ---------- DESIGN (Rennmaus Filter): sticky header that blends out on scroll ----------
|
||||
The whole header (title + search + filter pills + bar) sticks to the top; the list
|
||||
scrolls underneath. The title row collapses once a 1px sentinel above the header
|
||||
leaves the viewport. Negative margins let the bar span the app-main padding so its
|
||||
background/border reach edge-to-edge while pinned. */
|
||||
.gerbils-scrolltop {
|
||||
height: 1px;
|
||||
}
|
||||
.gerbils-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
background: var(--color-bg);
|
||||
/* Horizontal negative margins let the bar's background + border-bottom span the
|
||||
app-main padding edge-to-edge while pinned. The body scrolls, so the app-main
|
||||
top padding scrolls away and the bar pins flush to the viewport top (no gap). */
|
||||
margin: 0 -1rem;
|
||||
padding: 0.5rem 1rem 0.625rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.gerbils-topbar {
|
||||
margin: 0 -2rem;
|
||||
padding: 0.75rem 2rem 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gerbils-head h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.gerbils-head .muted {
|
||||
font-size: 14px;
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
.gerbils-head {
|
||||
overflow: hidden;
|
||||
/* Generous cap so the expanded state never clips when the "Neu" button wraps on
|
||||
narrow phones; the collapse still animates cleanly from this height to 0. */
|
||||
max-height: 200px;
|
||||
transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease,
|
||||
margin 0.28s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.gerbils-head--condensed {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.gerbils-head {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- DESIGN (Rennmaus Filter): new two-row list card ----------
|
||||
Name + gender circle + status badge on top, "Farbschlag · Herkunft · geb. Datum"
|
||||
below. Overrides the former single-row grid card from index.css. */
|
||||
.gerbil-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Override the old single-row card's `align-items: center` (index.css) — in a
|
||||
column flex that centers children horizontally and shoved the name off the left. */
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 18px;
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow);
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
transition: border-color 0.15s, box-shadow 0.15s,
|
||||
transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.gerbil-card:hover {
|
||||
background: var(--color-surface);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
|
||||
box-shadow: 0 2px 6px rgba(61, 46, 35, 0.1), 0 8px 22px rgba(61, 46, 35, 0.08);
|
||||
}
|
||||
.gerbil-card:active {
|
||||
transform: scale(0.992);
|
||||
}
|
||||
|
||||
.gerbil-card__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
.gerbil-card__name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gerbil-card__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gerbil-card__meta {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
.gerbil-card__meta-strong {
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
.gerbil-card__dot {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
/* Status badge: design size (12px/700), coloured per status below. */
|
||||
.gerbil-card .badge {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Gender circle (♂/♀/?) — colored disc, from the design's GeschlechtIcon. */
|
||||
.gerbil-sex {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.gerbil-sex--male {
|
||||
color: #5a7da8;
|
||||
background: color-mix(in srgb, #5a7da8 12%, #fff);
|
||||
}
|
||||
.gerbil-sex--female {
|
||||
color: #c2703d;
|
||||
background: color-mix(in srgb, #c2703d 12%, #fff);
|
||||
}
|
||||
.gerbil-sex--unknown {
|
||||
color: #9a938a;
|
||||
background: color-mix(in srgb, #9a938a 14%, #fff);
|
||||
}
|
||||
|
||||
/* Status badge coloured per status — scoped to cards so other pages stay as-is. */
|
||||
.gerbil-card .badge--breeding {
|
||||
color: #5e8c5a;
|
||||
background: color-mix(in srgb, #5e8c5a 12%, #fff);
|
||||
border: 1px solid color-mix(in srgb, #5e8c5a 30%, transparent);
|
||||
}
|
||||
.gerbil-card .badge--pet {
|
||||
color: #5a7da8;
|
||||
background: color-mix(in srgb, #5a7da8 12%, #fff);
|
||||
border: 1px solid color-mix(in srgb, #5a7da8 30%, transparent);
|
||||
}
|
||||
.gerbil-card .badge--forsale {
|
||||
color: #c2703d;
|
||||
background: color-mix(in srgb, #c2703d 12%, #fff);
|
||||
border: 1px solid color-mix(in srgb, #c2703d 30%, transparent);
|
||||
}
|
||||
.gerbil-card .badge--deceased {
|
||||
color: #8a847b;
|
||||
background: color-mix(in srgb, #8a847b 14%, #fff);
|
||||
border: 1px solid color-mix(in srgb, #8a847b 30%, transparent);
|
||||
}
|
||||
.gerbil-card .badge--givenaway {
|
||||
color: #b08e5c;
|
||||
background: color-mix(in srgb, #b08e5c 14%, #fff);
|
||||
border: 1px solid color-mix(in srgb, #b08e5c 32%, transparent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user