116 lines
2.8 KiB
Svelte
116 lines
2.8 KiB
Svelte
<script>
|
|
import { fly } from "svelte/transition";
|
|
|
|
export let alerts = [];
|
|
$: uniqueAlerts = [...new Set(alerts)];
|
|
|
|
let displayAlerts = false;
|
|
|
|
async function alertsToggle() {
|
|
displayAlerts = !displayAlerts
|
|
}
|
|
|
|
function numberAsWord(number) {
|
|
const words = ['zero', 'one', 'two','three','four','five','six','seven','eight'];
|
|
let word = words[number];
|
|
if (word) {
|
|
return word;
|
|
}
|
|
return number;
|
|
}
|
|
</script>
|
|
|
|
<div id="block"><!--Prevent content slipping underneath the bar--></div>
|
|
<div id="bar" on:click={alertsToggle} on:keypress={alertsToggle}>
|
|
<img src="/images/navigation/alert.svg" alt="">
|
|
{#if uniqueAlerts.length == 1}
|
|
<p id="bartext">There is one active alert</p>
|
|
{:else if uniqueAlerts.length > 1}
|
|
<p id="bartext">There are {numberAsWord(uniqueAlerts.length)} active alerts</p>
|
|
{:else}
|
|
<p id="bartext">There are no active alerts</p>
|
|
{/if}
|
|
<p id="arrow" class:displayAlerts>V</p>
|
|
</div>
|
|
{#if displayAlerts}
|
|
<div id="alerts" in:fly={{ y:-200, duration: 500}} out:fly={{ y: -200, duration: 800 }}>
|
|
{#each uniqueAlerts as msg}
|
|
<p class="alert">{@html msg}</p>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
#block {
|
|
height: 40px;
|
|
}
|
|
#bar {
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: var(--main-alert-color);
|
|
opacity: 1;
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 50px;
|
|
left: 0px;
|
|
z-index: 10;
|
|
}
|
|
img {
|
|
height: 25px;
|
|
width: 25px;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#bartext {
|
|
color: white;
|
|
margin: auto;
|
|
font-weight: 600;
|
|
margin-top: 8px;
|
|
margin-bottom: 0px;
|
|
padding: 0px;
|
|
}
|
|
#arrow{
|
|
color: white;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-weight: 900;
|
|
position: absolute;
|
|
margin-top: 0;
|
|
right: 15px;
|
|
top: 11px;
|
|
border: none;
|
|
background-color: transparent;
|
|
transition-duration: 500ms;
|
|
transition-delay: 00ms;
|
|
}
|
|
#arrow:focus {
|
|
background-color: transparent;
|
|
}
|
|
#alerts {
|
|
position: fixed;
|
|
background-color: var(--main-alert-color);
|
|
opacity: 0.9;
|
|
width: 100%;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
overflow-x: clip;
|
|
left: 0;
|
|
top: 89px;
|
|
}
|
|
.alert {
|
|
color: white;
|
|
text-align: center;
|
|
width: 80%;
|
|
margin:auto;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
}
|
|
.displayAlerts {
|
|
transition-duration: 500ms;
|
|
transition-delay: 400ms;
|
|
transform: rotate(180deg);
|
|
}
|
|
</style> |