From be7ddfecc713c08d31d56902ca12036b49a3338a Mon Sep 17 00:00:00 2001
From: Kevin Lewis <kvn@lws.io>
Date: Sun, 3 Mar 2024 16:36:08 +0100
Subject: [PATCH] Tv/live last min (#138)

* Live highlights in new tab

* Add card text
---
 components/Tv/TVCategory.vue |  1 +
 components/Tv/TVShow.vue     | 23 +++++++++++++++++++++--
 pages/tv/live/[event].vue    |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/components/Tv/TVCategory.vue b/components/Tv/TVCategory.vue
index ac4ecd44..f2449f62 100644
--- a/components/Tv/TVCategory.vue
+++ b/components/Tv/TVCategory.vue
@@ -22,6 +22,7 @@
 						:tile="show.shows_id.tile"
 						:title="show.shows_id.title"
 						:description="show.shows_id.one_liner"
+						:overlay="show.shows_id.card_text"
 					/>
 				</li>
 			</ul>
diff --git a/components/Tv/TVShow.vue b/components/Tv/TVShow.vue
index da4d0ece..5a95d089 100644
--- a/components/Tv/TVShow.vue
+++ b/components/Tv/TVShow.vue
@@ -1,6 +1,8 @@
 <template>
 	<NuxtLink :to="`/tv/${slug}`" class="show">
-		<img :src="`${directusUrl}/assets/${tile}?width=600`" :alt="title" />
+		<div class="tile" :style="`background-image: url(${directusUrl}/assets/${tile}?width=600)`">
+			<span v-if="overlay">{{ overlay }}</span>
+		</div>
 		<h3>{{ title }}</h3>
 		<p>{{ description }}</p>
 	</NuxtLink>
@@ -18,6 +20,7 @@ defineProps({
 	tile: String,
 	title: String,
 	description: String,
+	overlay: String,
 });
 </script>
 
@@ -26,9 +29,25 @@ defineProps({
 	width: 100%;
 	display: block;
 	text-decoration: none;
-	img {
+	.tile {
 		width: 100%;
+		aspect-ratio: 16/9;
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center;
 		border-radius: var(--rounded-lg);
+		position: relative;
+		span {
+			background: var(--tv-background);
+			position: absolute;
+			right: 0;
+			top: 13px;
+			padding: 0 6px;
+			color: white;
+			border-top-left-radius: var(--rounded-md);
+			border-bottom-left-radius: var(--rounded-md);
+			font-size: 0.8rem;
+		}
 	}
 	h3 {
 		color: white;
diff --git a/pages/tv/live/[event].vue b/pages/tv/live/[event].vue
index 74326bfe..a2fd4403 100644
--- a/pages/tv/live/[event].vue
+++ b/pages/tv/live/[event].vue
@@ -31,7 +31,7 @@
 				<h2>Live Highlights</h2>
 				<ol v-if="highlights.length">
 					<li v-for="(highlight, index) in highlights" :key="highlight.title">
-						<a :href="highlight.url">
+						<a :href="highlight.url" target="_blank">
 							<BaseBadge v-if="index === 0" label="Latest" color="gray" />
 							<span>{{ highlight.title }}</span>
 						</a>