emoji: Display status emoji as flexboxes in DM list.

This commit is contained in:
Karl Stolley 2023-09-18 12:13:51 -05:00 committed by Tim Abbott
parent b147440c43
commit 5df7330d2c
2 changed files with 17 additions and 2 deletions

View File

@ -573,6 +573,15 @@ li.top_left_scheduled_messages {
.conversation-partners { .conversation-partners {
line-height: 1.25; line-height: 1.25;
display: flex;
width: 100%;
overflow: hidden;
}
.conversation-partners .status-emoji {
/* Prevent status emoji from colliding
with unread counts. */
margin-right: 3px;
} }
.top_left_all_messages i.fa-align-left { .top_left_all_messages i.fa-align-left {
@ -598,7 +607,7 @@ li.top_left_scheduled_messages {
height: 20px; height: 20px;
} }
.conversation-partners, .conversation-partners-list,
.topic-name, .topic-name,
.stream-name { .stream-name {
flex: auto; flex: auto;
@ -610,6 +619,12 @@ li.top_left_scheduled_messages {
padding: 1px $before_unread_count_padding 1px 0; padding: 1px $before_unread_count_padding 1px 0;
} }
.conversation-partners-list {
/* Don't allow growth, so that status emoji
remain adjacent the username. */
flex: 0 1 auto;
}
.topic-name { .topic-name {
/* TODO: We should figure out how to remove this without changing the spacing */ /* TODO: We should figure out how to remove this without changing the spacing */
line-height: 1.1; line-height: 1.1;

View File

@ -12,7 +12,7 @@
</div> </div>
<a href='{{url}}' class="conversation-partners"> <a href='{{url}}' class="conversation-partners">
{{recipients}} <span class="conversation-partners-list">{{recipients}}</span>
{{> status_emoji status_emoji_info}} {{> status_emoji status_emoji_info}}
</a> </a>
<span class="unread_count {{#if is_zero}}zero_count{{/if}}"> <span class="unread_count {{#if is_zero}}zero_count{{/if}}">