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

Improve video browsing experience with responsive scrolling and layout adjustments

Browse Source 
Update UI elements for better navigation and content display, including responsive scrolling in category rows, adjusted margins, and optimized video card widths for various screen sizes. Also enhances the overall layout with wider containers for improved viewing.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e9f2b36-ec9c-4acc-b19b-5304fa9790c5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/8e9f2b36-ec9c-4acc-b19b-5304fa9790c5/0CzYEcy
This commit is contained in:
sebastjanartic 2025-09-01 14:48:03 +00:00
parent 0c1d1e7053
commit 7111366f08
4 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756737966563.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
attached_assets/image_1756738021399.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

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

@ -153,7 +153,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
<> <>
<div> <div>
{categories.map((category, categoryIndex) => ( {categories.map((category, categoryIndex) => (
<div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-6 mb-8' : 'mb-8'}`}> <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-8 mb-12' : 'mb-12'}`}>
<CategoryRow <CategoryRow
category={category} category={category}
onVideoClick={handleVideoClick} onVideoClick={handleVideoClick}
@ -188,9 +188,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Scroll exactly 4 cards at a time (300px per card + 12px gap = 312px per card) // Responsive scroll amount based on viewport
const cardWidth = 300 + 12; // card width + gap const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = cardWidth * 4; // 4 cards at once const scrollAmount = containerWidth * 0.85; // Scroll 85% of visible area
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
const targetScroll = direction === 'left' const targetScroll = direction === 'left'
@ -247,13 +247,13 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - true edge to edge */} {/* Scrollable video row - true edge to edge */}
<div <div
ref={scrollRef} ref={scrollRef}
className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-4 md:w-[1240px] md:mx-auto" className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-4"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }} style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
> >
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<div <div
key={video.id} key={video.id}
className="flex-shrink-0 w-[280px] sm:w-[320px] md:w-[300px] lg:w-[300px] xl:w-[300px] relative group hover:z-30" className="flex-shrink-0 w-[280px] sm:w-[320px] md:w-[280px] lg:w-[320px] xl:w-[360px] relative group hover:z-30"
onMouseEnter={() => setClickedVideoId(video.id)} onMouseEnter={() => setClickedVideoId(video.id)}
> >
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}

2
client/src/pages/home.tsx
View File

@ -77,7 +77,7 @@ export default function Home() {
<div className="has-fixed-header lg:mx-[38px]" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}> <div className="has-fixed-header lg:mx-[38px]" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
{/* STICKY HEADER */} {/* STICKY HEADER */}
<div className="header-sticky bg-transparent overflow-hidden"> <div className="header-sticky bg-transparent overflow-hidden">
<div className="max-w-5xl mx-auto px-4 py-4"> <div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{/* Left side - Logo */} {/* Left side - Logo */}
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">