Add toast

This commit is contained in:
Alessio Davoli 2023-07-22 19:50:42 +02:00
parent 9437316feb
commit 0a2f580f30

View file

@ -0,0 +1,46 @@
<script>
import { onDestroy, onMount } from 'svelte';
export let message = "L'applicazione è pronta per funzionare offline!";
let show = false;
let nodeRef;
onMount(() => {
show = true;
setTimeout(() => {
show = false;
setTimeout(() => {
nodeRef.parentNode.removeChild(nodeRef);
}, 5000);
}, 5000);
});
onDestroy(() => {
show = false;
});
</script>
<div bind:this={nodeRef} id="toast" class:show>
<img src="/icons/checkmark.svg" alt="check" />
<div>{message}</div>
</div>
<style>
.show {
transform: translateY(0vh) !important;
}
#toast {
transform: translateY(10vh);
transition: transform ease 0.4s;
position: fixed;
height: 10vh;
display: flex;
bottom: 0;
z-index: 4;
left: 0;
width: 100%;
justify-content: center;
background-color: #f6ae04;
color: black;
place-items: center;
}
</style>