From 95002fcda496969b20556014e0421c8ccfef5b80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Szu=C5=82a?= <mateusz.szulaa@gmail.com>
Date: Fri, 25 Oct 2024 23:20:46 +0200
Subject: [PATCH] RWD fixes

---
 src/app.css                                   |   6 +
 src/lib/components/ControlButtons.svelte      |   9 +-
 src/lib/components/Footer.svelte              |   2 +-
 src/lib/components/Header.svelte              |  41 ++----
 src/lib/components/HeaderGitHubButton.svelte  |  20 +++
 src/lib/components/HeaderSoundControl.svelte  | 122 +++++++++---------
 src/lib/components/HeaderThemeControl.svelte  |  65 +++++-----
 .../mobile/MobileAlgorithmSelector.svelte     |  23 ++++
 .../mobile/MobileHeaderButtons.svelte         |  45 +++++++
 src/routes/+page.svelte                       |  12 +-
 10 files changed, 215 insertions(+), 130 deletions(-)
 create mode 100644 src/lib/components/HeaderGitHubButton.svelte
 create mode 100644 src/lib/components/mobile/MobileAlgorithmSelector.svelte
 create mode 100644 src/lib/components/mobile/MobileHeaderButtons.svelte

diff --git a/src/app.css b/src/app.css
index 4808756..10f9e78 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,8 +5,14 @@
 body {
   max-width: 100%;
   overflow-x: hidden;
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
 }
 
 .range:disabled {
   opacity: 0.5;
 }
+
+html {
+  height: -webkit-fill-available;
+}
diff --git a/src/lib/components/ControlButtons.svelte b/src/lib/components/ControlButtons.svelte
index b969a33..7e7b9a7 100644
--- a/src/lib/components/ControlButtons.svelte
+++ b/src/lib/components/ControlButtons.svelte
@@ -44,17 +44,18 @@
   };
 </script>
 
-<div class="mb-4">
+<div class="mb-2 lg:mb-4">
   <div class="join">
     <button
       class="btn join-item {$running
         ? 'btn-secondary'
-        : 'btn-primary'} btn-lg w-24"
+        : 'btn-primary'} lg:btn-lg lg:w-24"
       on:click={start}>{$running ? 'Stop' : 'Start'}</button
     >
-    <button class="btn join-item btn-lg w-24" on:click={step}>Step</button>
+    <button class="btn join-item lg:btn-lg lg:w-24" on:click={step}>Step</button
+    >
   </div>
-  <button class="btn btn-lg" on:click={shuffleClick}>Shuffle</button>
+  <button class="btn lg:btn-lg" on:click={shuffleClick}>Shuffle</button>
 </div>
 <div>
   <button class="btn" on:click={reverse}>Reverse</button>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 392c3ee..d1a9768 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,6 +1,6 @@
 <footer class="footer items-center p-4 bg-base-200">
   <aside class="items-center grid-flow-col">
-    <p>
+    <p class="text-xs lg:text-sm">
       Built with ☕️ and ❤️ by <a
         class="link"
         href="https://github.com/mszula"
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index afaa0e5..c5d82c8 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -3,44 +3,29 @@
   import { type OscillatorType } from '../sound';
   import HeaderThemeControl from './HeaderThemeControl.svelte';
   import { base } from '$app/paths';
+  import HeaderGitHubButton from './HeaderGitHubButton.svelte';
+  import MobileHeaderButtons from './mobile/MobileHeaderButtons.svelte';
 
   export let selectedTheme: string;
   export let oscillatorType: OscillatorType;
 </script>
 
-<div class="navbar bg-base-100">
+<div class="navbar bg-base-100 relative">
   <div class="flex-1">
     <a class="btn btn-ghost" href="{base}/">
-      <span class="text-lg md:text-xl"
-        >Visual Sorting <span class="text-sm">aka The Sound Of Sorting</span
-        ></span
-      >
+      <span class="text-lg md:text-xl">
+        Visual Sorting <span class="text-sm">aka The Sound Of Sorting</span>
+      </span>
     </a>
   </div>
-  <div class="flex-none">
+
+  <div class="hidden md:flex flex-none">
     <ul class="menu menu-horizontal px-1 items-center">
