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

Adding prefetch to collection/wishlist, fixed position on modals, and adding remove color to all modals.

Browse source
This commit is contained in:
Bradley Shellnut 2022-11-03 15:42:58 -05:00
parent 56a298e7b9
commit 1ddd21e1a9
10 changed files with 88 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -19,7 +19,7 @@
"@sveltejs/adapter-auto": "1.0.0-next.72", "@sveltejs/adapter-auto": "1.0.0-next.72",
"@sveltejs/kit": "1.0.0-next.480", "@sveltejs/kit": "1.0.0-next.480",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"@types/node": "^18.11.8", "@types/node": "^18.11.9",
"@typescript-eslint/eslint-plugin": "^5.42.0", "@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0", "@typescript-eslint/parser": "^5.42.0",
"eslint": "^8.26.0", "eslint": "^8.26.0",

12
pnpm-lock.yaml
View file

@ -12,7 +12,7 @@ specifiers:
'@sveltejs/kit': 1.0.0-next.480 '@sveltejs/kit': 1.0.0-next.480
'@types/cookie': ^0.5.1 '@types/cookie': ^0.5.1
'@types/feather-icons': ^4.7.0 '@types/feather-icons': ^4.7.0
'@types/node': ^18.11.8 '@types/node': ^18.11.9
'@typescript-eslint/eslint-plugin': ^5.42.0 '@typescript-eslint/eslint-plugin': ^5.42.0
'@typescript-eslint/parser': ^5.42.0 '@typescript-eslint/parser': ^5.42.0
cookie: ^0.5.0 cookie: ^0.5.0
@ -51,7 +51,7 @@ devDependencies:
'@sveltejs/adapter-auto': 1.0.0-next.72 '@sveltejs/adapter-auto': 1.0.0-next.72
'@sveltejs/kit': 1.0.0-next.480_svelte@3.52.0+vite@3.2.2 '@sveltejs/kit': 1.0.0-next.480_svelte@3.52.0+vite@3.2.2
'@types/cookie': 0.5.1 '@types/cookie': 0.5.1
'@types/node': 18.11.8 '@types/node': 18.11.9
'@typescript-eslint/eslint-plugin': 5.42.0_6xw5wg2354iw4zujk2f3vyfrzu '@typescript-eslint/eslint-plugin': 5.42.0_6xw5wg2354iw4zujk2f3vyfrzu
'@typescript-eslint/parser': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m '@typescript-eslint/parser': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m
eslint: 8.26.0 eslint: 8.26.0
@ -228,7 +228,7 @@ packages:
engines: {node: '>=14'} engines: {node: '>=14'}
hasBin: true hasBin: true
dependencies: dependencies:
'@types/node': 18.11.8 '@types/node': 18.11.9
playwright-core: 1.27.1 playwright-core: 1.27.1
dev: true dev: true
@ -361,8 +361,8 @@ packages:
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
dev: true dev: true
/@types/node/18.11.8: /@types/node/18.11.9:
resolution: {integrity: sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==} resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
dev: true dev: true
/@types/pug/2.0.6: /@types/pug/2.0.6:
@ -372,7 +372,7 @@ packages:
/@types/sass/1.43.1: /@types/sass/1.43.1:
resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==} resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
dependencies: dependencies:
'@types/node': 18.11.8 '@types/node': 18.11.9
dev: true dev: true
/@types/semver/7.3.13: /@types/semver/7.3.13:

12
src/lib/components/dialog/ClearCollectionDialog.svelte
View file

@ -35,7 +35,7 @@
<DialogDescription>Are you sure you want to clear your collection?</DialogDescription> <DialogDescription>Are you sure you want to clear your collection?</DialogDescription>
<div class="dialog-footer"> <div class="dialog-footer">
<button on:click={clearCollection}>Clear</button> <button class="remove" on:click={clearCollection}>Clear</button>
<button <button
on:click={() => { on:click={() => {
boredState.update((n) => ({ ...n, dialog: { isOpen: false } })); boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@ -50,7 +50,7 @@
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
position: absolute; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -79,6 +79,14 @@
background-color: var(--color-btn-primary-active-hover); background-color: var(--color-btn-primary-active-hover);
} }
} }
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
} }
} }
</style> </style>

12
src/lib/components/dialog/ClearWishlistDialog.svelte
View file

