Fixes:
- Overlay z-index set to 1000 - always on top - Alert bar is now clickable rather than containing a button
This commit is contained in:
parent
15d9843f06
commit
d763898d8d
@ -30,5 +30,6 @@ div {
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: var(--overlay-color);
|
background-color: var(--overlay-color);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
@ -21,7 +21,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="block"><!--Prevent content slipping underneath the bar--></div>
|
<div id="block"><!--Prevent content slipping underneath the bar--></div>
|
||||||
<div id="bar">
|
<div id="bar" on:click={alertsToggle} on:keypress={alertsToggle}>
|
||||||
<img src="/images/navigation/alert.svg" alt="">
|
<img src="/images/navigation/alert.svg" alt="">
|
||||||
{#if uniqueAlerts.length == 1}
|
{#if uniqueAlerts.length == 1}
|
||||||
<p id="bartext">There is one active alert</p>
|
<p id="bartext">There is one active alert</p>
|
||||||
@ -30,7 +30,7 @@
|
|||||||
{:else}
|
{:else}
|
||||||
<p id="bartext">There are no active alerts</p>
|
<p id="bartext">There are no active alerts</p>
|
||||||
{/if}
|
{/if}
|
||||||
<button id="arrow" class:displayAlerts on:click={alertsToggle}>V</button>
|
<p id="arrow" class:displayAlerts>V</p>
|
||||||
</div>
|
</div>
|
||||||
{#if displayAlerts}
|
{#if displayAlerts}
|
||||||
<div id="alerts" in:fly={{ y:-200, duration: 500}} out:fly={{ y: -200, duration: 800 }}>
|
<div id="alerts" in:fly={{ y:-200, duration: 500}} out:fly={{ y: -200, duration: 800 }}>
|
||||||
@ -77,11 +77,13 @@
|
|||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
margin-top: 0;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
top: 10px;
|
top: 11px;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
transition-duration: 500ms;
|
transition-duration: 500ms;
|
||||||
|
transition-delay: 00ms;
|
||||||
}
|
}
|
||||||
#arrow:focus {
|
#arrow:focus {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@ -108,6 +110,7 @@
|
|||||||
}
|
}
|
||||||
.displayAlerts {
|
.displayAlerts {
|
||||||
transition-duration: 500ms;
|
transition-duration: 500ms;
|
||||||
|
transition-delay: 400ms;
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue
Block a user