bloodwiing/EchoForum
bloodwiing/EchoForum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design: Hidden scrolling for Toasts

Browse Source
This commit is contained in:
Donatas Kirda 2024-05-21 17:19:31 +03:00
parent ffbe9aabd7
commit 1104012abb
Signed by: bloodwiing
GPG Key ID: 63020D8D3F4A164F
1 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/comp/toast/toastmanager.svelte
View File

@ -10,25 +10,40 @@
<style lang="scss"> <style lang="scss">
.toasts { .toasts {
display: flex;
flex-flow: column nowrap;
align-items: end;
justify-content: end;
top: calc(100dvh - 16px); top: calc(100dvh - 16px);
transform: translateY(-100%); transform: translateY(-100%);
width: max-content; width: max-content;
right: 16px; right: 16px;
gap: 16px; overflow-y: scroll;
overflow: hidden; overflow-y: -moz-scrollbars-none;
overflow-x: hidden;
scrollbar-width: none; /* Firefox */
padding: 2px; padding: 2px;
position: fixed; position: fixed;
max-height: calc(100dvh - 32px);
z-index: 999; z-index: 999;
&::-webkit-scrollbar {
display: none;
}
}
.list {
display: flex;
flex-flow: column nowrap;
align-items: end;
justify-content: end;
width: max-content;
gap: 16px;
height: max-content;
} }
</style> </style>
<div role="none" class="toasts" on:mouseenter={() => {expand = true;}} on:mouseleave={() => {expand = false;}}> <div role="none" class="toasts" on:mouseenter={() => {expand = true;}} on:mouseleave={() => {expand = false;}}>
<div class="list">
{#each $toasts as toast (toast.id)} {#each $toasts as toast (toast.id)}
<Toast id={toast.id} toast={toast} expand={expand}></Toast> <Toast id={toast.id} toast={toast} expand={expand}></Toast>
{/each} {/each}
</div>
</div> </div>