Family card re-skin to approved mock (header, ringed avatars, image destination tiles, CTA banner) #870

New Issue

2026-07-27T14:29:32Z

spikerj commented

2026-07-27 14:29:32 +00:00

Part of #868 (PR-2, angular). Files: libraries/features/sponsor-cards/src/lib/family-card/*, libraries/ui/destination-chips/*, sponsor i18n.

Header: FAMILY pill top-left (keeps /sponsor/family/{key} link), outlined "View Family Profile →" top-right, family name ~1.6rem + verified icon (truthful: only staff-approved families are listed), ★ Shared dream line, static tagline.
Member rows: 64px avatar with primary ring, bold name, tag (Parent/Child; Age N arrives with the #868 age tickets), one-line bio (showBio-gated), chevron → existing #752 spotlight. Per-member progress bars move INTO the spotlight; combined goal moves into the CTA banner as a slim bar.
"Where they want to go" glass panel: 2-col image tiles. DestinationChip gains imageUrl?; lib-destination-chips gains variant: "inline" | "tile" (default inline — solo cards unchanged). Tile <img> hidden on error → graceful fallback for missing destination images. Star = sharedByAll (violet glow), check_circle = childApproved. Two-line legend below.
Gradient CTA banner: heart medallion, "Help make their dream a reality", gradient Sponsor/Donate button (existing routerLink), lock microcopy, slim combined-goal bar. Keep margin-top:auto equal-height behavior.
Dotted world-map decor SVG (generated from assets/geo/world-countries.geo.json, committed as SPA asset), low opacity in header.
Violet accent palette via component-scoped CSS vars; verify body.light-theme, dashboard scroller, families-by-destination view, ≤560px portrait.

Part of #868 (PR-2, angular). Files: `libraries/features/sponsor-cards/src/lib/family-card/*`, `libraries/ui/destination-chips/*`, sponsor i18n. - Header: FAMILY pill top-left (keeps `/sponsor/family/{key}` link), outlined "View Family Profile →" top-right, family name ~1.6rem + `verified` icon (truthful: only staff-approved families are listed), ★ Shared dream line, static tagline. - Member rows: 64px avatar with primary ring, bold name, tag (Parent/Child; Age N arrives with the #868 age tickets), one-line bio (`showBio`-gated), chevron → existing #752 spotlight. Per-member progress bars move INTO the spotlight; combined goal moves into the CTA banner as a slim bar. - "Where they want to go" glass panel: 2-col image tiles. `DestinationChip` gains `imageUrl?`; `lib-destination-chips` gains `variant: "inline" | "tile"` (default inline — solo cards unchanged). Tile `<img>` hidden on error → graceful fallback for missing destination images. Star = sharedByAll (violet glow), check_circle = childApproved. Two-line legend below. - Gradient CTA banner: heart medallion, "Help make their dream a reality", gradient Sponsor/Donate button (existing routerLink), lock microcopy, slim combined-goal bar. Keep `margin-top:auto` equal-height behavior. - Dotted world-map decor SVG (generated from `assets/geo/world-countries.geo.json`, committed as SPA asset), low opacity in header. - Violet accent palette via component-scoped CSS vars; verify `body.light-theme`, dashboard scroller, families-by-destination view, ≤560px portrait.

spikerj referenced this issue

2026-07-27 15:18:36 +00:00

EPIC: Sponsor family card redesign — image-backed destination tiles, achievements strip, parent-gated age #868

spikerj referenced this issue

2026-07-27 15:28:52 +00:00

EPIC: Sponsor family card redesign — image-backed destination tiles, achievements strip, parent-gated age #868

spikerj commented

2026-07-29 15:28:40 +00:00

Resolved in spikersoft-angular PR #592 (the consolidated family-card epic PR, merged to master, 501a3ada). PR #587 was closed unmerged in favour of that consolidation. Verified against origin/master:

Header — verified mark at family-card.component.html:25-30, shared-dream line :37-44, "View Family Profile" :13-14.
Ringed member rows — :59; Age/role tag resolver at family-card.component.ts:97-98.
Image destination tiles — destination-chips.component.ts:27 adds imageUrl?, and :53 gates it behind variant = input<"inline"|"tile">("inline"), so the default stays inline and solo cards are untouched. Broken-image degrade via <img (error)="hideBrokenImage($event)"> at destination-chips.component.html:24; URL built at family-card.component.ts:149. Star/check legend at family-card.component.html:295-308.
CTA banner + slim combined-goal bar — :333-378, guarded on combinedCostCents > 0, mat-progress-bar at :373.
Dotted map decor — projects/spikersoft/src/assets/sponsor/world-dots.svg is committed and referenced at family-card.component.scss:52.
i18n — verifiedTooltip / sharedDream / ctaTitle / ctaMicrocopy present in both en.json and es.json.

Note: #884 later restructured the card into side-panel member tabs, so the destinations panel and award strip now render both inside a tab (:201, :242) and standalone (:289, :323). That's #884's shape, not a gap here.

The light-theme and ≤560px items remain visual QA rather than anything greppable — flagging that they were not machine-verified. Note also that the destination tiles will fall back to the no-image path until the AVIF assets land in assets/destinations/ (tracked on the epic, #868).

Closing.

Resolved in spikersoft-angular PR #592 (the consolidated family-card epic PR, merged to `master`, `501a3ada`). PR #587 was closed unmerged in favour of that consolidation. Verified against `origin/master`: - **Header** — verified mark at `family-card.component.html:25-30`, shared-dream line `:37-44`, "View Family Profile" `:13-14`. - **Ringed member rows** — `:59`; Age/role tag resolver at `family-card.component.ts:97-98`. - **Image destination tiles** — `destination-chips.component.ts:27` adds `imageUrl?`, and `:53` gates it behind `variant = input<"inline"|"tile">("inline")`, so the default stays inline and solo cards are untouched. Broken-image degrade via `<img (error)="hideBrokenImage($event)">` at `destination-chips.component.html:24`; URL built at `family-card.component.ts:149`. Star/check legend at `family-card.component.html:295-308`. - **CTA banner + slim combined-goal bar** — `:333-378`, guarded on `combinedCostCents > 0`, `mat-progress-bar` at `:373`. - **Dotted map decor** — `projects/spikersoft/src/assets/sponsor/world-dots.svg` is committed and referenced at `family-card.component.scss:52`. - **i18n** — `verifiedTooltip` / `sharedDream` / `ctaTitle` / `ctaMicrocopy` present in both `en.json` and `es.json`. Note: #884 later restructured the card into side-panel member tabs, so the destinations panel and award strip now render both inside a tab (`:201`, `:242`) and standalone (`:289`, `:323`). That's #884's shape, not a gap here. The light-theme and ≤560px items remain visual QA rather than anything greppable — flagging that they were not machine-verified. Note also that the destination tiles will fall back to the no-image path until the AVIF assets land in `assets/destinations/` (tracked on the epic, #868). Closing.

spikerj closed this issue

2026-07-29 15:28:43 +00:00

spikerj referenced this issue

2026-07-29 15:30:46 +00:00

EPIC: Sponsor family card redesign — image-backed destination tiles, achievements strip, parent-gated age #868

spikerj referenced this issue

2026-07-29 15:32:34 +00:00

Sponsor family card: declutter header, consolidate member photos, promote the $ tracker #831

Sign in to join this conversation.