Add toast
This commit is contained in:
parent
9437316feb
commit
0a2f580f30
1 changed files with 46 additions and 0 deletions
46
frontend/src/lib/components/Toast.svelte
Normal file
46
frontend/src/lib/components/Toast.svelte
Normal 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>
|
Loading…
Reference in a new issue