@ -35,7 +35,7 @@
<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription> <DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
<div class="dialog-footer"> <div class="dialog-footer">
<button on:click={clearWishlist}>Clear</button> <button class="remove" on:click={clearWishlist}>Clear</button>
<button <button
on:click={() => { on:click={() => {
boredState.update((n) => ({ ...n, dialog: { isOpen: false } })); boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@ -50,7 +50,7 @@
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
position: absolute; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -79,6 +79,14 @@
background-color: var(--color-btn-primary-active-hover); background-color: var(--color-btn-primary-active-hover);
} }
} }
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
} }
} }
</style> </style>

106
src/lib/components/dialog/DefaultDialog.svelte
View file

@ -1,67 +1,67 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { import {
Dialog, Dialog,
DialogDescription, DialogDescription,
DialogOverlay, DialogOverlay,
DialogTitle DialogTitle
} from '@rgossiaux/svelte-headlessui'; } from '@rgossiaux/svelte-headlessui';
import { boredState } from '$root/lib/stores/boredState'; import { boredState } from '$root/lib/stores/boredState';
$: isOpen = $boredState?.dialog?.isOpen; $: isOpen = $boredState?.dialog?.isOpen;
</script> </script>
<Dialog <Dialog
open={isOpen} open={isOpen}
on:close={() => { on:close={() => {
boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } })); boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
}} }}
static static
> >
<div transition:fade> <div transition:fade>
<DialogOverlay class="dialog-overlay" /> <DialogOverlay class="dialog-overlay" />
<div class="dialog"> <div class="dialog">
<DialogTitle>Default Dialog</DialogTitle> <DialogTitle>Default Dialog</DialogTitle>
<DialogDescription>Dialog Description</DialogDescription> <DialogDescription>Dialog Description</DialogDescription>
<div class="dialog-footer" /> <div class="dialog-footer" />
</div> </div>
</div> </div>
</Dialog> </Dialog>
<style lang="scss"> <style lang="scss">
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
position: absolute; position: fixed;
top: 35%; top: 35%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 101; z-index: 101;
border-radius: 10px; border-radius: 10px;
background-color: var(--clr-input-bg); background-color: var(--clr-input-bg);
padding: 2rem; padding: 2rem;
min-width: 400px; min-width: 400px;
.dialog-footer { .dialog-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 2rem; gap: 2rem;
margin: 1rem 0; margin: 1rem 0;
button { button {
display: flex; display: flex;
place-content: center; place-content: center;
gap: 1rem; gap: 1rem;
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
padding: 1rem; padding: 1rem;
background-color: var(--color-btn-primary-active); background-color: var(--color-btn-primary-active);
&:hover { &:hover {
background-color: var(--color-btn-primary-active-hover); background-color: var(--color-btn-primary-active-hover);
} }
} }
} }
} }
</style> </style>

2
src/lib/components/dialog/RemoveCollectionDialog.svelte
View file

@ -53,7 +53,7 @@
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
position: absolute; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);

2
src/lib/components/dialog/RemoveWishlistDialog.svelte
View file

@ -53,7 +53,7 @@
.dialog { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
position: absolute; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);

4
src/lib/components/header/Header.svelte
View file

@ -11,8 +11,8 @@
</div> </div>
<nav> <nav>
<a href="/collection" title="Go to your collection">Collection</a> <a href="/collection" title="Go to your collection" data-sveltekit-prefetch>Collection</a>
<a href="/wishlist" title="Go to your collection">Wishlist</a> <a href="/wishlist" title="Go to your collection" data-sveltekit-prefetch>Wishlist</a>
<Profile /> <Profile />
</nav> </nav>
</header> </header>

4
src/lib/components/preferences/gameCollection.svelte
View file

@ -50,9 +50,9 @@
<button type="button" aria-label="Export Collection" on:click={() => exportCollection()} <button type="button" aria-label="Export Collection" on:click={() => exportCollection()}
><ShareIcon width="24" height="24" />Export</button ><ShareIcon width="24" height="24" />Export</button
> >
<button type="button" aria-label="Save Collection" on:click={() => saveCollection()} <!-- <button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
><SaveIcon width="24" height="24" />Save</button ><SaveIcon width="24" height="24" />Save</button
> > -->
<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}> <button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}>
<TrashIcon width="24" height="24" />Clear <TrashIcon width="24" height="24" />Clear
</button> </button>

4
src/lib/components/preferences/gameWishlist.svelte
View file

@ -50,9 +50,9 @@
<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()} <button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
><ShareIcon width="24" height="24" />Export</button ><ShareIcon width="24" height="24" />Export</button
> >
<button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()} <!-- <button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
><SaveIcon width="24" height="24" />Save</button ><SaveIcon width="24" height="24" />Save</button
> > -->
<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}> <button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
<TrashIcon width="24" height="24" />Clear <TrashIcon width="24" height="24" />Clear
</button> </button>