aboutsummaryrefslogtreecommitdiffstats
path: root/app
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
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 'app')
-rw-r--r--app/src/lib/svelte/Navigation.svelte2
-rw-r--r--app/src/lib/ts/download.ts5
-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
5 files changed, 50 insertions, 42 deletions
diff --git a/app/src/lib/svelte/Navigation.svelte b/app/src/lib/svelte/Navigation.svelte
index 973924a..f0535ef 100644
--- a/app/src/lib/svelte/Navigation.svelte
+++ b/app/src/lib/svelte/Navigation.svelte
@@ -1,7 +1,7 @@
<script lang="ts">
+ import { page } from '$app/stores';
import Icon from '@iconify/svelte';
import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton';
- import { page } from '$app/stores';
const drawerStore = getDrawerStore();
diff --git a/app/src/lib/ts/download.ts b/app/src/lib/ts/download.ts
index 16712fb..c3e98b0 100644
--- a/app/src/lib/ts/download.ts
+++ b/app/src/lib/ts/download.ts
@@ -19,10 +19,11 @@ export default async function saveFile(blob: ArrayBuffer, suggestedName: string
const writable = await handle.createWritable();
await writable.write(blob);
await writable.close();
+ return;
} catch (err: unknown) {
// TypeScript
if ((err as Error)?.name !== 'AbortError') {
- console.error(err);
+ return Promise.reject(err);
}
}
} else {
@@ -30,5 +31,7 @@ export default async function saveFile(blob: ArrayBuffer, suggestedName: string
anchor.download = suggestedName ?? 'truncated';
anchor.href = URL.createObjectURL(new Blob([blob]));
anchor.click();
+ URL.revokeObjectURL(anchor.href);
+ document.body.removeChild(anchor);
}
}
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>