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 ( return (
<main className="flex-1 min-w-0 overflow-y-auto"> <main className="flex-1 min-w-0 overflow-y-auto">
{/* Banner + back */} {/* Banner + back — OPTION C: inset, rounded card (not full-bleed) */}
<div className="relative"> <div className="relative px-4 sm:px-6 pt-3">
{ch?.banner_url ? ( {ch?.banner_url ? (
// Match YouTube's banner: the stored bannerExternalUrl is the full 16:9 template at a // 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 // 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 <div
className="w-full overflow-hidden bg-surface" className="w-full overflow-hidden rounded-2xl bg-surface"
style={{ aspectRatio: "2560 / 423", maxHeight: "150px" }} style={{ aspectRatio: "2560 / 423", maxHeight: "150px" }}
> >
<img <img
@ -155,11 +155,11 @@ export default function ChannelPage({
/> />
</div> </div>
) : ( ) : (
<div className="h-14 w-full bg-surface" /> <div className="h-14 w-full rounded-2xl bg-surface" />
)} )}
<button <button
onClick={onBack} 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" /> <ArrowLeft className="w-4 h-4" />
{t("channel.back")} {t("channel.back")}