CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-03 21:10:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

me_message: Center first line with center of avatar.

Browse Source 
This commit also demonstrates how precise line-heights contribute
to a design: by matching the line-height on the avatar's grid area
to the dimensions of the square avatar image, it's possible to
center the first line of text (me-messages, in this case) with a
non-text element.
This commit is contained in:
Karl Stolley 2023-06-30 12:27:06 -05:00 committed by Tim Abbott
parent a0cf624eaa
commit 1cd587d24b
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/styles/message_row.css
View File

@ -242,6 +242,13 @@ $time_column_min_width: 50px; /* + padding */
". more . . . "
". reactions . . . ";
.message-avatar {
/* Set the line-height to match the height of the avatar image
to center me-messages within the baseline group. */
line-height: var(--message-box-avatar-height);
align-self: baseline;
}
.message_sender {
/* Don't display message sender as flexbox for me-messages. */
display: block;

12
web/styles/zulip.css
View File

@ -83,8 +83,10 @@ body {
--right-sidebar-width: 250px;
/*
Message box line-height.
Message box elements and values.
*/
--message-box-avatar-width: 35px;
--message-box-avatar-height: var(--message-box-avatar-width);
--message-box-line-height: 1.214;
/*
@ -1851,8 +1853,12 @@ div.focused_table {
.inline_profile_picture {
display: inline-block;
width: 35px;
height: 35px;
width: var(--message-box-avatar-width);
height: var(--message-box-avatar-height);
/* Don't inherit the line-height from message-avatar;
this preserves the dimensions and rounded corners
on the image itself. */
line-height: 1;
margin-right: 11px;
vertical-align: top;
border-radius: 4px;