peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

polish(channel): inset, rounded banner card (option C)

Browse source 
Instead of a full-bleed banner, inset it with a margin and rounded corners so it reads as a
contained card; the avatar overlaps its bottom-left. Airier and more designed than edge-to-edge.
This commit is contained in:
npeter83 2026-06-30 04:48:46 +02:00
parent a6c4888e92
commit 5e588d15ff
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/ChannelPage.tsx
View file

@ -138,14 +138,14 @@ export default function ChannelPage({
return (
<main className="flex-1 min-w-0 overflow-y-auto">
{/* Banner + back */}
<div className="relative">
{/* Banner + back — OPTION C: inset, rounded card (not full-bleed) */}
<div className="relative px-4 sm:px-6 pt-3">
{ch?.banner_url ? (
// Match YouTube's banner: the stored bannerExternalUrl is the full 16:9 template at a
// low default size, so request a crisp wide version (=w1707) and object-cover the
// desktop "safe area" — the centre 2560×423 (~6:1) band — at full width.
// desktop "safe area" — the centre 2560×423 (~6:1) band.
<div
className="w-full overflow-hidden bg-surface"
className="w-full overflow-hidden rounded-2xl bg-surface"
style={{ aspectRatio: "2560 / 423", maxHeight: "150px" }}
>
<img
@ -155,11 +155,11 @@ export default function ChannelPage({
/>
</div>
) : (
<div className="h-14 w-full bg-surface" />
<div className="h-14 w-full rounded-2xl bg-surface" />
)}
<button
onClick={onBack}
className="absolute top-3 left-3 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
className="absolute top-5 left-7 sm:left-9 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
>
<ArrowLeft className="w-4 h-4" />
{t("channel.back")}