aboutsummaryrefslogtreecommitdiff
path: root/src_frontend/Components/Notifs/NotifsWrapper.svelte
blob: e68e2e2fd4488ea53bae2625e1f10c96e63049be (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
    import { notifs } from "../../stores/notifs";
    import Notif from "./Notif.svelte";
    export let position = "bottom-center";
    $: transitionType = position === "bottom-center" ? "fade" : "fly";
</script>

<style>
.notifications {
    position: absolute;
    z-index: 999;
}
.bottom-center {
    bottom: 20px;
    left: 5vw;
    width: 90vw;
}
.top-right {
    top: 20px;
    right: 20px;
}
</style>

<div class="notifications {position}">
{#each $notifs as notification (notification.id)}
    <Notif
    nid={notification.id}
    text={notification.text}
    title={notification.title}
    type={notification.type}
    {transitionType} />
{/each}
</div>