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

Improve video card display and text readability on mobile devices

Browse Source 
Adjust font sizes and line clamp for video titles and descriptions in the VideoCard component for better mobile presentation.

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:11:32 +00:00
parent 98a6f4860e
commit 0bd2357d80
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756829434674.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

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

@ -309,21 +309,21 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{isMobile && isVideoPage && ( {isMobile && isVideoPage && (
<div className="mt-3 px-1"> <div className="mt-3 px-1">
{/* Full title */} {/* Full title */}
<h3 className="text-white font-bold text-base leading-tight mb-2" style={{fontFamily: 'Poppins, Inter, sans-serif'}}> <h3 className="text-white font-bold text-sm leading-5 mb-2" style={{fontFamily: 'Poppins, Inter, sans-serif'}}>
{video.title} {video.title}
</h3> </h3>
{/* Views and Date 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-xs mb-2">
<span>{formatViews(video.views || 0)}</span> <span>{formatViews(video.views || 0)}</span>
<span>{formatDate(video.createdAt)}</span> <span>{formatDate(video.createdAt)}</span>
</div> </div>
{/* Description with expand/collapse */} {/* Description with expand/collapse */}
{(video.title.split(' - ')[1] || video.description) && ( {(video.title.split(' - ')[1] || video.description) && (
<div className="text-white/70 text-sm"> <div className="text-white/70 text-xs leading-relaxed">
<div className="flex items-start"> <div className="flex items-start">
<p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}> <p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-2'}`}>
{video.title.split(' - ')[1] || video.description || ''} {video.title.split(' - ')[1] || video.description || ''}
</p> </p>
<button <button
@ -332,7 +332,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
e.stopPropagation(); e.stopPropagation();
setShowMoreInfo(!showMoreInfo); setShowMoreInfo(!showMoreInfo);
}} }}
className="ml-2 text-white/60 hover:text-white/80 text-sm transition-colors duration-200 flex-shrink-0" className="ml-2 text-white/60 hover:text-white/80 text-xs transition-colors duration-200 flex-shrink-0 font-medium"
> >
{showMoreInfo ? 'weniger' : 'mehr'} {showMoreInfo ? 'weniger' : 'mehr'}
</button> </button>