more design no actual functional stuff
This commit is contained in:
parent
a2971e4e71
commit
428b391f13
2 changed files with 61 additions and 30 deletions
|
@ -8,16 +8,25 @@
|
|||
|
||||
/** @type {Number} */
|
||||
export let i;
|
||||
|
||||
let percent = 0;
|
||||
</script>
|
||||
|
||||
<div
|
||||
<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 bg-mantle"
|
||||
>
|
||||
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">
|
||||
<p class="">
|
||||
{file.name}
|
||||
</p>
|
||||
{#if percent === 100}
|
||||
<a href="?" class="text-blue">{file.name}</a>
|
||||
{:else}
|
||||
<p>{file.name}</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-0.5">
|
||||
{#if file.size > 104857600}
|
||||
<p class="font-bold text-red">
|
||||
|
@ -29,4 +38,5 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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}
|
||||
{#if !running}
|
||||
<div out:slide class="flex gap-2">
|
||||
<button
|
||||
class="flex w-full {!files?.length
|
||||
? 'h-36'
|
||||
: 'h-14'} transition-all rounded-md outline-2 outline-dotted outline-surface2 bg-mantle"
|
||||
: '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">
|
||||
<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>
|
||||
{/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">
|
||||
|
|
Loading…
Reference in a new issue