MadHouse-Labs/file-uploader
2
0
Fork 0
Code Issues Pull requests Packages Activity Actions

more design no actual functional stuff

Browse source
This commit is contained in:
cirroskais 2024-05-24 01:55:43 -04:00
parent a2971e4e71
commit 428b391f13
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
2 changed files with 61 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/lib/components/File.svelte
View file

@ -8,25 +8,35 @@
/** @type {Number} */ /** @type {Number} */
export let i; export let i;
let percent = 0;
</script> </script>
<div <div class="rounded-md bg-mantle">
in:fade|global={{ delay: 100 * i }} <div
class="flex px-1.5 w-full h-14 rounded-md transition-all bg-mantle" in:fade|global={{ delay: 100 * i }}
> class="flex px-1.5 w-full h-14 rounded-md transition-all"
<div class="flex overflow-x-scroll flex-col my-auto overflow-y-clip"> style="
<p class=""> background: linear-gradient(90deg, rgb(var(--ctp-surface0)) {percent}%, transparent
{file.name} {percent}%);"
</p> >
<div class="flex gap-0.5"> <div class="flex overflow-x-scroll flex-col my-auto overflow-y-clip">
{#if file.size > 104857600} {#if percent === 100}
<p class="font-bold text-red"> <a href="?" class="text-blue">{file.name}</a>
<CircleAlert class="w-4 h-4"></CircleAlert> {:else}
</p> <p>{file.name}</p>
{/if} {/if}
<p class="text-xs my-auto {file.size > 104857600 ? 'text-red font-bold' : 'text-overlay1'}">
{bytesToHumanReadable(file.size)} <div class="flex gap-0.5">
</p> {#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>
</div> </div>
</div> </div>

49
src/routes/(app)/dashboard/+page.svelte
View file

@ -1,9 +1,8 @@
<script> <script>
import { Upload } from 'lucide-svelte'; import { Check, 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 { fade } from 'svelte/transition'; import { fade, slide } from 'svelte/transition';
import { bytesToHumanReadable } from '$lib';
import File from '$lib/components/File.svelte'; import File from '$lib/components/File.svelte';
export let data; export let data;
@ -14,6 +13,8 @@
/** @type {FileList} */ /** @type {FileList} */
let files; let files;
let running = false;
</script> </script>
<form class="hidden" action=""> <form class="hidden" action="">
@ -32,18 +33,38 @@
<File {file} {i}></File> <File {file} {i}></File>
{/each} {/each}
{/if} {/if}
<button {#if !running}
class="flex w-full {!files?.length <div out:slide class="flex gap-2">
? 'h-36' <button
: 'h-14'} transition-all rounded-md outline-2 outline-dotted outline-surface2 bg-mantle" class="flex w-full {!files?.length
on:click={() => { ? 'h-36'
input.click(); : 'h-14'} rounded-md outline-2 outline-dotted outline-surface2 bg-mantle group"
}} on:click={() => {
> input.click();
<div class="flex m-auto text-lg text-surface2"> }}
<Upload></Upload> >
<div
class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-overlay1"
>
<Upload></Upload>
</div>
</button>
{#if files?.length}
<button
class="flex w-[25%] h-14 rounded-md transition-all outline-2 outline-dotted outline-surface2 bg-mantle group"
on:click={() => {
running = true;
}}
>
<div
class="flex m-auto text-lg transition-colors text-surface2 group-hover:text-green"
>
<Check class=""></Check>
</div>
</button>
{/if}
</div> </div>
</button> {/if}
</div> </div>
<div class="p-2 mx-auto mb-auto w-full rounded-lg shadow-lg bg-crust"> <div class="p-2 mx-auto mb-auto w-full rounded-lg shadow-lg bg-crust">
<table class="mx-auto w-full text-sm table-auto"> <table class="mx-auto w-full text-sm table-auto">