lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Match My List layout to Films tab (horizontal slider, card sizing)

Browse Source 
Replaced grid layout in My List sections with the same horizontal
scroll slider used by ContentRow: flex gap-8, fixed card widths
(200px/280px), matching padding and overflow behavior. Cards,
spacing, and scrolling now look identical across Films and My List.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-12 13:12:22 +00:00
parent 5e6c1e009a
commit 57db25aa94
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/Browse.vue
View File

@@ -83,11 +83,11 @@
<!-- Continue Watching --> <!-- Continue Watching -->
<div v-if="continueWatching.length > 0" class="content-row"> <div v-if="continueWatching.length > 0" class="content-row">
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Continue Watching</h2> <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Continue Watching</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4"> <div class="flex gap-8 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 pt-6 pb-8">
<div <div
v-for="item in continueWatching" v-for="item in continueWatching"
:key="item.content.id" :key="item.content.id"
class="content-card group/card cursor-pointer" class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
@click="handleContentClick(item.content)" @click="handleContentClick(item.content)"
> >
<div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative"> <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -112,11 +112,11 @@
<!-- Saved Films --> <!-- Saved Films -->
<div v-if="myListContent.length > 0" class="content-row"> <div v-if="myListContent.length > 0" class="content-row">
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Saved Films</h2> <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">Saved Films</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4"> <div class="flex gap-8 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 pt-6 pb-8">
<div <div
v-for="content in myListContent" v-for="content in myListContent"
:key="content.id" :key="content.id"
class="content-card group/card cursor-pointer" class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
@click="handleContentClick(content)" @click="handleContentClick(content)"
> >
<div class="glass-card rounded-lg p-1.5 transition-all duration-300"> <div class="glass-card rounded-lg p-1.5 transition-all duration-300">
@@ -138,11 +138,11 @@
<!-- Rentals --> <!-- Rentals -->
<div v-if="rentedContent.length > 0" class="content-row"> <div v-if="rentedContent.length > 0" class="content-row">
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">My Rentals</h2> <h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">My Rentals</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 px-4"> <div class="flex gap-8 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 pt-6 pb-8">
<div <div
v-for="content in rentedContent" v-for="content in rentedContent"
:key="content.id" :key="content.id"
class="content-card group/card cursor-pointer" class="content-card flex-shrink-0 w-[200px] md:w-[280px] group/card cursor-pointer"
@click="handleContentClick(content)" @click="handleContentClick(content)"
> >
<div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative"> <div class="glass-card rounded-lg p-1.5 transition-all duration-300 relative">
@@ -423,6 +423,15 @@ onMounted(() => {
overflow-x: hidden; overflow-x: hidden;
} }
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* Hero Title Styles */ /* Hero Title Styles */
.hero-title { .hero-title {
background: linear-gradient(to right, #fafafa, #9ca3af); background: linear-gradient(to right, #fafafa, #9ca3af);