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

Adjust video row display and add navigation arrows for desktop

Browse Source 
Removes right scroll button from NetflixGrid component, adjusts video widths, and adds navigation arrows to the end of each row for desktop view, improving user experience and navigation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e9f2b36-ec9c-4acc-b19b-5304fa9790c5
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
sebastjanartic 2025-09-01 13:18:00 +00:00
parent 0932300f25
commit 8bd0640ed9
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756732620092.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

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

@ -243,29 +243,17 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.title}
</h2>
<div className="relative overflow-hidden">
{/* Right scroll button - only on desktop and not hidden */}
{!hideScrollButtons && (
<Button
onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] bg-black/70 hover:bg-black/85 text-white border-none w-12 h-32 rounded-l-md transition-all duration-300 hidden md:flex items-center justify-center shadow-xl backdrop-blur-sm"
size="sm"
>
<ChevronRight className="w-6 h-6" />
</Button>
)}
{/* Scrollable video row - true edge to edge */}
<div
ref={scrollRef}
className="flex gap-2 overflow-x-auto scrollbar-hide pb-0 px-4"
className="flex gap-2 overflow-x-auto scrollbar-hide pb-0 px-4 md:pr-24"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
>
{category.videos.map((video, index) => (
<div
key={video.id}
className="flex-shrink-0 w-[280px] sm:w-[320px] md:w-[360px] lg:w-[400px] xl:w-[440px] relative group hover:z-30"
className="flex-shrink-0 w-[280px] sm:w-[320px] md:w-[320px] lg:w-[360px] xl:w-[380px] relative group hover:z-30"
onMouseEnter={() => setClickedVideoId(video.id)}
>
{/* Top 10 Number overlay for first category */}
@ -289,6 +277,30 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
</div>
))}
</div>
{/* Navigation arrows at the end of each row - only on desktop */}
{!hideScrollButtons && (
<div className="absolute right-4 top-1/2 -translate-y-1/2 z-[40] hidden md:flex flex-col gap-2">
<Button
onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
className="bg-black/70 hover:bg-black/85 text-white border-none w-12 h-16 rounded-md transition-all duration-300 flex items-center justify-center shadow-xl backdrop-blur-sm"
size="sm"
>
<ChevronLeft className="w-5 h-5" />
</Button>
<Button
onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
className="bg-black/70 hover:bg-black/85 text-white border-none w-12 h-16 rounded-md transition-all duration-300 flex items-center justify-center shadow-xl backdrop-blur-sm"
size="sm"
>
<ChevronRight className="w-5 h-5" />
</Button>
</div>
)}
</div>
</div>
);