Added episode number in header (#144)

* Added 'episode' in hero and tv listing * fixed all page * Please the linter --------- Co-authored-by: Pascal Jufer <[email protected]>
directus · Mar 21, 2024 · 29784c0 · 29784c0
1 parent 88d29f7
commit 29784c0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/components/Tv/TVEpisode.vue b/components/Tv/TVEpisode.vue
@@ -3,7 +3,7 @@
 		<img :src="`${directusUrl}/assets/${episode.tile}?width=600`" alt="" />
 		<div>
 			<h3>
-				<span v-if="!hideNumber">{{ episode.episode_number }}:</span>
+				<span v-if="!hideNumber">Episode {{ episode.episode_number }}:</span>
 				{{ episode.title }}
 				<span class="meta">
 					<span v-if="episode.length">{{ episode.length }}m</span>

diff --git a/pages/tv/all.vue b/pages/tv/all.vue
@@ -8,6 +8,9 @@
 			:buttons="heroButtons"
 		/>
 		<BaseContainer class="main">
+			<p class="stat">
+				Displaying all {{ episodes.length }} episodes across {{ shows.length }} shows. We hope you enjoy them!
+			</p>
 			<ul class="episodes">
 				<li v-for="episode in episodesWithShowTitles" :key="episode.id">
 					<TVEpisode :show="episode.season.show" :episode="episode" :hide-number="true" />
@@ -31,10 +34,13 @@ const globals = await directus.request(
 	readSingleton('globals', { fields: ['og', { featured: ['*', { season: [{ show: ['*'] }] }] }] }),
 );
 
+const shows = await directus.request(readItems('shows', { fields: ['id'], limit: -1 }));
+
 const episodes = await directus.request(
 	readItems('episodes', {
 		fields: ['*', { season: ['*', { show: ['title', 'slug'] }] }],
 		sort: ['-published'],
+		limit: -1,
 	}),
 );
 
@@ -79,6 +85,13 @@ useSeoMeta({
 </script>
 
 <style scoped>
+.stat {
+	margin-top: 4rem;
+	margin-bottom: 1rem;
+	font-size: 1.25rem;
+	opacity: 0.5;
+	line-height: 1.125;
+}
 .episodes {
 	padding-left: 0;
 	list-style-type: none;
@@ -87,4 +100,9 @@ useSeoMeta({
 li {
 	margin-top: 2em;
 }
+@media (width > 35rem) {
+	.stat {
+		font-size: 2rem;
+	}
+}
 </style>
diff --git a/pages/tv/index.vue b/pages/tv/index.vue
@@ -2,7 +2,7 @@
 	<TVHero
 		:cover="globals.featured.season.show.cover"
 		:logo="globals.featured.season.show.logo"
-		:title="globals.featured.title"
+		:title="`Episode ${globals.featured.episode_number}: ${globals.featured.title}`"
 		:description="globals.featured.description"
 		:buttons="heroButtons"
 	/>