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

Improve the display of video categories and cards for better visual presentation

Browse Source 
Refactors the `CategoryRow` component to simplify its structure, removing hover effects and navigation arrows while adjusting the styling of category titles and video cards for a cleaner layout.

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/3f1nxbo
This commit is contained in:
sebastjanartic 2025-09-01 17:27:39 +00:00
parent 4b283740e2
commit 8142601cea
1 changed files with 5 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -237,17 +237,16 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
return (
<div
className="relative group mb-6"
onMouseLeave={() => setClickedVideoId(null)}
>
<h2 className="text-lg font-medium text-bunny-light mb-1 ml-4 mr-2 leading-tight uppercase relative z-10 first:mt-8">
<h2 className="text-xl font-semibold text-white mb-4 px-4">
{category.title}
</h2>
<div className="relative overflow-visible pt-[25px] pb-[25px]">
<div className="relative">
{/* Scrollable video row - true edge to edge */}
<div
ref={scrollRef}
className="flex gap-4 overflow-x-auto scrollbar-hide pb-2 pl-4 pr-4"
className="flex gap-4 overflow-x-auto pl-4 pr-4"
style={{
maxWidth: '960px',
margin: '0 auto',
@ -258,50 +257,19 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => (
<div
key={video.id}
className="flex-shrink-0 w-[220px] relative group hover:z-50"
onMouseEnter={() => setClickedVideoId(video.id)}
className="flex-shrink-0 w-[280px]"
>
{/* Top 10 Number overlay for first category */}
{category.title.includes("Meistgesehen") && index < 10 && clickedVideoId !== video.id && (
<div className="absolute top-0 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
style={{
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
WebkitTextStroke: '2px rgba(0,0,0,0.8)'
}}>
{index + 1}
</div>
)}
<VideoCard
video={video}
onClick={(video) => {
setClickedVideoId(video.id);
onVideoClick(video);
}}
className="w-full hover:scale-102 hover:z-50 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
className="w-full rounded-lg overflow-hidden"
/>
</div>
))}
</div>
{/* Navigation arrows - black circles */}
<div className="absolute left-2 top-1/2 -translate-y-1/2 z-[60]">
<Button
onClick={() => scroll('left')}
className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
size="sm"
>
<ChevronLeft className="w-4 h-4" />
</Button>
</div>
<div className="absolute right-2 top-1/2 -translate-y-1/2 z-[60]">
<Button
onClick={() => scroll('right')}
className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
size="sm"
>
<ChevronRight className="w-4 h-4" />
</Button>
</div>
</div>
</div>
);