ik/rf4-spotter
1
0
Fork 0
Code Issues Pull Requests Actions 9 Packages Projects Releases Wiki Activity

feat: compose atlas identity for fishing pairs
CI / backend-and-migrations (push) Canceled after 0s
Details
CI / astro-build (push) Canceled after 0s
Details
CI / dependency-audit (push) Canceled after 0s
Details
CI / compose-e2e (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
ik
2026-09-12 15:37:54 +07:00
parent 2ce1e20af2
commit cadd5607b8
6 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/AtlasPairMark.astro
+25
View File
@@ -0,0 +1,25 @@
---
import FishSilhouette from "./FishSilhouette.astro";
import WaterbodyMark from "./WaterbodyMark.astro";
const { waterbody, fish } = Astro.props as { waterbody: string; fish: string };
---
<span class="atlas-pair-mark" aria-hidden="true">
<span class="atlas-pair-mark__water"><WaterbodyMark identity={waterbody} size={104} /></span>
<span class="atlas-pair-mark__fish"><FishSilhouette name={fish} size={78} /></span>
<i>×</i>
</span>
<style>
.atlas-pair-mark { position: relative; display: block; width: 128px; height: 74px; }
.atlas-pair-mark__water { position: absolute; inset: 15px auto auto 0; color: var(--lime); }
.atlas-pair-mark__water :global(.waterbody-mark) { position: static; opacity: .72; stroke: currentColor; }
.atlas-pair-mark__water :global(.waterbody-mark text) { fill: var(--white); opacity: .8; }
.atlas-pair-mark__fish { position: absolute; right: -2px; top: -6px; color: var(--white); filter: drop-shadow(0 3px 7px #06191c); }
.atlas-pair-mark__fish :global(.fish-silhouette) { position: static; opacity: .92; }
i { position: absolute; right: 2px; bottom: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--deep); font: 800 11px/1 Inter, sans-serif; }
@media (max-width: 720px) {
.atlas-pair-mark { width: 94px; height: 55px; transform: scale(.73); transform-origin: center; }
}
</style>
apps/web/src/components/PageHero.astro
+3 -2
View File
@@ -1,9 +1,10 @@
---
import FishSilhouette from "./FishSilhouette.astro";
import WaterbodyMark from "./WaterbodyMark.astro";
const { eyebrow, title, description, variant, count, identity = title } = Astro.props as { eyebrow: string; title: string; description?: string; variant?: "water" | "fish"; count?: number; identity?: string };
import AtlasPairMark from "./AtlasPairMark.astro";
const { eyebrow, title, description, variant, count, identity = title, secondaryIdentity = "waterbody" } = Astro.props as { eyebrow: string; title: string; description?: string; variant?: "water" | "fish" | "pair"; count?: number; identity?: string; secondaryIdentity?: string };
---
<section class:list={["catalog-hero content-grid", { "catalog-hero--illustrated": variant }]}>
<div class="catalog-hero__copy"><span class="overline">{eyebrow}</span><h1>{title}</h1>{description && <p>{description}</p>}</div>
{variant && <div class="catalog-hero__seal" aria-hidden="true"><span>{variant === "water" ? <WaterbodyMark identity={identity} size={94} /> : <FishSilhouette name={identity} size={92} />}</span>{typeof count === "number" && <><strong>{String(count).padStart(2,"0")}</strong><small>{variant === "water" ? "водоёмов" : "видов рыб"}</small></>}</div>}
{variant && <div class:list={["catalog-hero__seal", { "catalog-hero__seal--pair": variant === "pair" }]} aria-hidden="true"><span>{variant === "water" ? <WaterbodyMark identity={identity} size={94} /> : variant === "pair" ? <AtlasPairMark waterbody={secondaryIdentity} fish={identity} /> : <FishSilhouette name={identity} size={92} />}</span>{typeof count === "number" && <><strong>{String(count).padStart(2,"0")}</strong><small>{variant === "water" ? "водоёмов" : "видов рыб"}</small></>}</div>}
</section>