RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Match figma a bit more

This commit is contained in:
JovannMC 2025-01-10 21:17:34 +03:00
parent a9d257840b
commit d0b9d36894
No known key found for this signature in database
3 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/functional/ConversionPanel.svelte
View File

@ -28,7 +28,7 @@
</div> </div>
<div class="w-full bg-separator h-0.5 flex md:hidden"></div> <div class="w-full bg-separator h-0.5 flex md:hidden"></div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<p class="whitespace-nowrap text-xl md:text-base">Set all to</p> <p class="whitespace-nowrap text-xl">Set all to</p>
{#if files.requiredConverters.length === 1} {#if files.requiredConverters.length === 1}
<Dropdown <Dropdown
onselect={(r) => onselect={(r) =>

17
src/lib/components/functional/Dropdown.svelte
View File

@ -8,14 +8,14 @@
options: string[]; options: string[];
selected?: string; selected?: string;
onselect?: (option: string) => void; onselect?: (option: string) => void;
disabled?: boolean disabled?: boolean;
}; };
let { let {
options, options,
selected = $bindable(options[0]), selected = $bindable(options[0]),
onselect, onselect,
disabled disabled,
}: Props = $props(); }: Props = $props();
let open = $state(false); let open = $state(false);
@ -48,16 +48,21 @@
}); });
</script> </script>
<div class="relative w-full min-w-fit" bind:this={dropdown}> <div
class="relative w-full min-w-fit text-xl font-medium text-center"
bind:this={dropdown}
>
<button <button
class="font-display w-full min-w-fit justify-between overflow-hidden relative cursor-pointer px-3 bg-button {disabled ? 'opacity-50' : ''} flex items-center rounded-full p-2 focus:!outline-none" class="font-display w-full justify-center overflow-hidden relative cursor-pointer px-3 py-3.5 bg-button {disabled
? 'opacity-50'
: ''} flex items-center rounded-full focus:!outline-none"
onclick={toggle} onclick={toggle}
onmouseenter={() => (hover = true)} onmouseenter={() => (hover = true)}
onmouseleave={() => (hover = false)} onmouseleave={() => (hover = false)}
{disabled} {disabled}
> >
<!-- <p>{selected}</p> --> <!-- <p>{selected}</p> -->
<div class="grid grid-cols-1 grid-rows-1 w-fit text-left flex-grow-0"> <div class="grid grid-cols-1 grid-rows-1 w-fit flex-grow-0">
{#key selected} {#key selected}
<p <p
in:fade={{ in:fade={{
@ -68,7 +73,7 @@
duration, duration,
easing: quintOut, easing: quintOut,
}} }}
class="col-start-1 row-start-1 text-left" class="col-start-1 row-start-1 text-center font-body font-medium"
> >
{selected} {selected}
</p> </p>

10
src/routes/convert/+page.svelte
View File

@ -52,7 +52,8 @@
<XIcon size="24" class="text-muted" /> <XIcon size="24" class="text-muted" />
</button> </button>
</div> </div>
<div class="flex gap-4 w-full h-full overflow-hidden relative"> <div class="flex flex-row justify-between">
<div class="flex gap-4 w-full h-[152px] overflow-hidden relative">
<div class="w-1/2 h-full overflow-hidden rounded-xl"> <div class="w-1/2 h-full overflow-hidden rounded-xl">
<img <img
class="object-cover w-full h-full" class="object-cover w-full h-full"
@ -62,17 +63,17 @@
</div> </div>
</div> </div>
<div <div
class="absolute top-16 right-0 mr-4 pl-2 h-[calc(100%-83px)] w-[calc(50%-32px)] pr-4 pb-5" class="absolute top-16 right-0 mr-4 pl-2 h-[calc(100%-83px)] w-[calc(50%-38px)] pr-4 pb-1 flex items-center justify-center aspect-square"
> >
<div <div
class="w-full h-full flex flex-col gap-2 items-center justify-center" class="w-[122px] h-fit flex flex-col gap-2 items-center justify-center"
> >
<Dropdown <Dropdown
options={file.converter?.supportedFormats || []} options={file.converter?.supportedFormats || []}
bind:selected={file.to} bind:selected={file.to}
onselect={() => file.result && (file.result = null)} onselect={() => file.result && (file.result = null)}
/> />
<div class="w-full flex items-center justify-around"> <div class="w-full flex items-center justify-between">
<button <button
class="btn p-0 w-14 h-14" class="btn p-0 w-14 h-14"
disabled={!files.ready} disabled={!files.ready}
@ -90,6 +91,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</Panel> </Panel>
{/snippet} {/snippet}