-      <HeaderSoundControl bind:oscillatorType />
-      <HeaderThemeControl bind:selectedTheme />
+      <li><HeaderSoundControl bind:oscillatorType /></li>
+      <li><HeaderThemeControl bind:selectedTheme /></li>
     </ul>
-
-    <a
-      class="btn btn-square btn-ghost"
-      href="https://github.com/mszula/visual-sorting"
-      target="_blank"
-    >
-      <svg
-        class="w-[24px] h-[24px]"
-        aria-hidden="true"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </a>
+    <HeaderGitHubButton />
   </div>
+
+  <MobileHeaderButtons bind:oscillatorType bind:selectedTheme />
 </div>
diff --git a/src/lib/components/HeaderGitHubButton.svelte b/src/lib/components/HeaderGitHubButton.svelte
new file mode 100644
index 0000000..b110f19
--- /dev/null
+++ b/src/lib/components/HeaderGitHubButton.svelte
@@ -0,0 +1,20 @@
+<a
+  class="lg:btn lg:btn-square lg:btn-ghost"
+  href="https://github.com/mszula/visual-sorting"
+  target="_blank"
+>
+  <svg
+    class="w-[24px] h-[24px]"
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
+      fill-rule="evenodd"
+    />
+  </svg>
+  <span class="lg:hidden inline">https://github.com/mszula/visual-sorting</span>
+</a>
diff --git a/src/lib/components/HeaderSoundControl.svelte b/src/lib/components/HeaderSoundControl.svelte
index 3514bfb..ff3c65b 100644
--- a/src/lib/components/HeaderSoundControl.svelte
+++ b/src/lib/components/HeaderSoundControl.svelte
@@ -18,70 +18,68 @@
   let ref: HTMLDetailsElement;
 </script>
 
