Better spacing + play on spacebar

dtcooper · Aug 13, 2023 · 686daae · 686daae
1 parent 38f617b
commit 686daae
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/client/src/main/Header.svelte b/client/src/main/Header.svelte
@@ -17,7 +17,7 @@
 
 <div class="col-span-3 flex flex-col gap-6">
   <div class="flex items-center justify-between bg-base-200 px-5 py-2">
-    <div class="flex items-center gap-3 font-mono text-3xl italic">
+    <div class="flex items-center gap-3 font-mono text-2xl italic md:text-3xl">
       <Icon icon={tomatoIcon} class="h-12 w-12" shape-rendering="crispEdges" viewBox="0 -.5 16 16" />
       {$config.STATION_NAME}
     </div>

diff --git a/client/src/main/Player.svelte b/client/src/main/Player.svelte
@@ -164,7 +164,7 @@
   })
 </script>
 
-<div class="col-span-2 my-8 flex flex-col gap-5">
+<div class="col-span-2 mb-5 mt-7 flex flex-col gap-5">
   {#if items.length > 0}
     {@const item = items[0]}
 

diff --git a/client/src/main/player/Buttons.svelte b/client/src/main/player/Buttons.svelte
@@ -19,8 +19,20 @@
   export let regenerateNextStopset
 
   $: firstItem = items[0]
+  $: playDisabled =
+    !items.some((item) => item.type === "stopset") || (firstItem.type === "stopset" && firstItem.playing)
+  $: pauseDisabled = firstItem.type !== "stopset" || !firstItem.playing
 </script>
 
+<svelte:window
+  on:keydown={(event) => {
+    if (!playDisabled && event.code === "Space") {
+      play()
+      event.preventDefault()
+    }
+  }}
+/>
+
 <div class="flex items-center justify-center gap-3">
   <button
     class="btn btn-success btn-lg pl-3 font-mono italic"
@@ -33,11 +45,7 @@
     <Icon icon={playCircleOutlineIcon} class="h-12 w-12" /> Play
   </button>
   {#if $userConfig.uiMode >= 1}
-    <button
-      class="btn btn-warning btn-lg pl-3"
-      disabled={firstItem.type !== "stopset" || !firstItem.playing}
-      on:click={pause}
-    >
+    <button class="btn btn-warning btn-lg pl-3" disabled={pauseDisabled} on:click={pause}>
       <Icon icon={pauseCircleOutlineIcon} class="h-12 w-12" /> Pause
     </button>
     <div

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -24,10 +24,10 @@ const colors = Object.keys(materialUIColors).reduce(
 module.exports = {
   content: ["index.html", "./src/**/*.{html,js,svelte}"],
   theme: {
+    screens: {
+      md: "900px"
+    },
     extend: {
-      minWidth: {
-        sm: "600px"
-      },
       fontFamily: {
         sans: "Inter Local",
         mono: "Space Mono Local"