sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust video grid to show fewer videos and use smaller navigation arrows

Browse Source 
Modify the video grid component to display only four videos per row and revert to the previous circular navigation arrows.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
This commit is contained in:
sebastjanartic 2025-09-01 20:22:48 +00:00
parent 56dab34290
commit 1504911fab
1 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/components/netflix-grid.tsx
View File

@ -239,57 +239,46 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
className="relative group" className="relative group"
onMouseLeave={() => setClickedVideoId(null)} onMouseLeave={() => setClickedVideoId(null)}
> >
<h2 className="text-lg font-medium text-bunny-light mb-1 mx-12 leading-tight uppercase"> <h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase">
{category.title} {category.title}
</h2> </h2>
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Left gradient mask - stronger */} {/* Left scroll button - small circular on videos */}
<div className="absolute left-0 top-0 w-20 h-full z-[30] pointer-events-none"
style={{
background: 'linear-gradient(to right, hsl(250, 50%, 15%) 0%, hsl(250, 50%, 15%) 40%, rgba(60, 40, 90, 0.8) 70%, transparent 100%)'
}}></div>
{/* Right gradient mask - stronger */}
<div className="absolute right-0 top-0 w-20 h-full z-[30] pointer-events-none"
style={{
background: 'linear-gradient(to left, hsl(250, 50%, 15%) 0%, hsl(250, 50%, 15%) 40%, rgba(60, 40, 90, 0.8) 70%, transparent 100%)'
}}></div>
{/* Left scroll button - positioned at container edge */}
{!hideScrollButtons && ( {!hideScrollButtons && (
<Button <Button
onClick={() => scroll('left')} onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')} onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll} onMouseLeave={stopAutoScroll}
className="absolute left-0 top-1/2 -translate-y-1/2 z-[40] bg-white/20 hover:bg-white/30 text-white border-none w-10 h-16 rounded-r-lg transition-all duration-300 hidden md:flex items-center justify-center backdrop-blur-sm" className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl"
size="sm" size="sm"
> >
<ChevronLeft className="w-6 h-6" /> <ChevronLeft className="w-4 h-4" />
</Button> </Button>
)} )}
{/* Right scroll button - positioned at container edge */} {/* Right scroll button - small circular on videos */}
{!hideScrollButtons && ( {!hideScrollButtons && (
<Button <Button
onClick={() => scroll('right')} onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')} onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll} onMouseLeave={stopAutoScroll}
className="absolute right-0 top-1/2 -translate-y-1/2 z-[40] bg-white/20 hover:bg-white/30 text-white border-none w-10 h-16 rounded-l-lg transition-all duration-300 hidden md:flex items-center justify-center backdrop-blur-sm" className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl"
size="sm" size="sm"
> >
<ChevronRight className="w-6 h-6" /> <ChevronRight className="w-4 h-4" />
</Button> </Button>
)} )}
{/* Scrollable video row - full width from edge to edge */}
{/* Scrollable video row - in container */}
<div <div
ref={scrollRef} ref={scrollRef}
className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-12" className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-2"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }} style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
> >
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<div <div
key={video.id} key={video.id}
className="flex-shrink-0 w-[300px] relative group hover:z-30" className="flex-shrink-0 w-[330px] relative group hover:z-30"
onMouseEnter={() => setClickedVideoId(video.id)} onMouseEnter={() => setClickedVideoId(video.id)}
> >
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}