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; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 0; z-index: 15;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
} }

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

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