Tv/live last min (#138)

* Live highlights in new tab

* Add card text

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>

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;

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>