vndangkhoa/kv-netflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

V3.2 Release: Optimized Mobile Grid Layouts (2-3 columns) across all themes

Browse source
This commit is contained in:
vndangkhoa 2026-02-16 08:28:21 +07:00
parent fffae35a52
commit 636e751b31
4 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend-react/src/components/HomeContent.tsx
View file

@ -183,7 +183,7 @@ export const HomeContent = ({ topPadding = "pt-24" }: HomeContentProps) => {
{getTitle()} {getTitle()}
</h2> </h2>
<div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] sm:grid-cols-[repeat(auto-fill,minmax(180px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3 md:gap-4"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
{movies.map((movie, index) => { {movies.map((movie, index) => {
return ( return (
<div <div
@ -235,7 +235,7 @@ export const HomeContent = ({ topPadding = "pt-24" }: HomeContentProps) => {
<div ref={lastElementRef} className="h-10 w-full" /> <div ref={lastElementRef} className="h-10 w-full" />
{loading && ( {loading && (
<div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] sm:grid-cols-[repeat(auto-fill,minmax(180px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3 md:gap-4 mt-4"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4 mt-4">
{[...Array(14)].map((_, i) => ( {[...Array(14)].map((_, i) => (
<div key={i} className="aspect-[2/3] bg-white/5 rounded-xl animate-pulse" /> <div key={i} className="aspect-[2/3] bg-white/5 rounded-xl animate-pulse" />
))} ))}

6
frontend-react/src/components/MovieRow.tsx
View file

@ -86,7 +86,7 @@ const MovieRow = ({ title, category, searchQuery, limit, layout = 'row', movies:
))} ))}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{[...Array(10)].map((_, i) => ( {[...Array(10)].map((_, i) => (
<div key={i} className="aspect-[2/3] bg-white/5 rounded-xl animate-pulse" /> <div key={i} className="aspect-[2/3] bg-white/5 rounded-xl animate-pulse" />
))} ))}
@ -170,7 +170,7 @@ const MovieRow = ({ title, category, searchQuery, limit, layout = 'row', movies:
onPointerMove={handlePointerMove} onPointerMove={handlePointerMove}
> >
{movies.map((movie) => ( {movies.map((movie) => (
<div key={movie.id} className="min-w-[150px] md:min-w-[180px] lg:min-w-[200px] snap-start relative group/card"> <div key={movie.id} className="min-w-[130px] sm:min-w-[150px] md:min-w-[180px] lg:min-w-[200px] snap-start relative group/card">
<Link <Link
to={`/watch/${movie.slug}`} to={`/watch/${movie.slug}`}
className={`block relative aspect-[2/3] rounded-xl overflow-hidden bg-white/5 ${isDragging ? 'pointer-events-none' : ''}`} className={`block relative aspect-[2/3] rounded-xl overflow-hidden bg-white/5 ${isDragging ? 'pointer-events-none' : ''}`}
@ -223,7 +223,7 @@ const MovieRow = ({ title, category, searchQuery, limit, layout = 'row', movies:
</button> </button>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] sm:grid-cols-[repeat(auto-fill,minmax(180px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-3 md:gap-4"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4">
{movies.map((movie) => ( {movies.map((movie) => (
<div key={movie.id} className="relative group flex flex-col h-full"> <div key={movie.id} className="relative group flex flex-col h-full">
<Link to={`/watch/${movie.slug}`} className="block relative aspect-[2/3] w-full rounded-xl overflow-hidden bg-[#1a1a1a]"> <Link to={`/watch/${movie.slug}`} className="block relative aspect-[2/3] w-full rounded-xl overflow-hidden bg-[#1a1a1a]">

4
frontend-react/src/themes/apple/MovieGrid.tsx
View file

@ -6,7 +6,7 @@ export const MovieGrid = ({ movies, loading, title }: { movies: Movie[], loading
return ( return (
<div className="px-6 md:px-16 pt-8 pb-16"> <div className="px-6 md:px-16 pt-8 pb-16">
{title && <h2 className="text-2xl font-bold mb-6 text-white/90">{title}</h2>} {title && <h2 className="text-2xl font-bold mb-6 text-white/90">{title}</h2>}
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-x-6 gap-y-10"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-x-6 gap-y-10">
{[...Array(10)].map((_, i) => ( {[...Array(10)].map((_, i) => (
<div key={i} className="aspect-[2/3] bg-white/5 rounded-2xl animate-pulse" /> <div key={i} className="aspect-[2/3] bg-white/5 rounded-2xl animate-pulse" />
))} ))}
@ -22,7 +22,7 @@ export const MovieGrid = ({ movies, loading, title }: { movies: Movie[], loading
<button className="text-blue-400 text-sm font-medium hover:text-blue-300 transition-colors">See All</button> <button className="text-blue-400 text-sm font-medium hover:text-blue-300 transition-colors">See All</button>
</div> </div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-x-8 gap-y-12"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-x-8 gap-y-12">
{movies.map((movie) => ( {movies.map((movie) => (
<Card key={movie.id} movie={movie} /> <Card key={movie.id} movie={movie} />
))} ))}

4
frontend-react/src/themes/netflix/MovieGrid.tsx
View file

@ -6,7 +6,7 @@ export const MovieGrid = ({ movies, loading, title }: { movies: Movie[], loading
return ( return (
<div className="px-4 md:px-12 pb-10"> <div className="px-4 md:px-12 pb-10">
{title && <h2 className="text-xl font-bold mb-4 text-white">{title}</h2>} {title && <h2 className="text-xl font-bold mb-4 text-white">{title}</h2>}
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
{[...Array(12)].map((_, i) => ( {[...Array(12)].map((_, i) => (
<div key={i} className="aspect-[2/3] bg-[#222] rounded-md animate-pulse" /> <div key={i} className="aspect-[2/3] bg-[#222] rounded-md animate-pulse" />
))} ))}
@ -18,7 +18,7 @@ export const MovieGrid = ({ movies, loading, title }: { movies: Movie[], loading
return ( return (
<div className="px-4 md:px-12 pb-10"> <div className="px-4 md:px-12 pb-10">
{title && <h2 className="text-xl font-bold mb-4 text-white hover:text-gray-300 cursor-pointer transition-colors inline-block">{title} &gt;</h2>} {title && <h2 className="text-xl font-bold mb-4 text-white hover:text-gray-300 cursor-pointer transition-colors inline-block">{title} &gt;</h2>}
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"> <div className="grid grid-cols-2 min-[450px]:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
{movies.map((movie) => ( {movies.map((movie) => (
<Card key={movie.id} movie={movie} /> <Card key={movie.id} movie={movie} />
))} ))}