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

Improve video card scaling and carousel element visibility

Browse Source 
Adjusted carousel container and card styles for better visual presentation and hover effects.

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:21:56 +00:00
parent 004d118ff3
commit eb99485278
3 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
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" style={{ overflow: 'visible', zIndex: 1 }}> <div className="relative group mb-12">
<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" style={{ overflow: 'visible', zIndex: 1 }}> <div className="relative">
{/* Left scroll button */} {/* Left scroll button */}
<button <button
onClick={() => scroll('left')} onClick={() => scroll('left')}
@ -125,15 +125,13 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
{/* Scroll container */} {/* Scroll container */}
<div <div
ref={scrollContainerRef} ref={scrollContainerRef}
className="overflow-x-auto" className="overflow-x-auto pb-8"
style={{ style={{
overflowY: 'visible',
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none', msOverflowStyle: 'none'
zIndex: 1
}} }}
> >
<div className="flex space-x-4 pb-4 w-max" style={{ overflow: 'visible', zIndex: 1 }}> <div className="flex space-x-4 w-max">
{/* 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) => (

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

@ -163,12 +163,12 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
return ( return (
<div <div
data-testid={`card-video-${video.id}`} data-testid={`card-video-${video.id}`}
className={`video-card transition-all duration-500 ease-out hover:scale-[1.35] p-1 md:p-2 ${className}`} className={`video-card transition-all duration-300 ease-out hover:scale-110 p-1 md:p-2 ${className}`}
style={{ style={{
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.3s ease',
willChange: 'transform', willChange: 'transform',
zIndex: isHovered ? 999999999 : 1, zIndex: isHovered ? 9999 : 1,
position: 'relative' position: 'relative'
}} }}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}

4
client/src/index.css
View File

@ -387,9 +387,9 @@ input[data-testid*="search"]::placeholder {
opacity: 0; opacity: 0;
} }
/* Simple video card hover - just z-index, no overflow changes */ /* Clean video card hover with moderate scaling */
.video-card:hover { .video-card:hover {
z-index: 999999999 !important; z-index: 9999 !important;
} }
/* Hide picture-in-picture button on all video elements */ /* Hide picture-in-picture button on all video elements */