diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte index bee98362..8763b122 100644 --- a/web/src/components/dialog/SmallDialog.svelte +++ b/web/src/components/dialog/SmallDialog.svelte @@ -1,4 +1,6 @@ <script lang="ts"> + import { tick } from "svelte"; + import { killDialog } from "$lib/dialogs"; import type { DialogButton } from "$lib/types/dialog"; @@ -14,10 +16,12 @@ let dialogParent: HTMLDialogElement; let closing = false; + let open = false; const close = () => { if (dialogParent) { closing = true; + open = false; setTimeout(() => { dialogParent.close(); killDialog(); @@ -27,10 +31,13 @@ $: if (dialogParent) { dialogParent.showModal(); + tick().then(() => { + open = true; + }) } </script> -<dialog id="dialog-{id}" bind:this={dialogParent} class:closing> +<dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open> <div class="dialog-body small-dialog" class:meowbalt-visible={meowbalt}> {#if meowbalt === "error"} <div class="meowbalt-container"> @@ -76,7 +83,7 @@ <style> dialog { display: flex; - flex-direction: row; + flex-direction: column; justify-content: center; align-items: center; background: none; @@ -119,11 +126,19 @@ padding: 18px; margin: var(--padding); border-radius: 29px; - animation: modal-in 0.3s; position: relative; will-change: transform; } + .open .small-dialog { + animation: modal-in 0.35s; + } + + .closing .small-dialog { + animation: modal-out 0.15s; + opacity: 0; + } + .small-dialog.meowbalt-visible { padding-top: 45px; } @@ -133,11 +148,6 @@ top: -110px; } - .closing .small-dialog { - animation: modal-out 0.15s; - opacity: 0; - } - .body-text { font-size: 14.5px; font-weight: 500; @@ -166,19 +176,23 @@ #dialog-backdrop { --backdrop-opacity: 0.4; background-color: var(--popup-backdrop); - position: absolute; + position: inherit; height: 100%; width: 100%; z-index: -1; - opacity: var(--backdrop-opacity); + opacity: 0; animation: backdrop-in 0.15s; - backdrop-filter: blur(7px); } :global([data-reduce-transparency="true"]) #dialog-backdrop { --backdrop-opacity: 0.5; } + .open #dialog-backdrop { + opacity: var(--backdrop-opacity); + animation: backdrop-in 0.15s; + } + .closing #dialog-backdrop { opacity: 0; animation: backdrop-out 0.15s; @@ -189,13 +203,14 @@ transform: scale(0.8); opacity: 0; } + 30% { + opacity: 1; + } 50% { transform: scale(1.005); - opacity: 1; } 100% { transform: scale(1); - opacity: 1; } } @@ -230,12 +245,32 @@ @media screen and (max-width: 535px) { dialog { - align-items: end; + justify-content: end; } .small-dialog { margin-bottom: calc(var(--padding) + env(safe-area-inset-bottom)); box-shadow: 0 0 0 2px var(--popup-stroke) inset; } + + .open .small-dialog { + animation: modal-in-mobile 0.4s; + } + + @keyframes modal-in-mobile { + from { + transform: translateY(200px); + opacity: 0; + } + 30% { + opacity: 1; + } + 50% { + transform: translateY(-5px); + } + 100% { + transform: translateY(0px); + } + } } </style>