From cb658796870abb1fb528579645ebb30f6ea76798 Mon Sep 17 00:00:00 2001
From: Nick Bland <nick.bland@nickbland.dev>
Date: Fri, 19 Apr 2024 18:11:09 +1000
Subject: [PATCH] Adjust Responsiveness

~ Countdown timer did not work well on small screens so I adjusted the timer altogether for when using a smaller screen (tailwind md value or less)
---
 src/components/countdown.svelte | 94 ++++++++++++++++++++-------------
 1 file changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/components/countdown.svelte b/src/components/countdown.svelte
index da7322b..198dd0f 100644
--- a/src/components/countdown.svelte
+++ b/src/components/countdown.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
+  let w: number = 0; // Width of the screen, using the svelte binding
+
   const GRADUATION = new Date(1753797600000).valueOf();
+  const FORMATTED = new Date(1753797600000).toDateString();
   let interval: ReturnType<typeof setInterval>;
 
   let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
@@ -34,42 +37,57 @@
   });
 </script>
 
-<h3 class="p-5 text-4xl text-center">Time to Graduation</h3>
-<div class="grid grid-flow-col gap-5 pb-5 text-center auto-cols-max justify-center">
-  <div class="flex flex-col">
-    <span class="countdown font-mono text-5xl">
-      <span style="--value:{years};"></span>
-    </span>
-    years
+<svelte:window bind:innerWidth={w} />
+
+<!-- Display a different type of countdown for smaller screens, as larger one won't fit -->
+{#if w >= 768}
+  <h3 class="p-5 text-4xl text-center">Time to Graduation</h3>
+  <div class="grid grid-flow-col gap-5 pb-5 text-center auto-cols-max justify-center">
+    <div class="flex flex-col">
+      <span class="countdown font-mono text-5xl place-self-center">
+        <span style="--value:{years};"></span>
+      </span>
+      years
+    </div>
+    <div class="flex flex-col">
+      <span class="countdown font-mono text-5xl place-self-center">
+        <span style="--value:{months};"></span>
+      </span>
+      months
+    </div>
+    <div class="flex flex-col">
+      <span class="countdown font-mono text-5xl place-self-center">
+        <span style="--value:{days};"></span>
+      </span>
+      days
+    </div>
+    <div class="flex flex-col">
+      <span class="countdown font-mono text-5xl place-self-center">
+        <span style="--value:{hours};"></span>
+      </span>
+      hours
+    </div>
+    <div class="flex flex-col">
+      <span class="countdown font-mono text-5xl place-self-center">
+        <span style="--value:{minutes};"></span>
+      </span>
+      minutes
+    </div>
+    <div class="flex flex-col">
+      <span class="countdown font-mono text-5xl place-self-center">
+        <span style="--value:{seconds};"></span>
+      </span>
+      seconds
+    </div>
   </div>
-  <div class="flex flex-col">
-    <span class="countdown font-mono text-5xl">
-      <span style="--value:{months};"></span>
-    </span>
-    months
-  </div>
-  <div class="flex flex-col">
-    <span class="countdown font-mono text-5xl">
-      <span style="--value:{days};"></span>
-    </span>
-    days
-  </div>
-  <div class="flex flex-col">
-    <span class="countdown font-mono text-5xl">
-      <span style="--value:{hours};"></span>
-    </span>
-    hours
-  </div>
-  <div class="flex flex-col">
-    <span class="countdown font-mono text-5xl">
-      <span style="--value:{minutes};"></span>
-    </span>
-    minutes
-  </div>
-  <div class="flex flex-col">
-    <span class="countdown font-mono text-5xl">
-      <span style="--value:{seconds};"></span>
-    </span>
-    seconds
-  </div>
-</div>
+{:else}
+  <h3 class="p-5 text-4xl text-center">Time to Graduation<br /> {FORMATTED}</h3>
+  <span class="flex countdown pb-5 font-mono text-4xl justify-center">
+    <span style="--value:{years};"></span>y
+    <span style="--value:{months};"></span>m
+    <span style="--value:{days};"></span>d-
+    <span style="--value:{hours};"></span>:
+    <span style="--value:{minutes};"></span>:
+    <span style="--value:{seconds};"></span>
+  </span>
+{/if}