partey_workadventure/front/src/Components/UI/ErrorDialog.svelte

57 lines
1.3 KiB
Svelte
Raw Normal View History

<script lang="ts">
import { errorStore, hasClosableMessagesInErrorStore } from "../../Stores/ErrorStore";
2022-01-21 17:06:03 +01:00
import LL from "../../i18n/i18n-svelte";
2021-12-06 16:12:37 +01:00
function close(): boolean {
errorStore.clearClosableMessages();
2021-12-06 16:12:37 +01:00
return false;
}
</script>
<div class="error-div nes-container is-dark is-rounded" open>
2022-01-21 17:06:03 +01:00
<p class="nes-text is-error title">{$LL.error.error()}</p>
<div class="body">
2021-12-06 16:12:37 +01:00
{#each $errorStore as error}
<p>{error.message}</p>
2021-12-06 16:12:37 +01:00
{/each}
</div>
{#if $hasClosableMessagesInErrorStore}
<div class="button-bar">
<button class="nes-btn is-error" on:click={close}>Close</button>
</div>
{/if}
</div>
<style lang="scss">
div.error-div {
2021-12-06 16:12:37 +01:00
pointer-events: auto;
2022-01-05 10:27:40 +01:00
margin-top: 4%;
2021-12-06 16:12:37 +01:00
margin-right: auto;
margin-left: auto;
2022-01-05 10:27:40 +01:00
left: 0;
right: 0;
position: absolute;
2021-12-06 16:12:37 +01:00
width: max-content;
max-width: 80vw;
2022-01-05 10:27:40 +01:00
z-index: 230;
height: auto !important;
background-clip: padding-box;
2021-12-06 16:12:37 +01:00
.button-bar {
text-align: center;
}
2021-12-06 16:12:37 +01:00
.body {
max-height: 50vh;
}
2021-12-06 16:12:37 +01:00
p {
font-family: "Press Start 2P";
2021-12-06 16:12:37 +01:00
&.title {
text-align: center;
}
}
}
</style>