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:
@@ -47,11 +47,6 @@ export default function AppShell() {
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="app-header">
|
||||
<span className="app-logo" aria-hidden="true"><GerbilIcon size="1.5rem" /></span>
|
||||
<h1 className="app-title">{de.app.title}</h1>
|
||||
</header>
|
||||
|
||||
<nav className="app-nav" aria-label={de.nav.mainNavigation}>
|
||||
<div className="nav-primary">
|
||||
{PRIMARY.map((item) => (
|
||||
|
||||
271
gerbil-manager-web/src/components/GerbilFilterBar.tsx
Normal file
271
gerbil-manager-web/src/components/GerbilFilterBar.tsx
Normal file
@@ -0,0 +1,271 @@
|
||||
/**
|
||||
* DESIGN (Rennmaus Filter.html): mobile-first filter UX —
|
||||
* 1. a horizontal "Quick-Chips" pill row (one pill per category, with a count badge),
|
||||
* 2. tapping a pill opens a bottom-sheet of multi-select options (✓ checkboxes,
|
||||
* searchable for long lists like Farbschlag / Herkunft),
|
||||
* 3. active selections appear ABOVE the list as removable chips (so they scroll
|
||||
* away with the list), with "Alle löschen".
|
||||
*
|
||||
* The user landed on the Quick-Chips concept, dezent style, brown accent. Colors
|
||||
* come from the app's existing tokens. `GerbilFilterBar` is the pill row + sheet;
|
||||
* `ActiveFilterChips` renders the removable chips and is placed above the list.
|
||||
*/
|
||||
import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { de } from '../strings/de'
|
||||
import './gerbilFilterBar.css'
|
||||
|
||||
export interface FilterOption {
|
||||
value: string
|
||||
label: string
|
||||
/** Optional swatch dot (used for status colors). */
|
||||
color?: string
|
||||
/** Optional leading symbol (used for gender ♂ ♀ ?). */
|
||||
symbol?: string
|
||||
}
|
||||
|
||||
export interface FilterCategory {
|
||||
/** Matches the Gridify field / the key into the selected map. */
|
||||
key: string
|
||||
label: string
|
||||
/** Renders a search box above the option list (for long lists). */
|
||||
searchable?: boolean
|
||||
options: FilterOption[]
|
||||
}
|
||||
|
||||
function countFor(selected: Record<string, string[]>, key: string): number {
|
||||
return (selected[key] ?? []).length
|
||||
}
|
||||
|
||||
interface GerbilFilterBarProps {
|
||||
categories: FilterCategory[]
|
||||
selected: Record<string, string[]>
|
||||
onToggle: (key: string, value: string) => void
|
||||
}
|
||||
|
||||
/** The Quick-Chips pill row + the category bottom-sheet. */
|
||||
export function GerbilFilterBar({ categories, selected, onToggle }: GerbilFilterBarProps) {
|
||||
const t = de.filterBar
|
||||
const [activeKey, setActiveKey] = useState<string | null>(null)
|
||||
const activeCat = categories.find((c) => c.key === activeKey) ?? null
|
||||
|
||||
return (
|
||||
<div className="rmf">
|
||||
<div className="rmf-quickrow" role="group" aria-label={t.title}>
|
||||
{categories.map((cat) => {
|
||||
const n = countFor(selected, cat.key)
|
||||
return (
|
||||
<button
|
||||
key={cat.key}
|
||||
type="button"
|
||||
className={'rmf-pill' + (n > 0 ? ' is-on' : '')}
|
||||
onClick={() => setActiveKey(cat.key)}
|
||||
aria-haspopup="dialog"
|
||||
>
|
||||
{cat.label}
|
||||
{n > 0 && <span className="rmf-pill-count">{n}</span>}
|
||||
<span className="rmf-pill-chev" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{activeCat && (
|
||||
<FilterSheet
|
||||
cat={activeCat}
|
||||
selected={selected[activeCat.key] ?? []}
|
||||
onToggle={onToggle}
|
||||
onClose={() => setActiveKey(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ActiveFilterChipsProps {
|
||||
categories: FilterCategory[]
|
||||
selected: Record<string, string[]>
|
||||
onRemove: (key: string, value: string) => void
|
||||
onClearAll: () => void
|
||||
/** Optional per-chip accent colour (e.g. status colours); falls back to the app accent. */
|
||||
chipColor?: (key: string, value: string) => string | undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Removable chips for the active selections, placed above the list so they scroll
|
||||
* away as you browse. Wraps onto multiple lines — nothing is hidden.
|
||||
*/
|
||||
export function ActiveFilterChips({
|
||||
categories,
|
||||
selected,
|
||||
onRemove,
|
||||
onClearAll,
|
||||
chipColor,
|
||||
}: ActiveFilterChipsProps) {
|
||||
const t = de.filterBar
|
||||
|
||||
const chips = categories.flatMap((cat) => {
|
||||
const labelByValue = new Map(cat.options.map((o) => [o.value, o.label]))
|
||||
return (selected[cat.key] ?? []).map((value) => ({
|
||||
key: cat.key,
|
||||
value,
|
||||
catLabel: cat.label,
|
||||
label: labelByValue.get(value) ?? value,
|
||||
}))
|
||||
})
|
||||
|
||||
if (chips.length === 0) return null
|
||||
|
||||
return (
|
||||
<div className="rmf-chips">
|
||||
{chips.map((c) => {
|
||||
const accent = chipColor?.(c.key, c.value)
|
||||
return (
|
||||
<button
|
||||
key={c.key + c.value}
|
||||
type="button"
|
||||
className="rmf-chip"
|
||||
style={accent ? ({ '--chip': accent } as CSSProperties) : undefined}
|
||||
onClick={() => onRemove(c.key, c.value)}
|
||||
aria-label={`${c.catLabel}: ${c.label} — ${t.remove}`}
|
||||
>
|
||||
<span className="rmf-chip-cat">{c.catLabel}</span>
|
||||
<span className="rmf-chip-val">{c.label}</span>
|
||||
<span className="rmf-chip-x" aria-hidden="true">×</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
{chips.length > 1 && (
|
||||
<button type="button" className="rmf-chip rmf-chip-clear" onClick={onClearAll}>
|
||||
{t.clearAll}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface BottomSheetProps {
|
||||
title: string
|
||||
onClose: () => void
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable bottom-sheet: dimmed scrim + slide-up panel with grip, title and a
|
||||
* "Fertig" button. Locks body scroll and closes on Escape / scrim tap. Used for
|
||||
* the category filters AND the sort selector (same drawer mechanic).
|
||||
*/
|
||||
export function BottomSheet({ title, onClose, children }: BottomSheetProps) {
|
||||
const t = de.filterBar
|
||||
|
||||
useEffect(() => {
|
||||
const prev = document.body.style.overflow
|
||||
document.body.style.overflow = 'hidden'
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
}
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => {
|
||||
document.body.style.overflow = prev
|
||||
window.removeEventListener('keydown', onKey)
|
||||
}
|
||||
}, [onClose])
|
||||
|
||||
// Portal to <body> so the sheet escapes any sticky/stacking-context ancestor
|
||||
// (e.g. the sticky header) and renders above the bottom action bar.
|
||||
return createPortal(
|
||||
<div className="rmf-scrim" onClick={onClose} role="presentation">
|
||||
<div
|
||||
className="rmf-sheet"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={title}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="rmf-grip" aria-hidden="true" />
|
||||
<div className="rmf-sheet-head">
|
||||
<span className="rmf-sheet-title">{title}</span>
|
||||
<button type="button" className="rmf-sheet-done" onClick={onClose}>
|
||||
{t.done}
|
||||
</button>
|
||||
</div>
|
||||
<div className="rmf-sheet-body">{children}</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
|
||||
interface FilterSheetProps {
|
||||
cat: FilterCategory
|
||||
selected: string[]
|
||||
onToggle: (key: string, value: string) => void
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
function FilterSheet({ cat, selected, onToggle, onClose }: FilterSheetProps) {
|
||||
return (
|
||||
<BottomSheet title={cat.label} onClose={onClose}>
|
||||
<OptionList cat={cat} selected={selected} onToggle={onToggle} />
|
||||
</BottomSheet>
|
||||
)
|
||||
}
|
||||
|
||||
interface OptionListProps {
|
||||
cat: FilterCategory
|
||||
selected: string[]
|
||||
onToggle: (key: string, value: string) => void
|
||||
}
|
||||
|
||||
function OptionList({ cat, selected, onToggle }: OptionListProps) {
|
||||
const t = de.filterBar
|
||||
const [q, setQ] = useState('')
|
||||
|
||||
const options = useMemo(() => {
|
||||
if (!cat.searchable) return cat.options
|
||||
const term = q.trim().toLowerCase()
|
||||
if (!term) return cat.options
|
||||
return cat.options.filter((o) => o.label.toLowerCase().includes(term))
|
||||
}, [cat, q])
|
||||
|
||||
return (
|
||||
<div className="rmf-picker">
|
||||
{cat.searchable && (
|
||||
<input
|
||||
className="rmf-search"
|
||||
placeholder={t.searchPlaceholder}
|
||||
value={q}
|
||||
onChange={(e) => setQ(e.target.value)}
|
||||
autoFocus
|
||||
aria-label={t.searchPlaceholder}
|
||||
/>
|
||||
)}
|
||||
<div className={'rmf-optlist' + (cat.searchable ? ' rmf-optlist--scroll' : '')}>
|
||||
{options.length === 0 && <div className="rmf-empty">{t.noMatch}</div>}
|
||||
{options.map((o) => {
|
||||
const on = selected.includes(o.value)
|
||||
return (
|
||||
<button
|
||||
key={o.value}
|
||||
type="button"
|
||||
className={'rmf-opt' + (on ? ' is-on' : '')}
|
||||
onClick={() => onToggle(cat.key, o.value)}
|
||||
aria-pressed={on}
|
||||
>
|
||||
<span className="rmf-opt-box" aria-hidden="true">
|
||||
{on ? '✓' : ''}
|
||||
</span>
|
||||
{o.color && <span className="rmf-opt-dot" style={{ background: o.color }} />}
|
||||
{o.symbol && (
|
||||
<span className="rmf-opt-sym" aria-hidden="true">
|
||||
{o.symbol}
|
||||
</span>
|
||||
)}
|
||||
<span className="rmf-opt-label">{o.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -43,6 +43,39 @@
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.namegen-panel__gender {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.namegen-gender-group {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.namegen-gender-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
border-left: 1px solid var(--color-border);
|
||||
padding: 0.35rem 0.7rem;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.namegen-gender-btn:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.namegen-gender-btn.is-active {
|
||||
background: var(--color-accent, #2563eb);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.namegen-panel__usages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -12,9 +12,17 @@ interface NameSuggestPanelProps {
|
||||
|
||||
const ALL_CODES = NAMEGEN_USAGES.map((u) => u.code) as NamegenUsageCode[]
|
||||
|
||||
type GenderSelection = 'any' | 'female' | 'male'
|
||||
|
||||
/** Map the gerbil form's gender onto the generator's three-way choice. */
|
||||
function seedGender(gender: string): GenderSelection {
|
||||
return gender === 'female' || gender === 'male' ? gender : 'any'
|
||||
}
|
||||
|
||||
export default function NameSuggestPanel({ gender, onPick, onClose }: NameSuggestPanelProps) {
|
||||
const t = de.namegen
|
||||
const [letter, setLetter] = useState('')
|
||||
const [genderSel, setGenderSel] = useState<GenderSelection>(() => seedGender(gender))
|
||||
const [usages, setUsages] = useState<Set<NamegenUsageCode>>(new Set(ALL_CODES))
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [keyMissing, setKeyMissing] = useState(false)
|
||||
@@ -39,7 +47,7 @@ export default function NameSuggestPanel({ gender, onPick, onClose }: NameSugges
|
||||
try {
|
||||
const result = await suggestNames({
|
||||
letter: letter.trim() || undefined,
|
||||
gender: gender || undefined,
|
||||
gender: genderSel === 'any' ? undefined : genderSel,
|
||||
usages: [...usages] as NamegenUsageCode[],
|
||||
count: 6,
|
||||
})
|
||||
@@ -78,6 +86,28 @@ export default function NameSuggestPanel({ gender, onPick, onClose }: NameSugges
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="namegen-panel__gender">
|
||||
<span>{t.genderLabel}</span>
|
||||
<div className="namegen-gender-group" role="radiogroup" aria-label={t.genderLabel}>
|
||||
{([
|
||||
['any', t.genderAny],
|
||||
['female', t.genderFemale],
|
||||
['male', t.genderMale],
|
||||
] as const).map(([value, label]) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={genderSel === value}
|
||||
className={`namegen-gender-btn ${genderSel === value ? 'is-active' : ''}`}
|
||||
onClick={() => setGenderSel(value)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="namegen-panel__usages">
|
||||
<span>{t.usagesLabel}</span>
|
||||
<div className="namegen-usages-grid">
|
||||
|
||||
427
gerbil-manager-web/src/components/gerbilFilterBar.css
Normal file
427
gerbil-manager-web/src/components/gerbilFilterBar.css
Normal file
@@ -0,0 +1,427 @@
|
||||
/* DESIGN (Rennmaus Filter.html): Quick-Chips + Bottom-Sheet + entfernbare Chips.
|
||||
Mobile-first. Palette + font sizes are taken 1:1 from the design (the app tokens
|
||||
are now the design's creme/brown/terracotta), so this matches the prototype. */
|
||||
|
||||
.rmf {
|
||||
--rmf-ease: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
margin: 0.5rem 0 0.25rem;
|
||||
}
|
||||
|
||||
/* ---------- Quick-Chips pill row ---------- */
|
||||
.rmf-quickrow {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
padding: 2px 0 4px;
|
||||
scrollbar-width: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.rmf-quickrow::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.rmf-pill {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
padding: 9px 13px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.12s var(--rmf-ease), border-color 0.15s, color 0.15s, background 0.15s;
|
||||
}
|
||||
.rmf-pill:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
.rmf-pill.is-on {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
background: var(--color-accent-soft);
|
||||
}
|
||||
.rmf-pill-count {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 9px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.rmf-pill-chev {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
/* ---------- Active filter chips ---------- */
|
||||
.rmf-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
.rmf-chip {
|
||||
--chip: var(--color-accent);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
background: color-mix(in srgb, var(--chip) 12%, #fff);
|
||||
border: 1px solid color-mix(in srgb, var(--chip) 32%, transparent);
|
||||
color: color-mix(in srgb, var(--chip) 78%, #2b2723);
|
||||
padding: 6px 8px 6px 11px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
animation: rmfChipIn 0.22s var(--rmf-ease);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.rmf-chip:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
.rmf-chip-cat {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
opacity: 0.6;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.rmf-chip-val {
|
||||
font-weight: 700;
|
||||
}
|
||||
.rmf-chip-x {
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--chip) 22%, transparent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.rmf-chip-clear {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.rmf-chip-clear .rmf-chip-x {
|
||||
display: none;
|
||||
}
|
||||
@keyframes rmfChipIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Bottom-Sheet ---------- */
|
||||
.rmf-scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
background: rgba(43, 33, 25, 0.42);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
animation: rmfScrim 0.2s ease;
|
||||
}
|
||||
@keyframes rmfScrim {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.rmf-sheet {
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
background: var(--color-bg);
|
||||
border-radius: 22px 22px 0 0;
|
||||
max-height: 82vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 -8px 40px rgba(43, 33, 25, 0.25);
|
||||
animation: rmfSheetUp 0.32s var(--rmf-ease);
|
||||
}
|
||||
@keyframes rmfSheetUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.rmf-grip {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-text-faint);
|
||||
opacity: 0.5;
|
||||
margin: 9px auto 4px;
|
||||
}
|
||||
.rmf-sheet-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.375rem 1rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.rmf-sheet-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.rmf-sheet-done {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
border: none;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rmf-sheet-body {
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 1rem 1.5rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* ---------- Option list (multi-select checkboxes) ---------- */
|
||||
.rmf-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.rmf-search {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-border);
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 0.75rem 0.875rem;
|
||||
font: inherit;
|
||||
font-size: 1rem;
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
margin: 0.25rem 0 0.375rem;
|
||||
}
|
||||
.rmf-search:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.rmf-optlist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.rmf-optlist--scroll {
|
||||
max-height: 46vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.rmf-opt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
padding: 0.75rem 0.375rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.rmf-opt:hover {
|
||||
background: var(--color-accent-soft);
|
||||
}
|
||||
.rmf-opt.is-on {
|
||||
font-weight: 700;
|
||||
}
|
||||
.rmf-opt-box {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 7px;
|
||||
border: 1.5px solid var(--color-border);
|
||||
background: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
transition: background 0.14s, border-color 0.14s;
|
||||
}
|
||||
.rmf-opt.is-on .rmf-opt-box {
|
||||
background: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.rmf-opt-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rmf-opt-sym {
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.rmf-opt-label {
|
||||
flex: 1;
|
||||
}
|
||||
.rmf-empty {
|
||||
padding: 1.1rem 0.375rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ---------- Search bar ---------- */
|
||||
.rmf-searchbar {
|
||||
margin-top: 0.75rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.rmf-search-ico {
|
||||
padding-left: 0.875rem;
|
||||
font-size: 19px;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
.rmf-searchfield {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font: inherit;
|
||||
font-size: 16px;
|
||||
color: var(--color-text);
|
||||
padding: 0.875rem 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.rmf-searchfield::placeholder {
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
.rmf-search-clear {
|
||||
border: none;
|
||||
background: var(--color-accent-soft);
|
||||
color: var(--color-text-muted);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.625rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ---------- Bar: Externe-Ahnen toggle + Sortieren — two equal-width chips ---------- */
|
||||
.rm-bar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
|
||||
/* Shared pill: both chips are the SAME size (flex: 1 → equal width). */
|
||||
.rmf-bar-chip {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow);
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
|
||||
}
|
||||
.rmf-bar-chip:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
/* Externe-Ahnen active state. */
|
||||
.rmf-bar-chip.is-on {
|
||||
background: var(--color-accent-soft);
|
||||
border-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
|
||||
color: color-mix(in srgb, var(--color-accent) 78%, #2b2723);
|
||||
}
|
||||
.rmf-bar-chip-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.rmf-bar-chip-ico {
|
||||
color: var(--color-accent);
|
||||
font-weight: 800;
|
||||
}
|
||||
.rmf-bar-chip-chev {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-faint);
|
||||
}
|
||||
|
||||
/* Toggle icon circle on the Externe-Ahnen chip (+ → ✓). */
|
||||
.rmf-chip-toggle-ico {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-weight: 800;
|
||||
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
|
||||
color: var(--color-accent);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.rmf-bar-chip.is-on .rmf-chip-toggle-ico {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Desktop: the sheet becomes a centered modal rather than a bottom drawer. */
|
||||
@media (min-width: 768px) {
|
||||
.rmf-scrim {
|
||||
align-items: center;
|
||||
}
|
||||
.rmf-sheet {
|
||||
border-radius: 18px;
|
||||
max-width: 420px;
|
||||
max-height: 70vh;
|
||||
animation: rmfChipIn 0.2s var(--rmf-ease);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user