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 class="w-full bg-separator h-0.5 flex md:hidden"></div>
<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}
<Dropdown
onselect={(r) =>

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

@ -8,14 +8,14 @@
options: string[];
selected?: string;
onselect?: (option: string) => void;
disabled?: boolean
disabled?: boolean;
};
let {
options,
selected = $bindable(options[0]),
onselect,
disabled
disabled,
}: Props = $props();
let open = $state(false);
@ -48,16 +48,21 @@
});
</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
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}
onmouseenter={() => (hover = true)}
onmouseleave={() => (hover = false)}
{disabled}
>
<!-- <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}
<p
in:fade={{
@ -68,7 +73,7 @@
duration,
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}
</p>

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

@ -52,41 +52,43 @@
<XIcon size="24" class="text-muted" />
</button>
</div>
<div class="flex gap-4 w-full h-full overflow-hidden relative">
<div class="w-1/2 h-full overflow-hidden rounded-xl">
<img
class="object-cover w-full h-full"
src={file.blobUrl}
alt={file.name}
/>
<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">
<img
class="object-cover w-full h-full"
src={file.blobUrl}
alt={file.name}
/>
</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"
>
<div
class="w-full h-full flex flex-col gap-2 items-center justify-center"
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"
>
<Dropdown
options={file.converter?.supportedFormats || []}
bind:selected={file.to}
onselect={() => file.result && (file.result = null)}
/>
<div class="w-full flex items-center justify-around">
<button
class="btn p-0 w-14 h-14"
disabled={!files.ready}
onclick={file.convert}
>
<RotateCwIcon size="24" />
</button>
<button
class="btn p-0 w-14 h-14"
onclick={file.download}
disabled={!file.result}
>
<DownloadIcon size="24" />
</button>
<div
class="w-[122px] h-fit flex flex-col gap-2 items-center justify-center"
>
<Dropdown
options={file.converter?.supportedFormats || []}
bind:selected={file.to}
onselect={() => file.result && (file.result = null)}
/>
<div class="w-full flex items-center justify-between">
<button
class="btn p-0 w-14 h-14"
disabled={!files.ready}
onclick={file.convert}
>
<RotateCwIcon size="24" />
</button>
<button
class="btn p-0 w-14 h-14"
onclick={file.download}
disabled={!file.result}
>
<DownloadIcon size="24" />
</button>
</div>
</div>
</div>
</div>