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

Improve video details display for mobile users

Browse Source 
Update text sizes and line clamping for video titles, descriptions, and metadata on mobile devices. Add "read more" functionality for truncated descriptions.

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:12:47 +00:00
parent 0bd2357d80
commit 4ee92b9c9e
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -309,34 +309,48 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{isMobile && isVideoPage && (
<div className="mt-3 px-1">
{/* Full title */}
<h3 className="text-white font-bold text-sm leading-5 mb-2" 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}
</h3>
{/* Views and Date in one line */}
<div className="flex items-center justify-between text-white/70 text-xs mb-2">
<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-xs leading-relaxed">
<div className="flex items-start">
<p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-2'}`}>
<div className="text-white/70 text-sm">
<div className="flex items-end">
<p className={`flex-1 ${showMoreInfo ? '' : 'line-clamp-1'}`}>
{video.title.split(' - ')[1] || video.description || ''}
</p>
{!showMoreInfo && (
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMoreInfo(true);
}}
className="ml-1 text-blue-400 hover:text-blue-300 text-sm transition-colors duration-200 flex-shrink-0"
>
preberi več
</button>
)}
</div>
{showMoreInfo && (
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMoreInfo(!showMoreInfo);
setShowMoreInfo(false);
}}
className="ml-2 text-white/60 hover:text-white/80 text-xs transition-colors duration-200 flex-shrink-0 font-medium"
className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors duration-200"
>
{showMoreInfo ? 'weniger' : 'mehr'}
pokaži manj
</button>
</div>
)}
</div>
)}
</div>