Match My List and filter grid text styling to ContentRow
Title and description text sizes in the My List (Continue Watching, Saved Films, Rentals) and filtered grid views were smaller than the Films tab ContentRow cards. Aligned all to use the same text-base/md:text-xl title and text-base description sizing. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -82,7 +82,7 @@
|
||||
<template v-if="isMyListTab && isLoggedInAnywhere">
|
||||
<!-- Continue Watching -->
|
||||
<div v-if="continueWatching.length > 0" class="content-row">
|
||||
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 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
|
||||
v-for="item in continueWatching"
|
||||
@@ -102,8 +102,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ item.content.title }}</h3>
|
||||
<p class="text-xs text-white/60 truncate hidden md:block">{{ item.content.description }}</p>
|
||||
<h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ item.content.title }}</h3>
|
||||
<p class="text-base text-white/60 truncate hidden md:block">{{ item.content.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,7 +111,7 @@
|
||||
|
||||
<!-- Saved Films -->
|
||||
<div v-if="myListContent.length > 0" class="content-row">
|
||||
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 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
|
||||
v-for="content in myListContent"
|
||||
@@ -128,8 +128,8 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3>
|
||||
<p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
|
||||
<h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
|
||||
<p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
<!-- Rentals -->
|
||||
<div v-if="rentedContent.length > 0" class="content-row">
|
||||
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 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
|
||||
v-for="content in rentedContent"
|
||||
@@ -157,8 +157,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3>
|
||||
<p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
|
||||
<h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
|
||||
<p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -174,7 +174,7 @@
|
||||
<!-- ===== FILMS TAB: Filtered Grid ===== -->
|
||||
<template v-else-if="isFilterActive">
|
||||
<div class="content-row">
|
||||
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-6 px-4 uppercase">
|
||||
<h2 class="content-row-title text-xl md:text-2xl font-bold text-white mb-4 px-4 uppercase">
|
||||
{{ activeAlgorithmLabel }}
|
||||
</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">
|
||||
@@ -193,8 +193,8 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<h3 class="text-sm md:text-base font-semibold text-white truncate">{{ content.title }}</h3>
|
||||
<p class="text-xs text-white/60 truncate hidden md:block">{{ content.description }}</p>
|
||||
<h3 class="text-base md:text-xl font-semibold md:font-bold text-white truncate">{{ content.title }}</h3>
|
||||
<p class="text-base text-white/60 truncate hidden md:block">{{ content.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user