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

Adjust video display and scrolling for improved mobile viewing

Browse Source 
Update CSS and JavaScript to implement responsive card widths, adjust scroll amounts for different screen sizes (mobile, tablet, desktop), and modify hover effects for a better user experience on mobile devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/6upLu3q
This commit is contained in:
sebastjanartic 2025-08-30 12:46:46 +00:00
parent c035c0bd4d
commit 30b8be3502
1 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/netflix-grid.tsx
View File

@ -136,9 +136,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Responsive scroll amount - wider cards on desktop // Responsive scroll amount - different sizes for mobile/tablet/desktop
const isMobile = window.innerWidth < 768; const width = window.innerWidth;
const scrollAmount = isMobile ? 240 : 336; // Mobile: 224px + gap, Desktop: 320px + gap let scrollAmount;
if (width < 640) {
// Mobile: smaller cards (176px + gap)
scrollAmount = 192;
} else if (width < 768) {
// Small tablet: medium cards (224px + gap)
scrollAmount = 240;
} else {
// Desktop: large cards (320px + gap)
scrollAmount = 336;
}
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
const targetScroll = direction === 'left' const targetScroll = direction === 'left'
? currentScroll - scrollAmount ? currentScroll - scrollAmount
@ -183,10 +195,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }} style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
> >
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<div key={video.id} className="flex-shrink-0 w-56 md:w-80 relative group"> <div key={video.id} className="flex-shrink-0 w-44 sm:w-56 md:w-80 relative group">
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && index < 10 && ( {category.title.includes("Top 10") && index < 10 && (
<div className="absolute top-2 left-2 z-20 text-white font-black text-5xl md:text-7xl drop-shadow-2xl" <div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"
style={{ style={{
textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)', textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
WebkitTextStroke: '2px rgba(0,0,0,0.8)' WebkitTextStroke: '2px rgba(0,0,0,0.8)'
@ -197,7 +209,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
<VideoCard <VideoCard
video={video} video={video}
onClick={onVideoClick} onClick={onVideoClick}
className="w-full hover:scale-110 hover:z-10 transition-all duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden" className="w-full hover:scale-105 md:hover:scale-110 hover:z-10 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
/> />
</div> </div>
))} ))}