NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust Responsiveness

Browse Source 
~ 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)
This commit is contained in:
Nick Bland 2024-04-19 18:11:09 +10:00
parent cc84dd54c5
commit cb65879687
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
1 changed files with 56 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/countdown.svelte
View File

@ -1,7 +1,10 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
let w: number = 0; // Width of the screen, using the svelte binding
const GRADUATION = new Date(1753797600000).valueOf(); const GRADUATION = new Date(1753797600000).valueOf();
const FORMATTED = new Date(1753797600000).toDateString();
let interval: ReturnType<typeof setInterval>; let interval: ReturnType<typeof setInterval>;
let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000; let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
@ -34,42 +37,57 @@
}); });
</script> </script>
<h3 class="p-5 text-4xl text-center">Time to Graduation</h3> <svelte:window bind:innerWidth={w} />
<div class="grid grid-flow-col gap-5 pb-5 text-center auto-cols-max justify-center">
<!-- 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"> <div class="flex flex-col">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-5xl place-self-center">
<span style="--value:{years};"></span> <span style="--value:{years};"></span>
</span> </span>
years years
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-5xl place-self-center">
<span style="--value:{months};"></span> <span style="--value:{months};"></span>
</span> </span>
months months
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-5xl place-self-center">
<span style="--value:{days};"></span> <span style="--value:{days};"></span>
</span> </span>
days days
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-5xl place-self-center">
<span style="--value:{hours};"></span> <span style="--value:{hours};"></span>
</span> </span>
hours hours
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-5xl place-self-center">
<span style="--value:{minutes};"></span> <span style="--value:{minutes};"></span>
</span> </span>
minutes minutes
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-5xl place-self-center">
<span style="--value:{seconds};"></span> <span style="--value:{seconds};"></span>
</span> </span>
seconds seconds
</div> </div>
</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}