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

Improve video card display and carousel interaction on hover

Browse Source 
Adjust z-index values for video cards and carousel containers, simplifying hover effect logic in CSS and component code.

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/kdQ95gE
This commit is contained in:
sebastjanartic 2025-08-29 18:20:32 +00:00
parent fa28e5fecb
commit 004d118ff3
3 changed files with 11 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/simple-carousel.tsx
View File

@ -96,12 +96,12 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
}, [category.videos.length]); }, [category.videos.length]);
return ( return (
<div className="relative group mb-8 carousel-track" style={{ overflow: 'visible' }}> <div className="relative group mb-8" style={{ overflow: 'visible', zIndex: 1 }}>
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4"> <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title} {category.title}
</h2> </h2>
<div className="relative -mx-8 px-8" style={{ overflow: 'visible' }}> <div className="relative" style={{ overflow: 'visible', zIndex: 1 }}>
{/* Left scroll button */} {/* Left scroll button */}
<button <button
onClick={() => scroll('left')} onClick={() => scroll('left')}
@ -125,14 +125,15 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
{/* Scroll container */} {/* Scroll container */}
<div <div
ref={scrollContainerRef} ref={scrollContainerRef}
className="overflow-x-auto -mx-4 px-4" className="overflow-x-auto"
style={{ style={{
overflowY: 'visible', overflowY: 'visible',
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none' msOverflowStyle: 'none',
zIndex: 1
}} }}
> >
<div className="flex space-x-4 pb-4 w-max -my-4 py-4" style={{ overflow: 'visible' }}> <div className="flex space-x-4 pb-4 w-max" style={{ overflow: 'visible', zIndex: 1 }}>
{/* Create many copies for infinite feel */} {/* Create many copies for infinite feel */}
{Array.from({ length: 20 }).map((_, copyIndex) => {Array.from({ length: 20 }).map((_, copyIndex) =>
category.videos.map((video, videoIndex) => ( category.videos.map((video, videoIndex) => (

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

@ -168,17 +168,11 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
transformStyle: 'preserve-3d', transformStyle: 'preserve-3d',
transition: 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s ease', transition: 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s ease',
willChange: 'transform', willChange: 'transform',
zIndex: isHovered ? 999999 : 1, zIndex: isHovered ? 999999999 : 1,
position: 'relative' position: 'relative'
}} }}
onMouseEnter={() => { onMouseEnter={() => setIsHovered(true)}
setIsHovered(true); onMouseLeave={() => setIsHovered(false)}
document.body.classList.add('video-card-hovered');
}}
onMouseLeave={() => {
setIsHovered(false);
document.body.classList.remove('video-card-hovered');
}}
> >
{/* Video preview container */} {/* Video preview container */}
<div <div

18
client/src/index.css
View File

@ -387,23 +387,9 @@ input[data-testid*="search"]::placeholder {
opacity: 0; opacity: 0;
} }
/* Video card hover effect with maximum z-index */ /* Simple video card hover - just z-index, no overflow changes */
.video-card:hover { .video-card:hover {
z-index: 2147483647 !important; z-index: 999999999 !important;
transform: scale(1.35) !important;
}
/* When video is being hovered (managed by JavaScript), make all containers overflow visible */
body.video-card-hovered .carousel-track,
body.video-card-hovered .netflix-grid-container,
body.video-card-hovered div:not([class*="overflow-x-auto"]):not([class*="overflow-y-auto"]) {
overflow: visible !important;
}
/* Keep scroll functionality intact for horizontal scroll containers */
body.video-card-hovered div[class*="overflow-x-auto"] {
overflow-x: auto !important;
overflow-y: visible !important;
} }
/* Hide picture-in-picture button on all video elements */ /* Hide picture-in-picture button on all video elements */