hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

improve time separator

Browse source
This commit is contained in:
hippoz 2022-09-20 22:50:18 +03:00
parent cb0a7330b6
commit 15cdf8033b
Signed by: hippoz
GPG key ID: 7C52899193467641
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/public/global.css
View file

@ -148,7 +148,7 @@ body {
left: 0;
right: 0;
bottom: 0;
z-index: 0;
z-index: 15;
background-color: rgba(0, 0, 0, 0.4);
}

23
frontend/src/components/Messages.svelte
View file

@ -88,20 +88,35 @@
}
.time-separator {
position: relative;
top: auto;
left: auto;
height: 0;
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--radius-norm);
padding: var(--space-sm);
border-top: thin solid var(--background-color-3);
padding: 0;
margin: var(--space-md);
background-color: var(--background-color-2);
margin-bottom: var(--space-lg);
margin-top: var(--space-lg);
}
.time-separator-text {
margin: 0;
padding: 0;
background-color: var(--background-color-1);
color: var(--foreground-color-2);
font-size: 0.75em;
}
</style>
<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
{#each $messages as message (message.id)}
{#if message._aboveDateMarker}
<div class="time-separator">{ message._aboveDateMarker }</div>
<div class="time-separator">
<span class="time-separator-text">{ message._aboveDateMarker }</span>
</div>
{/if}
<Message message={message} />
{/each}