paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-19 14:08:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_grid: Use a 'dead' column to space controls and time.

Browse Source 
This commit adds a 3px column between the `controls` and `time`
areas, which keeps the controls from crowding the time for
languages with longer time markers.

To make the layout easier to reason about, this includes the
minimum width for the time column as part of the message-box
grid definition.
This commit is contained in:
Karl Stolley
2023-07-10 09:45:41 -05:00
committed by Tim Abbott
parent 42919ed2e1
commit ddaebb3255
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/styles/message_row.css
View File

@@ -10,12 +10,10 @@ $message_box_margin: 3px;
But in some locales, the time encoding is wider, (especially where But in some locales, the time encoding is wider, (especially where
the "PM" abbreviation is longer), so we allow the column to be the "PM" abbreviation is longer), so we allow the column to be
wider for individual messages if required, to prevent ugly wider for individual messages if required, up to `max-content`, to
line-wrapping. In practice, it's unlikely we'll see anything wider prevent ugly line-wrapping. In practice, it's unlikely we'll see
than 60px; so the precise value of $time_column_max_width should be anything wider than 60px. */
unimportant. */
$time_column_min_width: 50px; /* + padding */ $time_column_min_width: 50px; /* + padding */
$time_column_max_width: 150px;
.message_row { .message_row {
display: grid; display: grid;
@@ -126,18 +124,22 @@ $time_column_max_width: 150px;
padding-left: 10px; padding-left: 10px;
grid-template: grid-template:
25px repeat(3, auto) / 25px repeat(3, auto) /
$avatar_column_width auto 55px fit-content($time_column_max_width); $avatar_column_width auto 55px 3px minmax(
$time_column_min_width,
max-content
);
/* Named grid areas provide flexibility for positioning grid items /* Named grid areas provide flexibility for positioning grid items
reliably, even if the row or column definitions of the grid change. */ reliably, even if the row or column definitions of the grid change. */
grid-template-areas: grid-template-areas:
"edited message controls time" "edited message controls . time"
". message . . " ". message . . . "
". more . . " ". more . . . "
". reactions . . "; ". reactions . . . ";
@media (width < $sm_min) { @media (width < $sm_min) {
grid-template-columns: $avatar_column_width auto max-content fit-content( grid-template-columns: $avatar_column_width auto max-content 3px minmax(
$time_column_max_width $time_column_min_width,
max-content
); );
} }
@@ -164,7 +166,6 @@ $time_column_max_width: 150px;
.message_time { .message_time {
justify-self: end; justify-self: end;
padding-right: 5px; padding-right: 5px;
min-width: $time_column_min_width;
text-align: end; text-align: end;
grid-area: time; grid-area: time;
@@ -223,10 +224,10 @@ $time_column_max_width: 150px;
&.include-sender { &.include-sender {
.messagebox .messagebox-content { .messagebox .messagebox-content {
grid-template-areas: grid-template-areas:
"avatar sender controls time" "avatar sender controls . time"
"avatar message . . " "avatar message . . . "
". more . . " ". more . . . "
". reactions . . "; ". reactions . . . ";
.message_edit { .message_edit {
/* No top margin when there's a sender row */ /* No top margin when there's a sender row */
@@ -235,10 +236,10 @@ $time_column_max_width: 150px;
&.is-me-message { &.is-me-message {
grid-template-areas: grid-template-areas:
"avatar sender controls time" "avatar sender controls . time"
"avatar sender . . " "avatar sender . . . "
". more . . " ". more . . . "
". reactions . . "; ". reactions . . . ";
.message_sender { .message_sender {
/* Don't display message sender as flexbox for me-messages. */ /* Don't display message sender as flexbox for me-messages. */