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

Adjust video card sizes and remove extra padding for a cleaner look

Browse Source 
Updates the width of video cards in the carousel and modifies the VideoCard component by removing padding, gradient background, and title element to achieve a cleaner visual presentation.

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 20:09:48 +00:00
parent 2ea13f5c10
commit 8f3d1e071f
2 changed files with 3 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -135,7 +135,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
{/* Create many copies for infinite feel */}
{Array.from({ length: 20 }).map((_, copyIndex) =>
category.videos.map((video, videoIndex) => (
<div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-28 md:w-52 relative individual-video-hover">
<div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-48 md:w-80 relative individual-video-hover">
{/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && (
<div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none individual-video-hover:opacity-0 transition-opacity duration-300"

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

@ -163,7 +163,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
return (
<div
data-testid={`card-video-${video.id}`}
className={`video-card transition-all duration-300 ease-out hover:scale-110 p-1 md:p-2 ${className}`}
className={`video-card transition-all duration-300 ease-out hover:scale-110 ${className}`}
style={{
transformStyle: 'preserve-3d',
transition: 'transform 0.3s ease',
@ -176,7 +176,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
>
{/* Video preview container */}
<div
className="relative gradient-card rounded-lg overflow-hidden mb-2 aspect-[9/16] md:aspect-[16/9] cursor-pointer group"
className="relative overflow-hidden cursor-pointer group aspect-[16/9]"
onClick={() => onClick?.(video)}
onMouseMove={handleMouseMove}
>
@ -233,15 +233,6 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
</div>
<div className="space-y-1">
<h3
className="text-sm md:text-base font-medium line-clamp-2 hover:text-bunny-blue transition-colors duration-300 ease-out text-bunny-light cursor-pointer"
onClick={() => onClick?.(video)}
data-testid={`text-title-${video.id}`}
>
{video.title}
</h3>
</div>
</div>
);