Fix alert view

This commit is contained in:
SebClem 2024-07-12 17:07:00 +02:00
parent 049beb53b8
commit 2c03791db5
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50

View File

@ -1,6 +1,7 @@
<template> <template>
<v-fade-transition> <v-fade-transition>
<div id="alertContainer" v-if="alertVisible"> <div id="parent" v-if="alertVisible">
<div id="alertContainer">
<v-slide-x-transition group tag="div"> <v-slide-x-transition group tag="div">
<v-alert <v-alert
v-for="alert of alertList" v-for="alert of alertList"
@ -31,6 +32,7 @@
</v-alert> </v-alert>
</v-slide-x-transition> </v-slide-x-transition>
</div> </div>
</div>
</v-fade-transition> </v-fade-transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -45,11 +47,17 @@ const { alertList } = storeToRefs(alertStore);
const alertVisible = computed(() => alertList.value.length > 0); const alertVisible = computed(() => alertList.value.length > 0);
</script> </script>
<style> <style>
#alertContainer { #parent {
position: absolute; position: absolute;
top: 70px; top: 70px;
right: 20px; right: 20px;
z-index: 99999; z-index: 99999;
height: 100vh;
#alertContainer {
position: sticky;
top: 80px;
right: 20px;
}
} }
</style> </style>
@/store/alert @/store/alert