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

minor layout improvements

Browse Source
This commit is contained in:
Yuri Tatishchev 2024-12-31 19:23:45 -08:00
parent eb2b869015
commit 991355a95a
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
4 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app.html
View File

@ -6,9 +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 items-center gap-8 p-4 max-sm:px-2"> data-sveltekit-preload-data="hover"
%sveltekit.body% class="flex min-h-screen flex-col items-center gap-8 p-4 max-sm:px-2"
</div> >
%sveltekit.body%
</body> </body>
</html> </html>

8
src/routes/+layout.svelte
View File

@ -14,10 +14,10 @@
} }
</script> </script>
<header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 md:max-w-3xl"> <header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 xl:max-w-screen-xl">
<span class="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 flex-wrap 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,7 +27,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<main class="flex min-w-full max-w-full flex-grow flex-col gap-4 md:min-w-[48rem]"> <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>

6
src/routes/+page.svelte
View File

@ -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>

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

@ -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>