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
No known key found for this signature in database
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

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

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