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

Update styles for modal.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-30 22:57:16 -05:00
parent 5236ac5c2b
commit 459292c234
1 changed files with 47 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/routes/collection/+page.svelte
View file

@ -15,7 +15,11 @@
let gameToRemove: GameType | SavedGameType; let gameToRemove: GameType | SavedGameType;
console.log('isOpen', isOpen); console.log('isOpen', isOpen);
function handleRemoveGame(event: Event) { interface RemoveGameEvent extends Event {
detail: GameType | SavedGameType;
}
function handleRemoveGame(event: RemoveGameEvent) {
console.log('event', event); console.log('event', event);
gameToRemove = event?.detail; gameToRemove = event?.detail;
isOpen = true; isOpen = true;
@ -45,26 +49,26 @@
</div> </div>
</div> </div>
{#if isOpen} {#if isOpen}
<!-- <div class="container"> --> <div class="container">
<div transition:fade> <div transition:fade>
<Dialog open={isOpen} on:close={() => (isOpen = false)} static> <Dialog open={isOpen} on:close={() => (isOpen = false)} static>
<div transition:fade> <div transition:fade>
<DialogOverlay class="dialog-overlay" /> <DialogOverlay class="dialog-overlay" />
<div class="dialog"> <div class="dialog">
<DialogTitle>Remove from collection</DialogTitle> <DialogTitle>Remove from collection</DialogTitle>
<DialogDescription <DialogDescription
>Are you sure you want to remove from your collection?</DialogDescription >Are you sure you want to remove from your collection?</DialogDescription
> >
<div class="dialog-footer"> <div class="dialog-footer">
<button on:click={() => removeGame()}>Remove</button> <button on:click={() => removeGame()}>Remove</button>
<button on:click={() => (isOpen = false)}>Cancel</button> <button on:click={() => (isOpen = false)}>Cancel</button>
</div>
</div> </div>
</div> </div>
</div> </Dialog>
</Dialog> </div>
</div> </div>
<!-- </div> -->
{/if} {/if}
<style lang="scss"> <style lang="scss">
@ -90,18 +94,39 @@
} }
} }
:global(.dialog) { .dialog {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
position: fixed; position: absolute;
top: 25%; top: 50%;
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(--primary); background-color: var(--clr-input-bg);
padding: 2rem; padding: 2rem;
max-width: 500px; min-width: 400px;
.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);
&:hover {
background-color: var(--color-btn-primary-active-hover);
}
}
}
} }
:global(.dialog-overlay) { :global(.dialog-overlay) {
@ -112,12 +137,6 @@
opacity: 0.8; opacity: 0.8;
} }
:global(.dialog-footer) {
display: flex;
justify-content: space-between;
gap: 2rem;
margin: 1rem 0;
}
/* /*
.container > .button { .container > .button {
display: grid; display: grid;