improve history styling a bit

Author: ajgeiss0702

src/lib/history/HistoricalShow.svelte

@@ -87,7 +87,7 @@
 <svelte:element
 	this={href ? 'a' : 'div'}
 	class:card={!onlyTimes}
-	class="inline-block limit p-3 m-2 hidden-link relative"
+	class="inline-flex flex-col limit p-3 m-2 hidden-link relative"
 	{href}
 	id={show.name}
 	class:highlight={!onlyTimes && page.url.hash === '#' + show.name}
@@ -156,21 +156,26 @@
 				{/if}
 			</div>
 		{/if}
-		<h3>{showDate.toLocaleDateString(getDateFormatLocale())}</h3>
+		<h3 class="mb-0!">
+			{showDate.toLocaleDateString(getDateFormatLocale())}
+		</h3>
 		{#if !(withThumbnail && thumbnail) && show.metadata?.isCurrentlyLive}
 			<div class="inline-block absolute top-3 right-3">
 				<Live />
 			</div>
 		{/if}
-		{#if show.metadata.title}
-			<h4>{show.metadata.title}</h4>
-		{/if}
+		<div class="grow flex min-h-10 items-center justify-center">
+			{#if show.metadata.title}
+				<h4>{show.metadata.title}</h4>
+			{/if}
+		</div>
 	{/if}
 	<span class="hidden">name date (for debugging purposes): {show.name}</span>
 	<hr />
-	<div class="inline-block mr-2">
-		<h4>Pre Show</h4>
-		<span class="time">
+	<div>
+		<div class="inline-block mr-2">
+			<h4>Pre Show</h4>
+			<span class="time">
 			{#if preShowStart}
 				{preShowStart.toLocaleTimeString(undefined, {
 					timeStyle: 'short',
@@ -180,8 +185,8 @@
 				<span class="opacity-50"> N/A </span>
 			{/if}
 		</span>
-		-
-		<span class="time">
+			-
+			<span class="time">
 			{#if mainShowStart}
 				{mainShowStart.toLocaleTimeString(undefined, {
 					timeStyle: 'short',
@@ -191,16 +196,16 @@
 				<span class="opacity-50"> N/A </span>
 			{/if}
 		</span>
-		<br />
-		{#if preShowLength}
-			{preShowLength}
-		{:else}
-			<span class="opacity-50"> N/A </span>
-		{/if}
-	</div>
-	<div class="inline-block ml-2">
-		<h4>Main Show</h4>
-		<span class="time">
+			<br />
+			{#if preShowLength}
+				{preShowLength}
+			{:else}
+				<span class="opacity-50"> N/A </span>
+			{/if}
+		</div>
+		<div class="inline-block ml-2">
+			<h4>Main Show</h4>
+			<span class="time">
 			{#if mainShowStart}
 				{mainShowStart.toLocaleTimeString(undefined, {
 					timeStyle: 'short',
@@ -210,20 +215,21 @@
 				<span class="opacity-50"> N/A </span>
 			{/if}
 		</span>
-		-
-		<span class="time">
+			-
+			<span class="time">
 			{#if showEnd}
 				{showEnd.toLocaleTimeString(undefined, { timeStyle: 'short', hour12: getTimePreference() })}
 			{:else}
 				<span class="opacity-50"> N/A </span>
 			{/if}
 		</span>
-		<br />
-		{#if mainShowLength}
-			{mainShowLength}
-		{:else}
-			<span class="opacity-50"> N/A </span>
-		{/if}
+			<br />
+			{#if mainShowLength}
+				{mainShowLength}
+			{:else}
+				<span class="opacity-50"> N/A </span>
+			{/if}
+		</div>
 	</div>
 	<hr />
 	{#if onTime && onTimeDistance}
@@ -246,6 +252,7 @@
 </svelte:element>
 
 <style>
+	@reference "#app.css";
 	.thumbnail-space {
 		width: min(28.5rem, 95vw);
 		aspect-ratio: 16 / 9;
@@ -254,9 +261,9 @@
 
 	img,
 	.fake-img {
+		@apply rounded-base;
 		width: min(28.5em, 95vw);
 		object-fit: cover;
-		border-radius: var(--theme-rounded-base);
 		aspect-ratio: 16 / 9;
 	}
 

src/routes/history/+page.svelte

@@ -2,8 +2,6 @@
     let pageIndex = 0;
 </script>
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import HistoricalShow from "$lib/history/HistoricalShow.svelte";
     import { browser, dev } from "$app/environment";
     import HistoryRecords from "$lib/history/HistoryRecords.svelte";
@@ -32,7 +30,7 @@
     let view = $state((data.history.viewType ?? 0)+"");
 
     let first = $state(true);
-    run(() => {
+    $effect(() => {
         if(first) {
             first = false;
         } else if(browser) {
@@ -76,15 +74,15 @@
 
     <br>
 
-    <a href="/search" class="btn preset-tonal-primary border border-primary-500">
+    <a href="/search" class="btn preset-tonal-primary border border-primary-500 text-white rounded-2xl">
         <Search/>
 
         Search for Shows
     </a><br>
 
     <br>
-    <div class="flex flex-col items-center gap-4">
-        <SegmentedControl value={view} onValueChange={(details) => (view = details.value)} name="justify">
+    <div class="flex flex-col items-center gap-4 mb-2">
+        <SegmentedControl value={view} onValueChange={(details) => (view = details.value ?? "0")} name="justify">
             <SegmentedControl.Control>
                 <SegmentedControl.Indicator />
                 <SegmentedControl.Item value="0">
@@ -114,9 +112,8 @@
             </SegmentedControl.Control>
         </SegmentedControl>
     </div>
-    <br>
 
-    <div class="inline-block"
+    <div class="inline-flex flex-wrap justify-center"
          class:thumbnail-inline={view === "0"}
          class:thumbnail-list={view === "1"}
          class:old-layout={view === "2"}
@@ -140,7 +137,7 @@
 
             <LazyLoad>
                 {#each countTo(20) as i}
-                    <LoadingHistoricalShow withThumbnail={view < 2}/>
+                    <LoadingHistoricalShow withThumbnail={Number(view) < 2}/>
                 {/each}
             </LazyLoad>