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

Refine video card display for improved mobile and desktop presentation

Browse Source 
Remove conditional rendering for gradient overlay and adjust mobile info section in VideoCard component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 45a1dcfc-f8a2-475a-a6b9-96fbb841dc27
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/45a1dcfc-f8a2-475a-a6b9-96fbb841dc27/HwcENYL
This commit is contained in:
sebastjanartic 2025-09-17 07:26:15 +00:00
parent 9a1fc2fc4d
commit 2a300c0d59
2 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@ -15,6 +15,10 @@ run = ["npm", "run", "start"]
localPort = 5000
externalPort = 80
[[ports]]
localPort = 38701
externalPort = 3000
[env]
PORT = "5000"

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

@ -323,8 +323,8 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
)}
{/* Desktop gradient overlay with title - hidden on mobile video pages */}
{!showPreview && !hideOverlay && !(isMobile && isVideoPage) && (
{/* Gradient overlay with title */}
{!showPreview && !hideOverlay && (
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
<div className="w-full">
{/* Artist/Performer in UPPERCASE - first line */}
@ -340,17 +340,9 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
)}
</div>
{/* Mobile info section - below video - only on video pages */}
{/* Mobile additional info section - below video - only on video pages */}
{isMobile && isVideoPage && (
<div className="mt-3 px-1">
{/* Artist/Performer in UPPERCASE - first line */}
<h3 className="text-white font-bold text-base leading-tight mb-1 uppercase" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
{(video.title.split(' - ')[0] || 'video.folx.tv').length > 30 ? (video.title.split(' - ')[0] || 'video.folx.tv').substring(0, 30) + '...' : (video.title.split(' - ')[0] || 'video.folx.tv')}
</h3>
{/* Song title - second line */}
<h4 className="text-white/85 font-medium text-sm leading-tight mb-2" style={{fontFamily: 'Inter, sans-serif'}}>
{(video.title.split(' - ')[1] || video.title).length > 40 ? (video.title.split(' - ')[1] || video.title).substring(0, 40) + '...' : (video.title.split(' - ')[1] || video.title)}
</h4>
{/* Views and Date in one line */}
<div className="flex items-center justify-between text-white/70 text-sm mb-2">