aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/routes
diff options
context:
space:
mode:
authorMatt Strapp <matt@mattstrapp.net>2023-09-28 10:17:11 -0500
committerMatt Strapp <matt@mattstrapp.net>2023-09-28 10:17:11 -0500
commit536df17c2e170f562e3c908f97f5a0579fdc69da (patch)
treeeb41d5f7ed9d400470c633c08d75ce2fef6d9efe /app/src/routes
parentMake the website less ugly, especially on mobile (diff)
downloadtrinkets-536df17c2e170f562e3c908f97f5a0579fdc69da.tar
trinkets-536df17c2e170f562e3c908f97f5a0579fdc69da.tar.gz
trinkets-536df17c2e170f562e3c908f97f5a0579fdc69da.tar.bz2
trinkets-536df17c2e170f562e3c908f97f5a0579fdc69da.tar.lz
trinkets-536df17c2e170f562e3c908f97f5a0579fdc69da.tar.xz
trinkets-536df17c2e170f562e3c908f97f5a0579fdc69da.tar.zst
trinkets-536df17c2e170f562e3c908f97f5a0579fdc69da.zip
Make everything look better again
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to '')
-rw-r--r--app/src/routes/+layout.svelte34
-rw-r--r--app/src/routes/+page.svelte2
-rw-r--r--app/src/routes/truncate/+page.svelte49
3 files changed, 45 insertions, 40 deletions
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index 519a11d..1a15251 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,20 +1,20 @@
<script lang="ts">
- import { useRegisterSW } from 'virtual:pwa-register/svelte';
- import { pwaInfo } from 'virtual:pwa-info';
- import { onMount } from 'svelte';
+ import Navigation from '$lib/svelte/Navigation.svelte';
+ import Icon from '@iconify/svelte';
import {
- AppShell,
- AppBar,
- getDrawerStore,
- getToastStore,
- initializeStores,
- Toast,
- Drawer
+ AppBar,
+ AppShell,
+ Drawer,
+ Toast,
+ getDrawerStore,
+ getToastStore,
+ initializeStores
} from '@skeletonlabs/skeleton';
-
- import Navigation from '$lib/svelte/Navigation.svelte';
-
+ import { onMount } from 'svelte';
+ import { pwaInfo } from 'virtual:pwa-info';
+ import { useRegisterSW } from 'virtual:pwa-register/svelte';
import '../app.postcss';
+
// Floating UI for Popups
// import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
// import { storePopup } from '@skeletonlabs/skeleton';
@@ -75,13 +75,7 @@
<svelte:fragment slot="lead">
<div class="flex items-center">
<button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}>
- <span>
- <svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
- <rect width="100" height="20" />
- <rect y="30" width="100" height="20" />
- <rect y="60" width="100" height="20" />
- </svg>
- </span>
+ <Icon icon="carbon:menu" width=25 />
</button>
<strong class="text-xl uppercase">A!</strong>
</div>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 1f0a15d..e34c31e 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -11,5 +11,5 @@
</div>
<style lang="postcss">
-
+
</style>
diff --git a/app/src/routes/truncate/+page.svelte b/app/src/routes/truncate/+page.svelte
index 1b37f56..6e0cfcd 100644
--- a/app/src/routes/truncate/+page.svelte
+++ b/app/src/routes/truncate/+page.svelte
@@ -1,6 +1,7 @@
<script lang="ts">
import saveFile from '$lib/ts/download';
import type { TruncateRequest, TruncateResponse } from '$lib/types/truncate-worker';
+ import Icon from '@iconify/svelte';
import { FileDropzone, ProgressBar } from '@skeletonlabs/skeleton';
import { onMount } from 'svelte';
@@ -18,15 +19,15 @@
file: files[0],
size: truncateTo
} as TruncateRequest);
- form.reset();
- truncateTo = 1;
}
onMount(async () => {
worker = new Worker(new URL('$lib/ts/truncate.worker.ts', import.meta.url), { type: 'module' });
- worker.onmessage = (e: MessageEvent<TruncateResponse>) => {
+ worker.onmessage = async (e: MessageEvent<TruncateResponse>) => {
+ await saveFile(e.data.file, `trunc-${originalName}`).catch((e) => console.error(e));
disableInput = false;
- saveFile(e.data.file, `trunc-${originalName}`);
+ form.reset();
+ truncateTo = 1;
};
});
</script>
@@ -38,19 +39,28 @@
<div class="container h-full mx-auto flex justify-center items-center">
<div class="space-y-10 text-center flex flex-col items-center">
<form bind:this={form} on:submit|preventDefault={onUpload} method="POST" action="?/TODO">
+ <noscript>
+ <h3 class="h3">You need JavaScript to use this page, for now ;)</h3>
+ <br />
+ </noscript>
<label class="label" for="truncateMe">
- <FileDropzone
- id="truncateMe"
- name="truncateMe"
- bind:files
- on:change={() => form.requestSubmit()}
- required
- disabled={disableInput}
- >
- <svelte:fragment slot="lead">
- <h2 class="h2">Drop a file here to truncate it.</h2>
- </svelte:fragment>
- </FileDropzone>
+ <div class="space-y-4 w-full">
+ <FileDropzone
+ id="truncateMe"
+ name="truncateMe"
+ bind:files
+ on:change={() => form.requestSubmit()}
+ required
+ disabled={disableInput}
+ >
+ <svelte:fragment slot="lead">
+ <div class="flex justify-center items-center">
+ <Icon icon="carbon:file-storage" width="50" />
+ </div>
+ </svelte:fragment>
+ <svelte:fragment slot="meta">Drop a file here to truncate it.</svelte:fragment>
+ </FileDropzone>
+ </div>
</label>
<br />
<label class="label">
@@ -66,9 +76,10 @@
</label>
<br />
<noscript>
- <button type="submit" class="btn variant-filled"
- >After adding a file, click to submit! (Not yet implemented)</button
- >
+ <br />
+ <button type="submit" class="btn variant-filled" disabled>
+ After adding a file, click to submit! (Not yet implemented)
+ </button>
</noscript>
{#if disableInput}
<h3 class="h3">Truncating the file, this may take time!</h3>