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

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

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