-<li>
-  <details bind:this={ref}>
-    <summary
-      class="w-40"
-      on:click|stopPropagation={handleMenuOutsideClick(ref, 'soundSelect')}
-    >
-      {#if oscillatorType}
-        <svg
-          class="w-[28px] h-[28px]"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M15.5 8.43A4.985 4.985 0 0 1 17 12a4.984 4.984 0 0 1-1.43 3.5m2.794 2.864A8.972 8.972 0 0 0 21 12a8.972 8.972 0 0 0-2.636-6.364M12 6.135v11.73a1 1 0 0 1-1.64.768L6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l4.36-3.633a1 1 0 0 1 1.64.768Z"
-          />
-        </svg>
-      {:else}
-        <svg
-          class="w-[28px] h-[28px]"
-          aria-hidden="true"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M15.5 8.43A4.985 4.985 0 0 1 17 12c0 1.126-.5 2.5-1.5 3.5m2.864-9.864A8.972 8.972 0 0 1 21 12c0 2.023-.5 4.5-2.5 6M7.8 7.5l2.56-2.133a1 1 0 0 1 1.64.768V12m0 4.5v1.365a1 1 0 0 1-1.64.768L6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1m1-4 14 14"
-          />
-        </svg>
-      {/if}
-      {oscillatorType ? getOscillatorName(oscillatorType) : 'None'}
-    </summary>
-    <ul class="p-2 bg-base-100 rounded-t-none z-10">
+<details bind:this={ref}>
+  <summary
+    class="w-full md:w-40"
+    on:click|stopPropagation={handleMenuOutsideClick(ref, 'soundSelect')}
+  >
+    {#if oscillatorType}
+      <svg
+        class="w-[28px] h-[28px]"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15.5 8.43A4.985 4.985 0 0 1 17 12a4.984 4.984 0 0 1-1.43 3.5m2.794 2.864A8.972 8.972 0 0 0 21 12a8.972 8.972 0 0 0-2.636-6.364M12 6.135v11.73a1 1 0 0 1-1.64.768L6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l4.36-3.633a1 1 0 0 1 1.64.768Z"
+        />
+      </svg>
+    {:else}
+      <svg
+        class="w-[28px] h-[28px]"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15.5 8.43A4.985 4.985 0 0 1 17 12c0 1.126-.5 2.5-1.5 3.5m2.864-9.864A8.972 8.972 0 0 1 21 12c0 2.023-.5 4.5-2.5 6M7.8 7.5l2.56-2.133a1 1 0 0 1 1.64.768V12m0 4.5v1.365a1 1 0 0 1-1.64.768L6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1m1-4 14 14"
+        />
+      </svg>
+    {/if}
+    {oscillatorType ? getOscillatorName(oscillatorType) : 'None'}
+  </summary>
+  <ul class="p-2 bg-base-100 rounded-t-none z-10">
+    <li>
+      <button
+        class={!oscillatorType ? 'btn-active' : ''}
+        data-sound-select
+        on:click={() => (oscillatorType = null)}>None</button
+      >
+    </li>
+    {#each customOscillatorTypes as osc}
       <li>
         <button
-          class={!oscillatorType ? 'btn-active' : ''}
+          class={osc === oscillatorType ? 'btn-active' : ''}
           data-sound-select
-          on:click={() => (oscillatorType = null)}>None</button
+          on:click={() => {
+            oscillatorType = osc;
+          }}>{getOscillatorName(osc)}</button
         >
       </li>
-      {#each customOscillatorTypes as osc}
-        <li>
-          <button
-            class={osc === oscillatorType ? 'btn-active' : ''}
-            data-sound-select
-            on:click={() => {
-              oscillatorType = osc;
-            }}>{getOscillatorName(osc)}</button
-          >
-        </li>
-      {/each}
-    </ul>
-  </details>
-</li>
+    {/each}
+  </ul>
+</details>
diff --git a/src/lib/components/HeaderThemeControl.svelte b/src/lib/components/HeaderThemeControl.svelte
index 9ce1f0f..97a0bdb 100644
--- a/src/lib/components/HeaderThemeControl.svelte
+++ b/src/lib/components/HeaderThemeControl.svelte
@@ -17,36 +17,37 @@
   };
 </script>
 
-<li>
-  <details bind:this={ref}>
-    <summary on:click|stopPropagation={handleMenuOutsideClick(ref, 'setTheme')}
-      ><svg
-        class="w-[24px] h-[24px]"
-        aria-hidden="true"
-        fill="none"
-        viewBox="0 0 21 21"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.15 5.6h.01m3.337 1.913h.01m-6.979 0h.01M5.541 11h.01M15 15h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 2.043 11.89 9.1 9.1 0 0 0 7.2 19.1a8.62 8.62 0 0 0 3.769.9A2.013 2.013 0 0 0 13 18v-.857A2.034 2.034 0 0 1 15 15Z"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-        />
-      </svg></summary
+<details bind:this={ref}>
+  <summary on:click|stopPropagation={handleMenuOutsideClick(ref, 'setTheme')}
+    ><svg
+      class="w-[24px] h-[24px]"
+      aria-hidden="true"
+      fill="none"
+      viewBox="0 0 21 21"
+      xmlns="http://www.w3.org/2000/svg"
     >
-    <ul class="p-2 bg-base-100 rounded-t-none z-10">
-      {#each themes as theme}
-        <li>
-          <button
-            data-act-class="btn-active"
-            data-set-theme={theme}
-            on:click={selectTheme}
-            >{theme.charAt(0).toUpperCase() + theme.slice(1)}</button
-          >
-        </li>
-      {/each}
-    </ul>
-  </details>
-</li>
+      <path
+        d="M11.15 5.6h.01m3.337 1.913h.01m-6.979 0h.01M5.541 11h.01M15 15h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 2.043 11.89 9.1 9.1 0 0 0 7.2 19.1a8.62 8.62 0 0 0 3.769.9A2.013 2.013 0 0 0 13 18v-.857A2.034 2.034 0 0 1 15 15Z"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+      />
+    </svg>
+    <span class="md:hidden"
+      >{selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)}</span
+    >
+  </summary>
+  <ul class="p-2 bg-base-100 rounded-t-none z-10">
+    {#each themes as theme}
+      <li>
+        <button
+          data-act-class="btn-active"
+          data-set-theme={theme}
+          on:click={selectTheme}
+          >{theme.charAt(0).toUpperCase() + theme.slice(1)}</button
+        >
+      </li>
+    {/each}
+  </ul>
+</details>
diff --git a/src/lib/components/mobile/MobileAlgorithmSelector.svelte b/src/lib/components/mobile/MobileAlgorithmSelector.svelte
new file mode 100644
index 0000000..513c2dc
--- /dev/null
+++ b/src/lib/components/mobile/MobileAlgorithmSelector.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let selectAlgorithm: (algo: AlgorithmDefinition) => void;
+  import { algorithms } from '../../sort-algorithms/algorithms';
+  import type { AlgorithmDefinition } from '../../sort-algorithms/types';
+
+  const change = (value: string) => {
+    const [group, index] = value.split(',');
+    selectAlgorithm(algorithms[Number(group)][Number(index)]);
+  };
+</script>
+
+<div class="flex bg-base-200 rounded-box mb-2 md:mb-0 md:mr-5">
+  <select
+    class="select select-ghost w-full"
+    on:change={(e) => change(e.currentTarget.value)}
+  >
+    {#each algorithms as algos, group}
+      {#each algos as algo, index}
+        <option value={[group, index]}>{algo.name}</option>
+      {/each}
+    {/each}
+  </select>
+</div>
diff --git a/src/lib/components/mobile/MobileHeaderButtons.svelte b/src/lib/components/mobile/MobileHeaderButtons.svelte
new file mode 100644
index 0000000..cdff419
--- /dev/null
+++ b/src/lib/components/mobile/MobileHeaderButtons.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import HeaderSoundControl from '../HeaderSoundControl.svelte';
+  import { type OscillatorType } from '../../sound';
+  import HeaderThemeControl from '../HeaderThemeControl.svelte';
+  import HeaderGitHubButton from '../HeaderGitHubButton.svelte';
+
+  export let selectedTheme: string;
+  export let oscillatorType: OscillatorType;
+
+  let isMenuOpen = false;
+
+  const toggleMenu = () => {
+    isMenuOpen = !isMenuOpen;
+  };
+</script>
+
+<div class="flex-none md:hidden">
+  <button class="btn btn-ghost" on:click={toggleMenu}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      class="inline-block w-6 h-6 stroke-current"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M4 6h16M4 12h16M4 18h16"
+      ></path>
+    </svg>
+  </button>
+</div>
+
+{#if isMenuOpen}
+  <div
+    class="z-10 absolute top-full left-0 right-0 bg-base-100 shadow-md md:hidden"
+  >
+    <ul class="menu p-2 items-center w-full">
+      <li class="w-full"><HeaderSoundControl bind:oscillatorType /></li>
+      <li class="w-full"><HeaderThemeControl bind:selectedTheme /></li>
+      <li class="w-full"><HeaderGitHubButton /></li>
+    </ul>
+  </div>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index eae60c3..7fdfd35 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,6 +20,7 @@
   import { arrayToSort, running } from '../states';
   import { soundStart, soundStop, type OscillatorType } from '../lib/sound';
   import { browser } from '$app/environment';
+  import MobileAlgorithmSelector from '$lib/components/mobile/MobileAlgorithmSelector.svelte';
 
   let selectedTheme: Theme = 'dim';
   let size = 300;
@@ -118,14 +119,19 @@
     </div>
     <div class="flex mx-2 mb-2 md:mx-5 md:mb-5">
       <div class="flex flex-wrap w-full flex-col md:flex-row">
-        <AlgorithmSelector {selectAlgorithm} />
+        <div class="hidden md:flex">
+          <AlgorithmSelector {selectAlgorithm} />
+        </div>
+        <div class="md:hidden">
+          <MobileAlgorithmSelector {selectAlgorithm} />
+        </div>
         <div
-          class="grid flex-row flex-grow card bg-base-300 rounded-box place-items-center p-5 mb-2 md:mb-0"
+          class="grid flex-row flex-grow card bg-base-300 rounded-box place-items-center p-5 lg:mb-2"
         >
           <div
             class="flex flex-col w-full justify-between items-center lg:flex-row"
           >
-            <div class="flex mr-5 md:flex-col items-center w-full lg:w-auto">
+            <div class="flex lg:mr-5 flex-col items-center w-full lg:w-auto">
               <ControlButtons {reset} {size} {step} />
             </div>
             <div class="flex grow flex-col w-full lg:w-auto">