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()}
</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) => {
return (
<div
@ -235,7 +235,7 @@ export const HomeContent = ({ topPadding = "pt-24" }: HomeContentProps) => {
<div ref={lastElementRef} className="h-10 w-full" />
{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) => (
<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 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) => (
<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}
>
{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
to={`/watch/${movie.slug}`}
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>
</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) => (
<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]">

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

@ -6,7 +6,7 @@ export const MovieGrid = ({ movies, loading, title }: { movies: Movie[], loading
return (
<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>}
<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) => (
<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>
</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) => (
<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 (
<div className="px-4 md:px-12 pb-10">
{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) => (
<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 (
<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>}
<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) => (
<Card key={movie.id} movie={movie} />
))}