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

Adjust video card popup behavior and appearance for better display

Browse Source 
Modify the video card component to adjust the popup overlay's positioning, size, and styling to ensure it remains within the card boundaries and improves visual presentation. This includes changes to class names, element sizes, and gradient overlays.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
This commit is contained in:
sebastjanartic 2025-08-29 10:43:07 +00:00
parent c631dd9f96
commit b7d972cbf5
1 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -173,7 +173,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
return (
<div
data-testid={`card-video-${video.id}`}
className={`video-card transition-all duration-300 ${showPopup ? 'z-50 scale-150 -translate-y-8' : 'hover:scale-[1.02]'} p-1 md:p-2 ${className}`}
className={`video-card transition-all duration-300 hover:scale-[1.02] p-1 md:p-2 ${className} ${showPopup ? 'z-50' : ''}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
@ -247,41 +247,40 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
</h3>
</div>
{/* Netflix-style popup overlay */}
{/* Netflix-style popup overlay - stays within card */}
{showPopup && (
<div className="absolute inset-0 bg-bunny-dark rounded-lg shadow-2xl border border-gray-700 p-4 z-50">
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/80 to-transparent rounded-b-lg p-3">
{/* Action buttons */}
<div className="flex items-center gap-2 mb-3">
<div className="flex items-center gap-1.5 mb-2">
<button
onClick={() => onClick?.(video)}
className="bg-white text-black rounded-full w-8 h-8 flex items-center justify-center hover:bg-gray-200 transition-colors"
className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center hover:bg-gray-200 transition-colors"
>
<Play className="w-4 h-4 ml-0.5" fill="currentColor" />
<Play className="w-3 h-3 ml-0.5" fill="currentColor" />
</button>
<button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors">
<Plus className="w-4 h-4" />
<button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
<Plus className="w-3 h-3" />
</button>
<button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors">
<ThumbsUp className="w-4 h-4" />
<button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
<ThumbsUp className="w-3 h-3" />
</button>
<button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors ml-auto">
<ChevronDown className="w-4 h-4" />
<button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors ml-auto">
<ChevronDown className="w-3 h-3" />
</button>
</div>
{/* Video info */}
<div className="text-white">
<h4 className="font-bold text-sm mb-1 line-clamp-2">{video.title}</h4>
<div className="flex items-center gap-2 text-xs text-gray-300 mb-2">
<h4 className="font-bold text-xs mb-1 line-clamp-1">{video.title}</h4>
<div className="flex items-center gap-2 text-xs text-gray-300">
<span className="border border-gray-500 px-1 rounded text-xs">HD</span>
<span>{formatDuration(video.duration)}</span>
</div>
<div className="flex items-center gap-1 text-xs text-gray-300">
<span>Drama</span>
<span>•</span>
<span>Thriller</span>
<span>•</span>
<span>Action</span>
{video.category && (
<>
<span>•</span>
<span>{video.category}</span>
</>
)}
</div>
</div>
</div>