From 4b986a9ed3e7693fa1a54a46e3114faa8bbe4877 Mon Sep 17 00:00:00 2001
From: DutchEllie <personal@quenten.nl>
Date: Sun, 3 Jul 2022 23:04:35 +0200
Subject: [PATCH] Better music layout

---
 .../misc/musicselectionmodal.svelte           |  8 +++--
 src/routes/__layout.svelte                    | 36 +++++++++++--------
 tailwind.config.cjs                           |  3 --
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/misc/musicselectionmodal.svelte b/src/components/misc/musicselectionmodal.svelte
index 16685fa..6ed6af7 100644
--- a/src/components/misc/musicselectionmodal.svelte
+++ b/src/components/misc/musicselectionmodal.svelte
@@ -22,14 +22,18 @@
 		$CurrentMusicStore.paused = true;
 		await sleep(10);
 		$CurrentMusicStore.paused = false;
+		close();
+	};
+	function close() {
+		show = !show;
+		showMusicMan = false;
 	}
 </script>
 
 {#if show}
 	<div
 		on:click={() => {
-			show = !show;
-			showMusicMan = false;
+			close()
 		}}
 		class="h-screen w-screen bg-opacity-60 bg-black fixed top-0 left-0 z-10 py-20 "
 	>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index a31d3a2..18a21b2 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -25,24 +25,36 @@
 
 	// Modal stuff
 	let modalShow = false;
+
+	// Footer stuff
+	/**
+* @type {number}
+*/
+	let footerHeight;
+
 </script>
 
 <div class="-z-20 absolute">
 	<Musicplayer />
 </div>
 <div
-	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
+	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen text-murasaki overflow-auto min-h-screen relative "
 >
-	<!-- modal -->
-	<Musicselectionmodal bind:show={modalShow} />
-	<!-- Possible alert header -->
-	<!--<AlertHeader text='ALERT'/>-->
-	<div class="bg-slate-100 w-full h-min md:h-10 lg:pl-20">
+	<!-- Page content -->
+	<div class="" style="padding-bottom: {footerHeight + 10}px;">
+		<!-- modal -->
+		<Musicselectionmodal bind:show={modalShow} />
+		<!-- Possible alert header -->
+		<!--<AlertHeader text='ALERT'/>-->
+		<!-- Header -->
+		<Header />
+		<!-- Main content -->
+		<slot />
+	</div>
+	<!-- Footer -->
+	<div bind:clientHeight={footerHeight} class="bg-slate-100 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
 		<div class="h-full">
-			<button
-				on:click={onMusicToggle}
-				class="bg-white border-black border rounded h-min w-20 my-auto"
-			>
+			<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20 mt-1">
 				{#if musicPaused}
 					<span class="font-mono">▶</span>
 					Play
@@ -61,10 +73,6 @@
 			<span>Current song: {musicArtist} - {musicTitle}</span>
 		</div>
 	</div>
-	<!-- Header -->
-	<Header />
-	<!-- Main content -->
-	<slot />
 </div>
 
 <!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6); 
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index d70e667..e09892c 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -22,9 +22,6 @@ module.exports = {
     container: {
       center: true,
     },
-    minHeight: {
-      '1/2': '50%',
-    },
     screens: {
       'sm': '640px',
       // => @media (min-width: 640px) { ... }