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

Improve carousel behavior on mobile devices by snapping cards to the left

Browse Source 
Adjust carousel scrolling logic in `netflix-grid.tsx` to ensure cards snap to the left edge on mobile devices, accounting for container padding and margins, for a better user experience.

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/OdlP8Wj
This commit is contained in:
sebastjanartic 2025-09-03 08:40:33 +00:00
parent 95ad3e6e34
commit 4fcf1e104f
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -270,8 +270,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
if (isMobile) { if (isMobile) {
// On mobile, cards are full width // On mobile, cards snap to left edge
const cardWidth = containerWidth - 24; // Account for margins const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
const gap = 12; const gap = 12;
const newIndex = Math.round(scrollLeft / (cardWidth + gap)); const newIndex = Math.round(scrollLeft / (cardWidth + gap));
setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed) setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
@ -297,14 +297,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const isRightSwipe = distance < -50; // Swipe right (previous) const isRightSwipe = distance < -50; // Swipe right (previous)
if (isLeftSwipe && currentIndex < 9) { // Max index 9 for 10 cards if (isLeftSwipe && currentIndex < 9) { // Max index 9 for 10 cards
// Navigate to next card // Navigate to next card - snap to left edge of screen
const nextIndex = currentIndex + 1; const nextIndex = currentIndex + 1;
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for margins const cardWidth = containerWidth - 24; // Account for container margins
const gap = 12; const gap = 12;
// Scroll so next card aligns to left edge (accounting for container padding)
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: nextIndex * (cardWidth + gap), left: nextIndex * (cardWidth + gap) + 12, // +12 for left container padding
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(nextIndex); setCurrentIndex(nextIndex);
@ -312,14 +313,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
} }
if (isRightSwipe && currentIndex > 0) { if (isRightSwipe && currentIndex > 0) {
// Navigate to previous card // Navigate to previous card - snap to left edge of screen
const prevIndex = currentIndex - 1; const prevIndex = currentIndex - 1;
if (scrollRef.current) { if (scrollRef.current) {
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const cardWidth = containerWidth - 24; // Account for margins const cardWidth = containerWidth - 24; // Account for container margins
const gap = 12; const gap = 12;
// Scroll so previous card aligns to left edge (accounting for container padding)
scrollRef.current.scrollTo({ scrollRef.current.scrollTo({
left: prevIndex * (cardWidth + gap), left: prevIndex * (cardWidth + gap) + 12, // +12 for left container padding
behavior: 'smooth' behavior: 'smooth'
}); });
setCurrentIndex(prevIndex); setCurrentIndex(prevIndex);