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

Improve mobile display of video information and reduce clutter

Browse Source 
Adjusted the mobile view in VideoCard to display only the video title, views, and creation date, removing the "Show More/Less" functionality and associated text to simplify the interface.

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 15:59:31 +00:00
parent b566229972
commit 4bb7124113
1 changed files with 4 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -291,40 +291,16 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{/* Mobile info section - below video */} {/* Mobile info section - below video */}
{isMobile && ( {isMobile && (
<div className="mt-3 px-1"> <div className="mt-3 px-1">
{/* Title */} {/* Title - first line only */}
<h3 className="text-white font-bold text-base leading-tight mb-2 line-clamp-1" style={{fontFamily: 'Poppins, Inter, sans-serif'}}> <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.split(' - ')[0] || 'go4.video'}
</h3> </h3>
{/* Duration and Views in one line */} {/* Views and Date in one line */}
<div className="flex items-center justify-between text-white/70 text-sm mb-2"> <div className="flex items-center justify-between text-white/70 text-sm">
<span>{formatViews(video.views || 0)}</span> <span>{formatViews(video.views || 0)}</span>
<span>{formatDate(video.createdAt)}</span> <span>{formatDate(video.createdAt)}</span>
</div> </div>
{/* Show More / Show Less button */}
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMoreInfo(!showMoreInfo);
}}
className="text-white/60 hover:text-white/80 text-sm transition-colors duration-200"
>
{showMoreInfo ? 'Weniger anzeigen' : 'Mehr anzeigen'}
</button>
{/* Full text when expanded */}
<div className="mt-2 text-white/70 text-sm">
<p className={showMoreInfo ? "" : "line-clamp-1"}>
{video.title.split(' - ')[1] || video.title}
</p>
{showMoreInfo && video.description && (
<p className="mt-1 text-xs text-white/60">
{video.description}
</p>
)}
</div>
</div> </div>
)} )}