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.Group>
<DropdownMenu.Label>My Account</DropdownMenu.Label> <DropdownMenu.Label>My Account</DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
<DropdownMenu.Item> <a href="/profile">
<User class="mr-2 h-4 w-4" /> <DropdownMenu.Item>
<Button variant="link" class="text-secondary-foreground" href="/profile">Profile</Button> <User class="mr-2 h-4 w-4" />
<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut> <span>Profile</span>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item> </a>
<ListChecks class="mr-2 h-4 w-4" /> <a href="/collection">
<Button variant="link" class="text-secondary-foreground" href="/collection">Collection</Button> <DropdownMenu.Item>
<DropdownMenu.Shortcut>⇧⌘C</DropdownMenu.Shortcut> <ListChecks class="mr-2 h-4 w-4" />
</DropdownMenu.Item> <span>Collection</span>
<DropdownMenu.Item> </DropdownMenu.Item>
<ListTodo class="mr-2 h-4 w-4" /> </a>
<Button variant="link" class="text-secondary-foreground" href="/wishlist">Wishlist</Button> <a href="/wishlist">
<DropdownMenu.Shortcut>⇧⌘W</DropdownMenu.Shortcut> <DropdownMenu.Item>
</DropdownMenu.Item> <ListTodo class="mr-2 h-4 w-4" />
<DropdownMenu.Item> <span>Wishlist</span>
<form </DropdownMenu.Item>
use:enhance </a>
action="/logout" <form
method="POST" use:enhance
> action="/logout"
<Button type="submit"> method="POST"
>
<button type="submit" class="">
<DropdownMenu.Item>
<div class="flex items-center gap-1">
<LogOut class="mr-2 h-4 w-4"/> <LogOut class="mr-2 h-4 w-4"/>
Sign out <span>Sign out</span>
</Button> </div>
</form> </DropdownMenu.Item>
<DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut> </button>
</DropdownMenu.Item> </form>
</DropdownMenu.Group> </DropdownMenu.Group>
</DropdownMenu.Content> </DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>
@ -90,10 +94,6 @@
} }
} }
.menu {
display: grid;
}
.corner { .corner {
width: 3em; width: 3em;
height: 3em; height: 3em;
@ -124,10 +124,6 @@
} }
nav a { nav a {
/* display: flex; */
/* height: 100%; */
/* align-items: center; */
/* padding: 0 1em; */
color: var(--heading-color); color: var(--heading-color);
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
@ -141,54 +137,7 @@
color: var(--accent-color); 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 { .separator {
@apply m-[5px] h-[1px] bg-black; @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> </style>

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

@ -32,6 +32,12 @@
delayMs: 250, delayMs: 250,
}); });
$: {
if ($delayed) {
boredState.update((n) => ({ ...n, loading: true }));
}
}
const flash = flashModule.getFlash(page); 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 /> <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> <Button type="submit">Login</Button>
{#if $errors._errors} {#if $errors._errors}
<Alert.Root variant="destructive"> <Alert.Root variant="destructive">
<AlertCircle class="h-4 w-4" /> <AlertCircle class="h-4 w-4" />
<Alert.Title>Error</Alert.Title> <Alert.Title>Error</Alert.Title>
<Alert.Description> <Alert.Description>
{$errors._errors} {$errors._errors}
</Alert.Description> </Alert.Description>
</Alert.Root> </Alert.Root>
{/if} {/if}
<p class="px-8 text-center text-sm text-muted-foreground"> <p class="px-8 text-center text-sm text-muted-foreground">
By clicking continue, you agree to our By clicking continue, you agree to our
<a href="/terms" class="underline underline-offset-4 hover:text-primary"> <a href="/terms" class="underline underline-offset-4 hover:text-primary">
Terms of Use Terms of Use
</a> </a>
and and
<a href="/privacy" class="underline underline-offset-4 hover:text-primary"> <a href="/privacy" class="underline underline-offset-4 hover:text-primary">
Privacy Policy Privacy Policy
</a>. </a>.
</p> </p>
</form> </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> </div>
<style lang="postcss"> <style lang="postcss">
.loading { .loading {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -104,7 +98,7 @@
place-items: center; place-items: center;
gap: 1rem; gap: 1rem;
& h3 { h3 {
color: white; color: white;
} }
} }

15
src/routes/+layout.svelte
View file

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