BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixing menu links to work and submit to logout still working. Fix background on loader.

Browse source
This commit is contained in:
Bradley Shellnut 2023-09-18 12:09:44 +12:00
parent 66ef49436f
commit fb565c1593
3 changed files with 69 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/lib/components/header/index.svelte
View file

@ -34,34 +34,38 @@
<DropdownMenu.Group>
<DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>
<User class="mr-2 h-4 w-4" />
<Button variant="link" class="text-secondary-foreground" href="/profile">Profile</Button>
<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item>
<ListChecks class="mr-2 h-4 w-4" />
<Button variant="link" class="text-secondary-foreground" href="/collection">Collection</Button>
<DropdownMenu.Shortcut>⇧⌘C</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item>
<ListTodo class="mr-2 h-4 w-4" />
<Button variant="link" class="text-secondary-foreground" href="/wishlist">Wishlist</Button>
<DropdownMenu.Shortcut>⇧⌘W</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item>
<form
use:enhance
action="/logout"
method="POST"
>
<Button type="submit">
<a href="/profile">
<DropdownMenu.Item>
<User class="mr-2 h-4 w-4" />
<span>Profile</span>
</DropdownMenu.Item>
</a>
<a href="/collection">
<DropdownMenu.Item>
<ListChecks class="mr-2 h-4 w-4" />
<span>Collection</span>
</DropdownMenu.Item>
</a>
<a href="/wishlist">
<DropdownMenu.Item>
<ListTodo class="mr-2 h-4 w-4" />
<span>Wishlist</span>
</DropdownMenu.Item>
</a>
<form
use:enhance
action="/logout"
method="POST"
>
<button type="submit" class="">
<DropdownMenu.Item>
<div class="flex items-center gap-1">
<LogOut class="mr-2 h-4 w-4"/>
Sign out
</Button>
</form>
<DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<span>Sign out</span>
</div>
</DropdownMenu.Item>
</button>
</form>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Root>
@ -90,10 +94,6 @@
}
}
.menu {
display: grid;
}
.corner {
width: 3em;
height: 3em;
@ -124,10 +124,6 @@
}
nav a {
/* display: flex; */
/* height: 100%; */
/* align-items: center; */
/* padding: 0 1em; */
color: var(--heading-color);
font-weight: 700;
text-transform: uppercase;
@ -141,54 +137,7 @@
color: var(--accent-color);
}
/* .menu {
@apply z-10 flex max-h-[300px] min-w-[220px] flex-col shadow-lg;
@apply rounded-md bg-slate-300 p-1 shadow-neutral-900/30 lg:max-h-none;
@apply ring-0 !important;
} */
/*
.subMenu {
@apply min-w-[220px] shadow-md shadow-neutral-900/30;
}*/
/* .item {
@apply relative h-6 select-none rounded-sm pl-6 pr-1;
@apply z-20 text-slate-700 outline-none;
@apply data-[highlighted]:bg-slate-200 data-[highlighted]:text-slate-700;
@apply data-[disabled]:text-neutral-300;
@apply flex items-center leading-none;
@apply ring-0 !important;
} */
/*
.trigger {
@apply inline-flex h-9 w-9 items-center justify-center rounded-full bg-white;
@apply text-magnum-700 transition-colors hover:bg-white/90;
@apply data-[highlighted]:ring-magnum-400 data-[highlighted]:ring-offset-2 !important;
@apply p-0 text-sm font-medium focus:ring data-[highlighted]:outline-none;
}
.check {
@apply absolute left-2 top-1/2 text-magnum-500;
translate: 0 calc(-50% + 1px);
}
.dot {
@apply h-[4.75px] w-[4.75px] rounded-full bg-magnum-700;
} */
.separator {
@apply m-[5px] h-[1px] bg-black;
}
/* .rightSlot {
@apply ml-auto pl-5;
}
.icon {
@apply h-[13px] w-[13px];
}
.check {
@apply absolute left-0 inline-flex w-6 items-center justify-center;
}
.text {
@apply pl-6 text-xs leading-6 text-neutral-600;
} */
</style>

58
src/routes/(auth)/login/+page.svelte
View file

@ -32,6 +32,12 @@
delayMs: 250,
});
$: {
if ($delayed) {
boredState.update((n) => ({ ...n, loading: true }));
}
}
const flash = flashModule.getFlash(page);
$: {
@ -60,41 +66,29 @@
<Input type="password" id="password" name="password" placeholder="Password" autocomplete="password" data-invalid={$errors.password} bind:value={$form.password} required />
<Button type="submit">Login</Button>
{#if $errors._errors}
<Alert.Root variant="destructive">
<AlertCircle class="h-4 w-4" />
<Alert.Title>Error</Alert.Title>
<Alert.Description>
{$errors._errors}
</Alert.Description>
</Alert.Root>
{/if}
<p class="px-8 text-center text-sm text-muted-foreground">
By clicking continue, you agree to our
<a href="/terms" class="underline underline-offset-4 hover:text-primary">
Terms of Use
</a>
and
<a href="/privacy" class="underline underline-offset-4 hover:text-primary">
Privacy Policy
</a>.
</p>
<Alert.Root variant="destructive">
<AlertCircle class="h-4 w-4" />
<Alert.Title>Error</Alert.Title>
<Alert.Description>
{$errors._errors}
</Alert.Description>
</Alert.Root>
{/if}
<p class="px-8 text-center text-sm text-muted-foreground">
By clicking continue, you agree to our
<a href="/terms" class="underline underline-offset-4 hover:text-primary">
Terms of Use
</a>
and
<a href="/privacy" class="underline underline-offset-4 hover:text-primary">
Privacy Policy
</a>.
</p>
</form>
{#if $delayed}
<Portal>
<!-- <Transition transition={{ type: 'fade', duration: 0 }}> -->
<div class="loading">
<Loading />
<h3>Loading...</h3>
</div>
<!-- </Transition> -->
<div class="background" />
</Portal>
{/if}
</div>
<style lang="postcss">
.loading {
.loading {
position: fixed;
top: 50%;
left: 50%;
@ -104,7 +98,7 @@
place-items: center;
gap: 1rem;
& h3 {
h3 {
color: white;
}
}

15
src/routes/+layout.svelte
View file

@ -85,7 +85,7 @@
<slot />
</div>
<!-- {#if loading}
{#if loading}
<Portal>
<div class="loading">
<Loading />
@ -93,7 +93,7 @@
</div>
<div class="background" />
</Portal>
{/if} -->
{/if}
<Toaster />
@ -108,11 +108,20 @@
place-items: center;
gap: 1rem;
& h3 {
h3 {
color: white;
}
}
.background {
background: black;
opacity: 0.8;
cursor: none;
inset: 0;
position: fixed;
z-index: 100;
}
.layout {
display: flex;
position: relative;