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

Adjust video card spacing and visual elements for improved appearance

Browse Source 
Update the spacing between videos in the Netflix grid component by changing the gap from '1' to '3'. Modify the styling of the video title overlay in the VideoCard component, increasing padding, font sizes, and overall visual prominence for a better user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/DVZN4Rp
This commit is contained in:
sebastjanartic 2025-08-30 14:49:59 +00:00
parent 4b3c7fa7d4
commit 54d1471e99
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756565296993.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

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

@ -226,7 +226,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - true edge to edge */} {/* Scrollable video row - true edge to edge */}
<div <div
ref={scrollRef} ref={scrollRef}
className="flex gap-1 overflow-x-auto scrollbar-hide pb-0 -mx-1" className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 -mx-1"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }} style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
> >
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (

12
client/src/components/video-card.tsx
View File

@ -212,12 +212,12 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{/* Title overlay - only show when not playing preview */} {/* Title overlay - only show when not playing preview */}
{!showPreview && ( {!showPreview && (
<div className="absolute bottom-2 left-2 right-2 bg-gradient-to-r from-black/80 via-purple-900/60 to-black/80 text-white text-sm px-3 py-2 rounded-lg backdrop-blur-md border border-white/10 shadow-xl z-10"> <div className="absolute bottom-2 left-2 right-2 bg-gradient-to-r from-black/85 via-purple-900/70 to-black/85 text-white px-4 py-3 rounded-xl backdrop-blur-lg border border-white/20 shadow-2xl z-10">
<div className="truncate font-bold text-white drop-shadow-lg">{video.title}</div> <div className="truncate font-bold text-white text-base drop-shadow-lg mb-1">{video.title}</div>
<div className="text-xs text-purple-100/90 flex items-center space-x-2 mt-1"> <div className="text-sm text-purple-100/95 flex items-center space-x-3">
<span className="bg-blue-500/20 px-2 py-0.5 rounded-full">{formatViews(video.views)}</span> <span className="bg-blue-500/30 px-3 py-1 rounded-full font-medium">{formatViews(video.views)}</span>
<span className="text-white/60">•</span> <span className="text-white/70 font-bold">•</span>
<span className="bg-purple-500/20 px-2 py-0.5 rounded-full">{formatDate(video.createdAt)}</span> <span className="bg-purple-500/30 px-3 py-1 rounded-full font-medium">{formatDate(video.createdAt)}</span>
</div> </div>
</div> </div>
)} )}