Revert "UI fixes"

Author: oliverturner

src/app.postcss

@@ -381,9 +381,12 @@ body {
 .playbtn {
 	--_highlight-dark: #fff4;
 
-	aspect-ratio: 1;
-	border-radius: 50%;
+	grid-area: 1 / 1 / -1 / -1;
+	place-self: end;
+
+	margin: 0.5rem;
 	padding: 0.25rem;
+	border-radius: 50%;
 
 	&:hover {
 		& svg {

src/lib/components/app.svelte

@@ -43,7 +43,9 @@
 <div class="app__content">
 	<nav class="app__rail">
 		<div class="app__rail__lead">
-			<RailLinks {links} {isLinkActive} />
+			{#if isLoggedIn}
+				<RailLinks {links} {isLinkActive} />
+			{/if}
 			<slot name="rail-lead" />
 		</div>
 

src/lib/components/btn-play.svelte

@@ -8,13 +8,13 @@
 </script>
 
 <div class="topper class:{type}">
-	<div class="topper__cover">
+	<div class="cover">
 		<slot name="cover">
 			<Image {src} alt="Cover art" />
 		</slot>
 	</div>
 
-	<div class="topper__content">
+	<div class="content">
 		<slot />
 	</div>
 </div>
@@ -25,12 +25,9 @@
 
 		display: grid;
 		align-items: end;
-		grid-template-areas:
-			"cover"
-			"content";
 
 		margin: 0;
-		background: var(--surface-5);
+		background: #0004;
 
 		@media (min-width: 768px) {
 			gap: 1rem;
@@ -39,16 +36,15 @@
 		}
 	}
 
-	.topper__cover {
+	.cover {
 		grid-area: cover;
-
-		display: flex;
-		justify-content: center;
 	}
 
-	.topper__content {
+	.content {
 		grid-area: content;
-		padding: 1rem;
+
+		position: relative;
+		background: var(--surface-1);
 
 		@media (min-width: 768px) {
 			background: none;

src/lib/components/topper.svelte

@@ -14,15 +14,13 @@
 
 	{#if track.audio}
 		<figcaption class="meta">
-			<button
-				class="meta__key"
-				style="--bg: oklch({track.audio.oklch})"
-				on:click={keyNotation.toggle}
-			>
-				<span>
-					{track.audio.keys[$keyNotation]}
-				</span>
-			</button>
+			<p class="meta__key">
+				<button style="--bg: oklch({track.audio.oklch})" on:click={keyNotation.toggle}>
+					<span>
+						{track.audio.keys[$keyNotation]}
+					</span>
+				</button>
+			</p>
 			<p class="meta__bpm" class:compact>{track.audio.tempo} <span>bpm</span></p>
 		</figcaption>
 	{/if}
@@ -67,32 +65,29 @@
 		grid-area: meta;
 
 		display: flex;
-		justify-content: space-between;
 		align-items: center;
 
 		position: relative;
-		padding: 0.5rem;
-		padding-right: 0;
 
 		& > * {
-			flex: 0 1 auto;
-
-			line-height: 1;
-			font-size: small;
+			padding: 0.5rem;
 		}
 	}
 
 	.meta__key {
-		padding: 0.75ch;
-		border: none;
-		white-space: nowrap;
-		text-shadow: none;
-		background-color: var(--bg);
-		color: #000;
+		flex: 1;
+
+		& > button {
+			padding: 0.75ch;
+			border: none;
+			white-space: nowrap;
+			text-shadow: none;
+			background-color: var(--bg);
+			color: #000;
+		}
 	}
 
 	.meta__bpm {
-		padding: 0.5rem;
 		border: 1px solid var(--border-2);
 		border-right: none;
 		border-radius: 0.5rem 0 0 0.5rem;

src/lib/components/track-cover.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { AudioTrack } from "$lib/typings/app";
 
+	import Icon from "./icon.svelte";
 	import IconLink from "./icon-link.svelte";
 	import TrackCover from "./track-cover.svelte";
 	import TrackArtists from "./track-artists.svelte";
 	import VendorLinks from "./vendor-links.svelte";
 	import { getTrackLinks } from "$lib/utils/track";
-	import PlayBtn from "./btn-play.svelte";
+	import { onPlayBtnClick } from "$lib/utils/player";
 
 	export let index: number;
 	export let track: AudioTrack;
@@ -34,9 +35,10 @@
 		<VendorLinks {links} />
 	</div>
 
-	<div class="player">
-		<PlayBtn trackId={track.id} />
-	</div>
+	<button class="playbtn" on:click={() => onPlayBtnClick(track.id)}>
+		<Icon id="icon-play-btn" />
+		<span class="sr-only">Play</span>
+	</button>
 </article>
 
 <style lang="postcss">
@@ -51,7 +53,7 @@
 	}
 
 	.track__meta {
-		--wh: 8.5rem;
+		--wh: 8rem;
 
 		grid-area: meta;
 	}
@@ -71,11 +73,10 @@
 		}
 	}
 
-	.player {
+	.playbtn {
 		--_highlight-dark: #fff4;
 
 		grid-area: 1 / 1 / -1 / -1;
 		place-self: end;
-		margin: 0.5rem;
 	}
 </style>

src/lib/components/track-grouped.svelte

@@ -2,14 +2,14 @@
 	import type { AudioTrack } from "$lib/typings/app";
 
 	import Image from "./image.svelte";
-
+	import Icon from "./icon.svelte";
 	import IconLink from "./icon-link.svelte";
 	import TrackCover from "./track-cover.svelte";
 	import TrackArtists from "./track-artists.svelte";
 	import VendorLinks from "./vendor-links.svelte";
-	import PlayBtn from "./btn-play.svelte";
 
 	import { getTrackLinks } from "$lib/utils/track";
+	import { onPlayBtnClick } from "$lib/utils/player";
 
 	export let track: AudioTrack;
 
@@ -37,9 +37,10 @@
 		<VendorLinks {links} />
 	</div>
 
-	<div class="player">
-		<PlayBtn trackId={track.id} />
-	</div>
+	<button class="playbtn" on:click={() => onPlayBtnClick(track.id)}>
+		<Icon id="icon-play-btn" />
+		<span class="sr-only">Play</span>
+	</button>
 </article>
 
 <style lang="postcss">
@@ -74,11 +75,10 @@
 		}
 	}
 
-	.player {
+	.playbtn {
 		--_highlight-dark: #fff4;
 
 		grid-area: 1 / 1 / -1 / -1;
 		place-self: end;
-		margin: 0.5rem;
 	}
 </style>

src/lib/components/track.svelte

@@ -8,7 +8,6 @@
 	import TrackArtists from "$lib/components/track-artists.svelte";
 	import TrackCover from "$lib/components/track-cover.svelte";
 	import VendorLinks from "$lib/components/vendor-links.svelte";
-	import PlayBtn from "$lib/components/btn-play.svelte";
 	import { getTrackLinks } from "$lib/utils/track";
 
 	export let data: PageData;
@@ -42,10 +41,6 @@
 			</dl>
 
 			<VendorLinks {links} />
-
-			<div class="player">
-				<PlayBtn trackId={track.id} />
-			</div>
 		</div>
 	</Topper>
 
@@ -71,13 +66,3 @@
 		</ol>
 	</div>
 {/if}
-
-<style lang="postcss">
-	.player {
-		grid-area: 1 / 1 / -1 / -1;
-		place-self: end;
-
-		position: absolute;
-		margin-inline: 0.5rem;
-	}
-</style>