diff --git a/gerbil-manager-web/e2e/stammbaum.spec.ts b/gerbil-manager-web/e2e/stammbaum.spec.ts index 2eac21b..db9da06 100644 --- a/gerbil-manager-web/e2e/stammbaum.spec.ts +++ b/gerbil-manager-web/e2e/stammbaum.spec.ts @@ -79,3 +79,34 @@ test('Namenloser Ahne zeigt Platzhalter in der Stammbaum-Karte (UI-POLISH-2)', a // Karte selbst zeigt '(ohne Namen)' statt leer await expect(page.locator('.pedigree-card__nametext')).toHaveText(de.pages.gerbils.nameless) }) + +test('Mini-Legende zeigt alle drei Interaktionshinweise (STAMMBAUM-EXPAND)', async ({ page }) => { + skipUnlessMock() + await page.goto('/rennmaeuse/kruemel/stammbaum') + await expect(page.locator('.pedigree-card').first()).toBeVisible() + + const hints = page.locator('.stammbaum-hints') + await expect(hints).toBeVisible() + await expect(hints).toContainText(t.tapHint) + await expect(hints).toContainText(t.hintName) + await expect(hints).toContainText(t.hintExpand) +}) + +test('+-Knopf ist sichtbar und lädt weitere Vorfahren nach (STAMMBAUM-EXPAND)', async ({ page }) => { + skipUnlessMock() + await page.goto('/rennmaeuse/kruemel/stammbaum') + await expect(page.locator('.pedigree-card').first()).toBeVisible() + + // Einpassen, damit die 4. Generation (Emil mit +) im Viewport liegt. + const fit = page.getByRole('button', { name: t.zoomFit }) + if (await fit.isVisible()) await fit.click() + await page.waitForTimeout(600) + + // +-Button muss an der Tiefengrenze erscheinen (Emil hat litterId w-emil). + const expandBtn = page.getByRole('button', { name: t.expand }).first() + await expect(expandBtn).toBeVisible() + + // Klick auf +: Emil wird aufgeklappt → Max (sein Vater) taucht als Link auf. + await expandBtn.click({ force: true }) + await expect(page.getByRole('link', { name: 'Max' })).toBeVisible({ timeout: 8000 }) +}) diff --git a/gerbil-manager-web/src/pages/StammbaumPage.tsx b/gerbil-manager-web/src/pages/StammbaumPage.tsx index 437b93d..8f93b01 100644 --- a/gerbil-manager-web/src/pages/StammbaumPage.tsx +++ b/gerbil-manager-web/src/pages/StammbaumPage.tsx @@ -335,7 +335,11 @@ export default function StammbaumPage() { /> )} -

{t.tapHint}

+ {/* Druckansicht: am Bildschirm unsichtbar, ersetzt beim Drucken alles. */} diff --git a/gerbil-manager-web/src/pages/stammbaum.css b/gerbil-manager-web/src/pages/stammbaum.css index 6592a4b..d03692c 100644 --- a/gerbil-manager-web/src/pages/stammbaum.css +++ b/gerbil-manager-web/src/pages/stammbaum.css @@ -34,10 +34,15 @@ color: var(--color-text); } -.stammbaum-hint { - font-size: 0.8rem; - color: var(--color-text-muted); +.stammbaum-hints { + list-style: none; + padding: 0; margin: 0.4rem 0 0; + display: flex; + flex-wrap: wrap; + gap: 0.1rem 1rem; + font-size: 0.78rem; + color: var(--color-text-muted); } /* ── Zeichenfläche ────────────────────────────────────────────── */ @@ -175,20 +180,27 @@ .pedigree-card__expand { flex: none; margin-left: auto; - width: 32px; - height: 32px; + width: 40px; + height: 40px; + padding: 0; border-radius: 50%; - border: 1px solid var(--color-accent); - background: var(--color-accent-soft); - color: var(--color-accent); - font-size: 1.05rem; - line-height: 1; - cursor: pointer; -} - -.pedigree-card__expand:hover { + border: none; background: var(--color-accent); color: #fff; + font-size: 1.3rem; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 1px 5px rgb(0 0 0 / 28%); +} + +.pedigree-card__expand:hover, +.pedigree-card__expand:focus-visible { + opacity: 0.82; + outline: 2px solid var(--color-accent); + outline-offset: 2px; } /* ── Druckansicht (Ahnentafel als CSS-Grid, Hunde-Zertifikat-Optik) ── diff --git a/gerbil-manager-web/src/strings/de.ts b/gerbil-manager-web/src/strings/de.ts index 96f64ed..1e6e40a 100644 --- a/gerbil-manager-web/src/strings/de.ts +++ b/gerbil-manager-web/src/strings/de.ts @@ -355,6 +355,9 @@ export const de = { /** Auf Karten am Rand: weitere Vorfahren nachladen. */ expand: 'Vorfahren laden', tapHint: 'Tippe auf ein Tier, um dessen Stammbaum anzuzeigen.', + /** Mini-Legende unter dem Baum (STAMMBAUM-EXPAND). */ + hintName: 'Namenslink: Tierakte öffnen', + hintExpand: '+: weitere Vorfahren nachladen', zoomIn: 'Vergrößern', zoomOut: 'Verkleinern', zoomFit: 'Ansicht einpassen',