Numerous changes

- Set file.result to null when changing type (so the user remembers to redo the conversion by disabling dl btn)
- If link is to external site, open in new tab, else open in current
- Add animation when loading about page
- Add underline to hyperlink in about
- Fix conversion boxes misaligned
- Fix footer links not clickable
- Minor language changes
This commit is contained in:
JovannMC 2024-12-31 15:54:39 +03:00
parent c7ca12a924
commit f8d4d546a8
No known key found for this signature in database
9 changed files with 48 additions and 39 deletions

View File

@ -1,7 +1,7 @@
<script lang="ts">
import { files } from "$lib/store/index.svelte";
import { FolderArchiveIcon, RefreshCw } from "lucide-svelte";
import Panel from "../visual/Panel.svelte";
import { files } from "$lib/store/index.svelte";
import Dropdown from "./Dropdown.svelte";
</script>
@ -28,7 +28,10 @@
{#if files.requiredConverters.length === 1}
<p class="whitespace-nowrap">Set all to</p>
<Dropdown
onselect={(r) => files.files.forEach((f) => (f.to = r))}
onselect={(r) => files.files.forEach((f) => {
f.to = r;
f.result = null;
})}
options={files.files[0]?.converter?.supportedFormats || []}
/>
{/if}

View File

@ -22,9 +22,13 @@
{#each links as [name, url] (name)}
<!-- bullet point -->
<p></p>
<a target="_blank" class="hover:underline font-normal" href={url}
>{name}</a
<a
class="hover:underline font-normal"
href={url}
target={url.startsWith("http") ? "_blank" : "_self"}
>
{name}
</a>
{/each}
</div>
</footer>

View File

@ -47,7 +47,7 @@
<p class="text-sm text-muted font-normal">
Big thanks to all these people for helping out!
<a
class="text-blue-500 font-normal"
class="text-blue-500 font-normal hover:underline"
href="https://github.com/not-nullptr/VERT"
target="_blank"
rel="noopener noreferrer"

View File

@ -23,7 +23,7 @@
size="24"
class="inline-block mr-2"
/>
Discord Server
Discord server
</a>
<a
href="https://github.com/not-nullptr/VERT"
@ -32,7 +32,7 @@
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
>
<GithubIcon size="24" class="inline-block mr-2" />
Source Code
Source code
</a>
</div>
</Panel>

View File

@ -4,24 +4,22 @@
</script>
<Panel class="flex flex-col gap-3 p-6">
<h2 class="text-2xl font-bold">
<MessageCircleQuestionIcon
size="40"
class="inline-block -mt-1 mr-2 bg-accent p-1.5 rounded-full"
color="black"
/>
Why VERT?
</h2>
<p class="text-lg font-normal">
<b>File converters have always disappointed us.</b> They're
ugly, riddled with ads, and most importantly; slow. We
decided to solve this problem once and for all by making an
alternative that solves all those problems, and then some.<br
/>
<br />
All your files are converted completely on—device, which means
that there's no delay between sending and receiving the file
from a server, and that we never get to snoop on the files you
convert.
</p>
</Panel>
<h2 class="text-2xl font-bold">
<MessageCircleQuestionIcon
size="40"
class="inline-block -mt-1 mr-2 bg-accent p-1.5 rounded-full"
color="black"
/>
Why VERT?
</h2>
<p class="text-lg font-normal">
<b>File converters have always disappointed us.</b> They're ugly,
riddled with ads, and most importantly; slow. We decided to solve this
problem once and for all by making an alternative that solves all those
problems, and more.<br />
<br />
All your files are converted completely on-device; this means that there's
no delay between sending and receiving the files from a server, and we never
get to snoop on the files you convert.
</p>
</Panel>

View File

@ -190,14 +190,14 @@
{@render children()}
</div>
<div
class="w-full h-14 border-t border-separator relative -z-50"
class="w-full h-14 border-t border-separator relative"
>
<Footer
class="w-full h-full"
items={{
"Privacy Policy": "#",
"Source Code": "#",
"Discord Server": "#",
"Privacy policy": "#",
"Source code": "https://github.com/not-nullptr/VERT",
"Discord server": "https://discord.gg/kqevGxYPak",
}}
/>
</div>

View File

@ -33,8 +33,8 @@
class="font-normal text-xl text-muted blur-in"
style:--delay="60ms"
>
All processing done on your device. No file size limit,
no ads, and completely open source.
All processing is done on your device. No file size
limit, no ads, and completely open source.
</p>
</div>
<div

View File

@ -99,16 +99,19 @@
];
</script>
<div class="flex flex-col h-full items-center blur-in">
<div class="flex flex-col h-full items-center">
<h1
class="text-3xl tracking-tight leading-[72px] mb-6"
style:--delay="20ms"
class="text-3xl tracking-tight leading-[72px] mb-6 blur-in"
style="--delay: 20ms;"
>
<InfoIcon size="40" class="inline-block -mt-2 mr-2" />
About
</h1>
<div class="w-full max-w-[1280px] flex flex-row gap-4">
<div
class="w-full max-w-[1280px] flex flex-row gap-4 blur-in"
style="--delay: 60ms"
>
<!-- Why VERT? & Credits -->
<div class="flex flex-col gap-4 flex-1">
<About.Why />

View File

@ -69,6 +69,7 @@
<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
@ -91,7 +92,7 @@
</Panel>
{/snippet}
<div class="w-full h-full flex justify-center pt-60 pb-20">
<div class="w-full h-full flex justify-center">
<div
class="w-[794px] grid"
style="grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; gap: 16px"