discover page layout fixes: full-width hero, no scrollbar, taller tiles, no collapse on tab switch, unclipped glow
This commit is contained in:
@@ -146,7 +146,7 @@ function Tile({
|
|||||||
whileTap={{ scale: 0.98 }}
|
whileTap={{ scale: 0.98 }}
|
||||||
transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
|
transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
|
||||||
aria-pressed={active}
|
aria-pressed={active}
|
||||||
className={`group relative w-full aspect-[7/4] rounded-xl overflow-hidden border text-left focus-ring transition-colors ${
|
className={`group relative w-full min-h-[136px] rounded-xl border text-left focus-ring transition-colors ${
|
||||||
active ? 'border-accent/55' : 'border-border hover:border-border-strong'
|
active ? 'border-accent/55' : 'border-border hover:border-border-strong'
|
||||||
}`}
|
}`}
|
||||||
style={{ background: tileBackground(v.hue) }}
|
style={{ background: tileBackground(v.hue) }}
|
||||||
@@ -166,7 +166,7 @@ function Tile({
|
|||||||
<p className="font-display text-[15px] font-bold tracking-tight text-text-1 leading-tight pr-8">
|
<p className="font-display text-[15px] font-bold tracking-tight text-text-1 leading-tight pr-8">
|
||||||
{tile.label}
|
{tile.label}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-[10.5px] text-text-3 mt-0.5 pr-8 line-clamp-1">
|
<p className="text-[10.5px] text-text-3 mt-1 pr-8 leading-snug">
|
||||||
{tile.subtitle}
|
{tile.subtitle}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export default function DecadeStrip({ kind, active, onChange }: Props) {
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence>
|
||||||
{active && (
|
{active && (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={active + kind}
|
key={active + kind}
|
||||||
|
|||||||
@@ -91,7 +91,7 @@ export function MoodRow({ moodId, kind }: { moodId: string; kind: 'movie' | 'tv'
|
|||||||
const mood = DISCOVER_MOODS.find(m => m.id === moodId)
|
const mood = DISCOVER_MOODS.find(m => m.id === moodId)
|
||||||
if (!mood) return null
|
if (!mood) return null
|
||||||
return (
|
return (
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence>
|
||||||
<motion.div
|
<motion.div
|
||||||
key={moodId + ':' + kind}
|
key={moodId + ':' + kind}
|
||||||
initial={{ opacity: 0, y: 8 }}
|
initial={{ opacity: 0, y: 8 }}
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ export default function TonightHero({ kind }: Props) {
|
|||||||
initial={{ opacity: 0, y: 12 }}
|
initial={{ opacity: 0, y: 12 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
|
transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
|
||||||
className="mx-7 mb-9 relative rounded-2xl overflow-hidden ring-1 ring-border bg-elevated/40 shadow-[0_24px_48px_-16px_rgba(0,0,0,0.65)]"
|
className="mb-9 relative rounded-2xl overflow-hidden ring-1 ring-border bg-elevated/40 shadow-[0_24px_48px_-16px_rgba(0,0,0,0.65)]"
|
||||||
style={{ aspectRatio: '21/9', maxHeight: '440px' }}
|
style={{ aspectRatio: '21/9', maxHeight: '440px' }}
|
||||||
>
|
>
|
||||||
<motion.img
|
<motion.img
|
||||||
@@ -126,7 +126,7 @@ export default function TonightHero({ kind }: Props) {
|
|||||||
className="absolute inset-0 z-10 group cursor-pointer focus-ring rounded-2xl"
|
className="absolute inset-0 z-10 group cursor-pointer focus-ring rounded-2xl"
|
||||||
aria-label={`Open ${title}`}
|
aria-label={`Open ${title}`}
|
||||||
>
|
>
|
||||||
<div className="absolute left-0 right-0 bottom-0 p-7 md:p-9 max-w-2xl text-left">
|
<div className="absolute left-0 right-0 bottom-0 p-7 md:p-9 text-left">
|
||||||
<div className="flex items-center gap-2 mb-2.5">
|
<div className="flex items-center gap-2 mb-2.5">
|
||||||
<MoonStars size={12} className="text-accent" />
|
<MoonStars size={12} className="text-accent" />
|
||||||
<span className="text-[10.5px] uppercase tracking-[0.2em] font-semibold text-accent">
|
<span className="text-[10.5px] uppercase tracking-[0.2em] font-semibold text-accent">
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ export default function DiscoverPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pb-12" style={{ isolation: 'isolate' }}>
|
<div className="pb-12 overflow-x-hidden" style={{ isolation: 'isolate' }}>
|
||||||
<Hero />
|
<Hero />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user