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

Improve the appearance of navigation dots on mobile devices

Browse Source 
Adjust the size and spacing of mobile navigation dots in the Netflix grid component to enhance visual appeal and adhere to design requirements.

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:27:54 +00:00
parent a7ee41a2c4
commit 3722642531
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -384,7 +384,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
</div>
{/* Mobile navigation dots - only visible on mobile, under all video rows */}
<div className="md:hidden flex justify-center mt-4 space-x-2">
<div className="md:hidden flex justify-center mt-3 gap-1">
{Array.from({ length: Math.min(10, category.videos.length) }, (_, index) => (
<button
key={index}
@ -404,9 +404,11 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
: 'bg-white/15 hover:bg-white/25'
}`}
style={{
width: '3px',
height: '3px',
transform: index === currentIndex ? 'scale(1.3)' : 'scale(1)'
width: '1.5px',
height: '1.5px',
minWidth: '1.5px',
minHeight: '1.5px',
transform: index === currentIndex ? 'scale(1.5)' : 'scale(1)'
}}
aria-label={`Go to card ${index + 1}`}
/>