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

greatly improve message layout

Browse source
This commit is contained in:
hippoz 2022-10-30 21:44:46 +02:00
parent d7c986a001
commit 3ea2b81b01
Signed by: hippoz
GPG key ID: 7C52899193467641
1 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/components/Message.svelte
View file

@ -20,10 +20,10 @@
<style> <style>
.message { .message {
display: flex; display: flex;
justify-content: center;
align-items: flex-start; align-items: flex-start;
align-items: center;
overflow-x: hidden; overflow-x: hidden;
word-break: break-all; word-wrap: break-word;
padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-normplus); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-normplus);
} }
@ -65,6 +65,12 @@
margin-right: 0; margin-right: 0;
} }
.author-group {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.edit-message { .edit-message {
flex-shrink: 0; flex-shrink: 0;
float: right; float: right;
@ -87,12 +93,12 @@
user-select: none; user-select: none;
} }
.message.clumped .author { .message.clumped .author-group {
visibility: hidden; visibility: hidden;
} }
.message:hover .date, .message:hover .date,
.message.clumped:hover .author { .message.clumped:hover .author-group {
visibility: visible; visibility: visible;
} }
@ -118,16 +124,17 @@
margin-left: var(--space-xs); margin-left: var(--space-xs);
margin-right: var(--space-md); margin-right: var(--space-md);
cursor: default; cursor: default;
flex-shrink: 0;
} }
</style> </style>
<div class="message" class:clumped={ message._clumped } class:pinged={ message._mentions }> <div class="message" class:clumped={ message._clumped } class:pinged={ message._mentions }>
<span class="author" class:author-more={message._viaBadge}> <div class="author-group">
{ message._effectiveAuthor } <span class="author" class:author-more={message._viaBadge}>{ message._effectiveAuthor }</span>
</span>
{#if message._viaBadge} {#if message._viaBadge}
<span class="user-badge via-badge">via { message._viaBadge }</span> <span class="user-badge via-badge">via { message._viaBadge }</span>
{/if} {/if}
</div>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span> <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
<span class="date message-extra">{ message._createdAtTimeString }</span> <span class="date message-extra">{ message._createdAtTimeString }</span>