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/kit": "1.0.0-next.480",
"@types/cookie": "^0.5.1",
"@types/node": "^18.11.8",
"@types/node": "^18.11.9",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"eslint": "^8.26.0",

12
pnpm-lock.yaml
View file

@ -12,7 +12,7 @@ specifiers:
'@sveltejs/kit': 1.0.0-next.480
'@types/cookie': ^0.5.1
'@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/parser': ^5.42.0
cookie: ^0.5.0
@ -51,7 +51,7 @@ devDependencies:
'@sveltejs/adapter-auto': 1.0.0-next.72
'@sveltejs/kit': 1.0.0-next.480_svelte@3.52.0+vite@3.2.2
'@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/parser': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m
eslint: 8.26.0
@ -228,7 +228,7 @@ packages:
engines: {node: '>=14'}
hasBin: true
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
playwright-core: 1.27.1
dev: true
@ -361,8 +361,8 @@ packages:
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
dev: true
/@types/node/18.11.8:
resolution: {integrity: sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==}
/@types/node/18.11.9:
resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
dev: true
/@types/pug/2.0.6:
@ -372,7 +372,7 @@ packages:
/@types/sass/1.43.1:
resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
dependencies:
'@types/node': 18.11.8
'@types/node': 18.11.9
dev: true
/@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>
<div class="dialog-footer">
<button on:click={clearCollection}>Clear</button>
<button class="remove" on:click={clearCollection}>Clear</button>
<button
on:click={() => {
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@ -50,7 +50,7 @@
.dialog {
display: grid;
gap: 1.5rem;
position: absolute;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@ -79,6 +79,14 @@
background-color: var(--color-btn-primary-active-hover);
}
}
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
}
}
</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>
<div class="dialog-footer">
<button on:click={clearWishlist}>Clear</button>
<button class="remove" on:click={clearWishlist}>Clear</button>
<button
on:click={() => {
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@ -50,7 +50,7 @@
.dialog {
display: grid;
gap: 1.5rem;
position: absolute;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@ -79,6 +79,14 @@
background-color: var(--color-btn-primary-active-hover);
}
}
.remove {
background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
}
}
}
</style>

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

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

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

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

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

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

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

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

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

@ -50,9 +50,9 @@
<button type="button" aria-label="Export Collection" on:click={() => exportCollection()}
><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
>
> -->
<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}>
<TrashIcon width="24" height="24" />Clear
</button>

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

@ -50,9 +50,9 @@
<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
><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
>
> -->
<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
<TrashIcon width="24" height="24" />Clear
</button>