Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

message_grid: Use baseline groups to align EDITED, time, etc.

This commit is contained in:
Karl Stolley 2023-06-13 11:12:48 -05:00 committed by Tim Abbott
parent 93dba7f381
commit fad4429712
1 changed files with 6 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/styles/message_row.css
View File

@ -122,7 +122,7 @@ $time_column_max_width: 150px;
.messagebox .messagebox-content { .messagebox .messagebox-content {
display: grid; display: grid;
align-items: start; align-items: baseline;
padding-left: 10px; padding-left: 10px;
grid-template: grid-template:
25px repeat(3, auto) / 25px repeat(3, auto) /
@ -143,7 +143,6 @@ $time_column_max_width: 150px;
.message_controls { .message_controls {
grid-area: controls; grid-area: controls;
line-height: 1;
justify-self: end; justify-self: end;
padding: 0; padding: 0;
@ -160,12 +159,9 @@ $time_column_max_width: 150px;
.message_edit_notice { .message_edit_notice {
grid-area: edited; grid-area: edited;
position: relative;
top: $distance_of_text_elements_from_message_box_top;
} }
.message_time { .message_time {
line-height: 1;
justify-self: end; justify-self: end;
padding-right: 5px; padding-right: 5px;
min-width: $time_column_min_width; min-width: $time_column_min_width;
@ -240,9 +236,6 @@ $time_column_max_width: 150px;
} }
.message_time { .message_time {
align-self: center;
/* TODO: See if this margin is necessary in a grid context (KAS, 2023-06-012) */
margin-top: 1px;
grid-area: time; grid-area: time;
} }
@ -253,20 +246,16 @@ $time_column_max_width: 150px;
} }
.message_edit_notice { .message_edit_notice {
align-self: center; /* When the edit notice is inline, as on edited me-messages,
top: 2px; the inline-block and accompanying vertical-align styles will
apply */
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: baseline;
line-height: 14px;
/* A bit of margin here helps these not look associated with the name. */ /* A bit of margin here helps these not look associated with the name. */
margin-left: 4px; margin-left: 4px;
position: static;
padding: 0;
width: auto;
} }
.message_controls { .message_controls {
align-self: center;
grid-area: controls; grid-area: controls;
} }
@ -317,11 +306,6 @@ $time_column_max_width: 150px;
display: inline; display: inline;
margin: 0; margin: 0;
margin-top: 13px; margin-top: 13px;
.message_edit_notice {
position: relative;
top: -1px;
}
} }
} }
@ -339,6 +323,7 @@ $time_column_max_width: 150px;
from start and end vertically in all languages. */ from start and end vertically in all languages. */
line-height: normal; line-height: normal;
outline: none; outline: none;
align-self: baseline;
} }
} }