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

Improve the visual design of video row navigation buttons

Browse Source 
Update the styling and positioning of the navigation arrows for video rows, making them smaller and more visually subtle.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e9f2b36-ec9c-4acc-b19b-5304fa9790c5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/8e9f2b36-ec9c-4acc-b19b-5304fa9790c5/0CzYEcy
This commit is contained in:
sebastjanartic 2025-09-01 13:29:45 +00:00
parent a1ef7eb7e4
commit c0f16f92e4
2 changed files with 4 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756733333595.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

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

@ -278,26 +278,17 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
))} ))}
</div> </div>
{/* Navigation arrows at the end of each row - only on desktop */} {/* Navigation arrow at the end of each row - small square with arrow */}
{!hideScrollButtons && ( {!hideScrollButtons && (
<div className="absolute right-4 top-1/2 -translate-y-1/2 z-[40] flex md:flex flex-col gap-2 bg-red-500/50"> <div className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] hidden md:block">
<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 <Button
onClick={() => scroll('right')} onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')} onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll} 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" className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-16 rounded transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
size="sm" size="sm"
> >
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-4 h-4" />
</Button> </Button>
</div> </div>
)} )}