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

Add expandable description to video cards and improve info display

Browse Source 
Update `VideoCard` component to display the full video title, views, and creation date. Implements an expandable description section with "mehr" and "weniger" toggles for mobile view.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
This commit is contained in:
sebastjanartic 2025-09-02 16:04:04 +00:00
parent 4bb7124113
commit e790b679fc
1 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -291,16 +291,37 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{/* Mobile info section - below video */}
{isMobile && (
<div className="mt-3 px-1">
{/* Title - first line only */}
{/* Full title */}
<h3 className="text-white font-bold text-base leading-tight mb-2" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
{video.title.split(' - ')[0] || 'go4.video'}
{video.title}
</h3>
{/* Views and Date in one line */}
<div className="flex items-center justify-between text-white/70 text-sm">
<div className="flex items-center justify-between text-white/70 text-sm mb-2">
<span>{formatViews(video.views || 0)}</span>
<span>{formatDate(video.createdAt)}</span>
</div>
{/* Description with expand/collapse */}
{(video.title.split(' - ')[1] || video.description) && (
<div className="text-white/70 text-sm">
<div className="flex items-start">
<p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}>
{video.title.split(' - ')[1] || video.description || ''}
</p>
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMoreInfo(!showMoreInfo);
}}
className="ml-2 text-white/60 hover:text-white/80 text-sm transition-colors duration-200 flex-shrink-0"
>
{showMoreInfo ? 'weniger' : 'mehr'}
</button>
</div>
</div>
)}
</div>
)}