From 53a19f7af5f3cb22790cee40a71b15dde35d0801 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 15 Mar 2024 23:16:47 +1300
Subject: [PATCH] Minor style changes

---
 materialious/src/lib/Thumbnail.svelte         | 90 ++++++++++---------
 materialious/src/lib/VideoList.svelte         | 20 +----
 .../src/routes/watch/[slug]/+page.svelte      |  4 +-
 3 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index d66c3031..1fdece23 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -32,49 +32,51 @@
 	});
 </script>
 
-<article class="no-padding transparent" style="width: 100%;">
-	<a class="wave" style="width: 100%; overflow: hidden;" href={`/watch/${video.videoId}`}>
-		{#if loading}
-			<progress class="circle"></progress>
-		{:else if loaded}
-			<img
-				class="responsive"
-				style="object-fit: crop;"
-				src={video.videoThumbnails[3].url}
-				alt="Thumbnail for video"
-			/>
-		{:else}
-			<p>Failed to load image</p>
-		{/if}
-		{#if !('liveVideo' in video) || !video.liveVideo}
-			<div class="absolute right bottom small-margin black white-text small-text">
-				&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
+<a
+	class="wave"
+	style="width: 100%; overflow: hidden;min-height:100px;"
+	href={`/watch/${video.videoId}`}
+>
+	{#if loading}
+		<progress class="circle"></progress>
+	{:else if loaded}
+		<img
+			class="responsive"
+			style="max-width: 100%;height: 100%;"
+			src={video.videoThumbnails[4].url}
+			alt="Thumbnail for video"
+		/>
+	{:else}
+		<p>Failed to load image</p>
+	{/if}
+	{#if !('liveVideo' in video) || !video.liveVideo}
+		<div class="absolute right bottom small-margin black white-text small-text">
+			&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
+		</div>
+	{:else}
+		<div
+			class="absolute right bottom small-margin red white-text small-text"
+			style="padding: 0 1em;"
+		>
+			LIVE
+		</div>
+	{/if}
+</a>
+<div class="small-padding">
+	{#if localStorage.getItem(video.videoId)}
+		<progress value={localStorage.getItem(video.videoId)} max={video.lengthSeconds}></progress>
+	{/if}
+	<nav class="no-margin">
+		<div class="max">
+			<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>
+			<div>
+				<a href={`/channel/${video.authorId}`}>{video.author}</a>{#if !('publishedText' in video)}
+					&nbsp;• {video.viewCountText}{/if}
 			</div>
-		{:else}
-			<div
-				class="absolute right bottom small-margin red white-text small-text"
-				style="padding: 0 1em;"
-			>
-				LIVE
-			</div>
-		{/if}
-	</a>
-	<div class="small-padding">
-		{#if localStorage.getItem(video.videoId)}
-			<progress value={localStorage.getItem(video.videoId)} max={video.lengthSeconds}></progress>
-		{/if}
-		<nav class="no-margin">
-			<div class="max">
-				<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>
+			{#if 'publishedText' in video}
 				<div>
-					<a href={`/channel/${video.authorId}`}>{video.author}</a>{#if !('publishedText' in video)}
-						&nbsp;• {video.viewCountText}{/if}
-				</div>
-				{#if 'publishedText' in video}
-					<div>
-						{cleanNumber(video.viewCount)} • {video.publishedText}
-					</div>{/if}
-			</div>
-		</nav>
-	</div>
-</article>
+					{cleanNumber(video.viewCount)} • {video.publishedText}
+				</div>{/if}
+		</div>
+	</nav>
+</div>
diff --git a/materialious/src/lib/VideoList.svelte b/materialious/src/lib/VideoList.svelte
index ed8b774f..73a9dafa 100644
--- a/materialious/src/lib/VideoList.svelte
+++ b/materialious/src/lib/VideoList.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { get } from 'svelte/store';
-	import { activePage } from '../store';
 	import type { Video, VideoBase } from './Api/model';
 	import PageLoading from './PageLoading.svelte';
 	import Thumbnail from './Thumbnail.svelte';
@@ -8,17 +6,15 @@
 	export let videos: VideoBase[] | Video[] | Notification[] = [];
 </script>
 
-<h2>{get(activePage)}</h2>
-
-<div class="divider"></div>
-
 {#if videos.length > 0}
 	<div class="page right active">
 		<div class="space"></div>
 		<div class="grid">
 			{#each videos as video}
 				<div class="s12 m6 l2">
-					<Thumbnail {video} />
+					<article class="no-padding" style="height: 100%;">
+						<Thumbnail {video} />
+					</article>
 				</div>
 			{/each}
 		</div>
@@ -26,13 +22,3 @@
 {:else}
 	<PageLoading />
 {/if}
-
-<style>
-	h2 {
-		color: var(--secondary-text);
-		padding: 0.2em;
-		text-transform: capitalize;
-		display: flex;
-		justify-content: center;
-	}
-</style>
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 4d87fa21..76be73ca 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -170,7 +170,9 @@
 		</div>
 		<div class="s12 m12 l2">
 			{#each data.video.recommendedVideos as recommendedVideo}
-				<Thumbnail video={recommendedVideo} />
+				<article class="no-padding">
+					<Thumbnail video={recommendedVideo} />
+				</article>
 			{/each}
 		</div>
 	</div>