CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

super mega layout improvements

Browse Source
This commit is contained in:
Yuri Tatishchev 2024-12-31 19:32:20 -08:00
parent 923c24a93e
commit d5b54722b3
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
8 changed files with 53 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.css
View File

@ -99,11 +99,10 @@
} }
ol > li { ol > li {
@apply flex; @apply flex flex-wrap gap-x-2;
counter-increment: counterName; counter-increment: counterName;
} }
ol > li:before { ol > li:before {
@apply mr-2;
content: counter(counterName) '.'; content: counter(counterName) '.';
} }
} }

7
src/app.html
View File

@ -6,7 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body
<div class="flex min-h-screen flex-col gap-8 p-4 max-sm:px-2">%sveltekit.body%</div> data-sveltekit-preload-data="hover"
class="flex min-h-screen flex-col items-center gap-8 p-4 max-sm:px-2"
>
%sveltekit.body%
</body> </body>
</html> </html>

3
src/lib/components/app/code-snippet/code-snippet.svelte
View File

@ -22,10 +22,9 @@
} }
</script> </script>
<div class="relative max-w-fit overflow-x-hidden rounded-lg bg-accent"> <div class="relative flex-grow overflow-x-hidden rounded-lg bg-accent">
<div class="flex items-start overflow-x-auto p-2"> <div class="flex items-start overflow-x-auto p-2">
<pre><code>{data}</code></pre> <pre><code>{data}</code></pre>
{#if copy || download} {#if copy || download}
<!--Copy button--> <!--Copy button-->
<!--Flex reverse for peer hover to work properly--> <!--Flex reverse for peer hover to work properly-->

4
src/lib/components/app/wireguard-guide/wireguard-guide.svelte
View File

@ -5,7 +5,7 @@
import guideVideo from '$lib/assets/guide-client.mp4'; import guideVideo from '$lib/assets/guide-client.mp4';
</script> </script>
<Tabs.Root value="android" class="max-w-xl"> <Tabs.Root value="android">
<Tabs.List class="grid w-full grid-cols-3"> <Tabs.List class="grid w-full grid-cols-3">
<Tabs.Trigger value="android">Android</Tabs.Trigger> <Tabs.Trigger value="android">Android</Tabs.Trigger>
<Tabs.Trigger value="windows">Windows</Tabs.Trigger> <Tabs.Trigger value="windows">Windows</Tabs.Trigger>
@ -35,7 +35,7 @@
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<p>Download the configuration file and import it</p> <p>Download the configuration file and import it</p>
<aside>Alternatively, you can scan the QR code with the WireGuard app</aside> <aside>Alternatively, you can scan the QR code with the WireGuard app</aside>
<video controls muted preload="metadata" class="max-h-screen"> <video autoplay loop controls muted preload="metadata" class="max-h-screen">
<source src={guideVideo} type="video/mp4" /> <source src={guideVideo} type="video/mp4" />
</video> </video>
</div> </div>

15
src/routes/+layout.svelte
View File

@ -14,10 +14,10 @@
} }
</script> </script>
<header class="sm:flex"> <header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 xl:max-w-screen-xl">
<span class=" mr-6 font-bold sm:inline-block">VPGen</span> <span class="font-bold sm:inline-block">VPGen</span>
<nav> <nav class="max-w-full">
<ul class="flex items-center gap-6 text-sm"> <ul class="flex items-center gap-6 overflow-x-auto text-sm">
<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li> <li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
{#if user} {#if user}
<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li> <li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
@ -27,13 +27,16 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main class="flex flex-grow flex-col gap-4"> <main class="flex min-w-full max-w-full flex-grow flex-col gap-4 xl:min-w-[1280px]">
{@render children()} {@render children()}
</main> </main>
<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936--> <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
<!--Some shenanings needed to be done to get the footer position to stick correctly, <!--Some shenanings needed to be done to get the footer position to stick correctly,
didn't work with display: contents--> didn't work with display: contents-->
<footer class="relative inset-x-0 bottom-0 text-center"> <footer class="inset-x-0 bottom-0 w-full text-center">
<p>&copy; 2024</p> <p>&copy; 2024</p>
</footer> </footer>
<style>
</style>

8
src/routes/+page.svelte
View File

@ -10,7 +10,7 @@
<title>VPGen</title> <title>VPGen</title>
</svelte:head> </svelte:head>
<h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl"> <h1 class="mb-2 scroll-m-20 text-center text-3xl font-extrabold tracking-tight lg:text-4xl">
Welcome to VPGen Welcome to VPGen
</h1> </h1>
@ -21,7 +21,7 @@
<section id="get-started" class="border-l-2 pl-6"> <section id="get-started" class="border-l-2 pl-6">
<p> <p>
To get started, To get started,
<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button> <Button class="ml-2" href="/clients?add=New+Client">Create a New Client</Button>
</p> </p>
</section> </section>
<!-- <section id="using-wireguard">--> <!-- <section id="using-wireguard">-->
@ -34,8 +34,8 @@
<!-- </details>--> <!-- </details>-->
<!-- </section>--> <!-- </section>-->
{:else} {:else}
<AuthForm class="p-4" /> <AuthForm />
<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p> <!-- <p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>-->
{/if} {/if}
<style> <style>

59
src/routes/clients/+page.svelte
View File

@ -41,7 +41,7 @@
<Table.Row class="group hover:bg-background hover:bg-opacity-40"> <Table.Row class="group hover:bg-background hover:bg-opacity-40">
<Table.Head scope="row"> <Table.Head scope="row">
<a <a
href={`/clients/${client.id}`} href={`./${client.id}`}
class="flex size-full items-center group-hover:underline" class="flex size-full items-center group-hover:underline"
> >
{client.name} {client.name}
@ -61,34 +61,33 @@
</Table.Root> </Table.Root>
<!--Floating action button for adding a new client--> <!--Floating action button for adding a new client-->
<!--Not sure if this is the best place for the input field, will think about it later--> <Dialog.Root bind:open={dialogOpen}>
<div class="mt-auto flex self-end pt-4"> <div class="mt-auto flex self-end pt-4">
<Dialog.Root bind:open={dialogOpen}> <Dialog.Trigger class={buttonVariants({ variant: 'default' }) + ' flex gap-4'}>
<Dialog.Trigger class={buttonVariants({ variant: "default" }) + "flex gap-4"}>
<LucidePlus /> <LucidePlus />
Add Client New Client
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Content class="max-w-xs"> </div>
<form class="contents" method="post" action="?/create"> <Dialog.Content class="max-w-xs">
<Dialog.Header class=""> <form class="contents" method="post" action="?/create">
<Dialog.Title>Create a new client</Dialog.Title> <Dialog.Header class="">
</Dialog.Header> <Dialog.Title>Create a new client</Dialog.Title>
<div class="flex flex-wrap items-center justify-between gap-4"> </Dialog.Header>
<Label for="name">Name</Label> <div class="flex flex-wrap items-center justify-between gap-4">
<Input <Label for="name">Name</Label>
bind:value={dialogVal} <Input
required bind:value={dialogVal}
pattern=".*[^\s]+.*" required
type="text" pattern=".*[^\s]+.*"
name="name" type="text"
placeholder="New Client" name="name"
class="max-w-[20ch]" placeholder="New Client"
/> class="max-w-[20ch]"
</div> />
<Dialog.Footer> </div>
<Button type="submit">Create</Button> <Dialog.Footer>
</Dialog.Footer> <Button type="submit">Create</Button>
</form> </Dialog.Footer>
</Dialog.Content> </form>
</Dialog.Root> </Dialog.Content>
</div> </Dialog.Root>

4
src/routes/clients/[id]/+page.svelte
View File

@ -25,14 +25,14 @@
<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1> <h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
<section id="client-configuration" class="flex flex-wrap gap-4"> <section id="client-configuration" class="flex flex-wrap justify-center gap-4">
<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download /> <CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
<div class="overflow-hidden rounded-lg"> <div class="overflow-hidden rounded-lg">
{@html qrCode.svg()} {@html qrCode.svg()}
</div> </div>
</section> </section>
<section id="usage" class="flex flex-col gap-2"> <section id="usage" class="flex w-full flex-col gap-2">
<h2 class="text-xl font-semibold">Usage</h2> <h2 class="text-xl font-semibold">Usage</h2>
<p>To use VPGen, you need to install the WireGuard app on your device.</p> <p>To use VPGen, you need to install the WireGuard app on your device.</p>
<WireguardGuide /> <WireguardGuide />