design stuff
This commit is contained in:
parent
cd357c7917
commit
5e29e9d083
4 changed files with 95 additions and 11 deletions
32
src/lib/components/File.svelte
Normal file
32
src/lib/components/File.svelte
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
<script>
|
||||||
|
import { bytesToHumanReadable } from '$lib';
|
||||||
|
import { CircleAlert } from 'lucide-svelte';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
/** @type {File} */
|
||||||
|
export let file;
|
||||||
|
|
||||||
|
/** @type {Number} */
|
||||||
|
export let i;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
in:fade|global={{ delay: 100 * i }}
|
||||||
|
class="flex px-1.5 w-full h-14 rounded-md transition-all bg-mantle"
|
||||||
|
>
|
||||||
|
<div class="flex overflow-x-scroll flex-col my-auto overflow-y-clip">
|
||||||
|
<p class="">
|
||||||
|
{file.name}
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-0.5">
|
||||||
|
{#if file.size > 104857600}
|
||||||
|
<p class="font-bold text-red">
|
||||||
|
<CircleAlert class="w-4 h-4"></CircleAlert>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
<p class="text-xs my-auto {file.size > 104857600 ? 'text-red font-bold' : 'text-overlay1'}">
|
||||||
|
{bytesToHumanReadable(file.size)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -5,3 +5,13 @@ export function goBack() {
|
||||||
history.back();
|
history.back();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** @param bytes {Number} */
|
||||||
|
export function bytesToHumanReadable(bytes) {
|
||||||
|
if (bytes === 0) {
|
||||||
|
return '0 B';
|
||||||
|
}
|
||||||
|
|
||||||
|
let e = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||||
|
return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
|
||||||
|
}
|
||||||
|
|
|
@ -1,35 +1,52 @@
|
||||||
<script>
|
<script>
|
||||||
import { Upload } from 'lucide-svelte';
|
import { Upload } from 'lucide-svelte';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
import { user } from '$lib/stores';
|
import { user } from '$lib/stores';
|
||||||
|
|
||||||
import Button from '$lib/components/Inputs/Button.svelte';
|
|
||||||
import ButtonText from '$lib/components/Inputs/ButtonText.svelte';
|
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
|
import { bytesToHumanReadable } from '$lib';
|
||||||
|
import File from '$lib/components/File.svelte';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
user.set(data?.user);
|
user.set(data?.user);
|
||||||
|
|
||||||
|
/** @type {HTMLInputElement} */
|
||||||
|
let input;
|
||||||
|
|
||||||
|
/** @type {FileList} */
|
||||||
|
let files;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<form class="hidden" action="">
|
||||||
|
<input type="file" name="file" id="file" multiple={true} bind:this={input} bind:files />
|
||||||
|
</form>
|
||||||
|
|
||||||
<div class="w-[23rem] h-[calc(100vh-4.5rem)] flex mx-auto">
|
<div class="w-[23rem] h-[calc(100vh-4.5rem)] flex mx-auto">
|
||||||
<div class="my-auto flex flex-col w-full gap-2">
|
<div class="flex flex-col gap-2 my-auto w-full">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-2xl font-bold">Welcome, {$page.data.user.username}.</h1>
|
<h1 class="text-2xl font-bold">Welcome, {$page.data.user.username}.</h1>
|
||||||
<p class="text-overlay1">Your max upload size is <span class="font-bold">100 MB</span>.</p>
|
<p class="text-overlay1">Your max upload size is <span class="font-bold">100 MB</span>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-crust w-full mx-auto p-2 rounded-lg shadow-lg">
|
<div class="flex flex-col gap-2 p-2 mx-auto w-full rounded-lg shadow-lg bg-crust">
|
||||||
|
{#if files?.length}
|
||||||
|
{#each Array.from(files) as file, i}
|
||||||
|
<File {file} {i}></File>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
<button
|
<button
|
||||||
class="w-full outline-2 outline-dotted outline-surface2 rounded-sm bg-mantle h-36 flex"
|
class="flex w-full {!files?.length
|
||||||
|
? 'h-36'
|
||||||
|
: 'h-14'} transition-all rounded-md outline-2 outline-dotted outline-surface2 bg-mantle"
|
||||||
|
on:click={() => {
|
||||||
|
input.click();
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div class="m-auto text-lg flex text-surface2">
|
<div class="flex m-auto text-lg text-surface2">
|
||||||
<Upload></Upload>
|
<Upload></Upload>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="bg-crust w-full mx-auto mb-auto p-2 rounded-lg shadow-lg">
|
<div class="p-2 mx-auto mb-auto w-full rounded-lg shadow-lg bg-crust">
|
||||||
<table class="table-auto w-full mx-auto text-sm">
|
<table class="mx-auto w-full text-sm table-auto">
|
||||||
<tbody>
|
<tbody>
|
||||||
{#await data?.streamed?.statistics}
|
{#await data?.streamed?.statistics}
|
||||||
<div class="h-[66px]"></div>
|
<div class="h-[66px]"></div>
|
||||||
|
|
25
src/routes/(app)/test/+page.svelte
Normal file
25
src/routes/(app)/test/+page.svelte
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
<script>
|
||||||
|
import { bytesToHumanReadable } from '$lib';
|
||||||
|
import Button from '$lib/components/Inputs/Button.svelte';
|
||||||
|
import ButtonText from '$lib/components/Inputs/ButtonText.svelte';
|
||||||
|
|
||||||
|
/** @type {HTMLInputElement} */
|
||||||
|
let input;
|
||||||
|
|
||||||
|
/** @type {FileList} */
|
||||||
|
let files;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
click={() => {
|
||||||
|
input.click();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ButtonText>Select Files</ButtonText>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{#if files}
|
||||||
|
{#each Array.from(files) as file}
|
||||||
|
<p>{file.name} ({bytesToHumanReadable(file.size)})</p>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
Loading…
Reference in a new issue