Gulum
98060b890b
HilfePage.tsx: accordion via <details>/<summary> (native, accessible, mobile-first); 9 sections in du-Form: Erste Schritte, Rennmaeuse, Becken, Wuerfe, Genetik, Stammbaum, Abgabe-Ablauf, Statistik, Datensicherung. All UI labels imported from de.ts (rename-safe); SCHECKE/Rex warnings verbatim from genetics.warnings. de.ts: de.nav.help + de.hilfe (title, subtitle, 9 section keys) AppShell.tsx: Hilfe (heart question mark) added to SECONDARY nav (Mehr-sheet on phone, sidebar on desktop) App.tsx: Route path=hilfe -> <HilfePage /> hilfe.css: accordion, hint boxes, warning colour; piggybacks on existing CSS vars e2e/hilfe.spec.ts: 3 smoke tests x 2 viewports = 6 new tests -- Hilfe reachable via nav -- First accordion section expands on click -- SCHECKE warning visible in Genetik section Full evidence: dotnet test 18/18, npm test 47/47, npm run build ok, npm run e2e 54/54 (48 existing + 6 new hilfe tests). Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
106 lines
1.8 KiB
CSS
106 lines
1.8 KiB
CSS
.hilfe-page {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.hilfe-subtitle {
|
|
color: var(--color-muted, #666);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Accordion */
|
|
.hilfe-accordion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.hilfe-section {
|
|
border: 1px solid var(--color-border, #ddd);
|
|
border-radius: 6px;
|
|
background: var(--color-surface, #fff);
|
|
}
|
|
|
|
.hilfe-section-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.875rem 1rem;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
user-select: none;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.hilfe-section-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.hilfe-section-summary:hover {
|
|
background: var(--color-hover, #f5f5f5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.hilfe-section[open] > .hilfe-section-summary {
|
|
border-bottom: 1px solid var(--color-border, #ddd);
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.hilfe-section-title {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.hilfe-section-chevron {
|
|
font-size: 1.1rem;
|
|
transition: transform 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hilfe-section[open] .hilfe-section-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.hilfe-section-body {
|
|
padding: 1rem 1rem 1.25rem;
|
|
}
|
|
|
|
.hilfe-section-body p {
|
|
margin: 0 0 0.75rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hilfe-section-body p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.hilfe-section-body ul,
|
|
.hilfe-section-body ol {
|
|
margin: 0.25rem 0 0.75rem 1.25rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hilfe-section-body li {
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.hilfe-section-body code {
|
|
font-family: monospace;
|
|
background: var(--color-hover, #f5f5f5);
|
|
padding: 0.1em 0.35em;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Hint boxes */
|
|
.hilfe-hint {
|
|
background: var(--color-info-bg, #eff6ff);
|
|
border-left: 3px solid var(--color-info, #3b82f6);
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 0 4px 4px 0;
|
|
font-size: 0.93rem;
|
|
}
|
|
|
|
.hilfe-warning {
|
|
color: var(--color-warning-text, #92400e);
|
|
}
|