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

left_sidebar: Refactor nav rows for low-resolution screens.

This commit is contained in:
Karl Stolley 2024-07-02 11:08:23 -05:00 committed by Tim Abbott
parent 1140e8402b
commit 3cb4bb830a
1 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/styles/left_sidebar.css
View File

@ -587,9 +587,18 @@ li.active-sub-filter {
display: grid; display: grid;
grid-template-areas: "selected-home-view"; grid-template-areas: "selected-home-view";
line-height: var(--line-height-sidebar-row); line-height: var(--line-height-sidebar-row);
/* Explicitly ensure parity with the line-height
for the sake of low-resolution screens, whose
font-rendering and rounding may cause icons
to appear out of alignment. */
grid-auto-rows: var(--line-height-sidebar-row);
.left-sidebar-navigation-label-container { .left-sidebar-navigation-label-container {
.left-sidebar-navigation-label { .left-sidebar-navigation-label {
/* Again, for the sake of low-resolution screens,
we'll let the actual label take 1 as a line-height
value, and allow grid to handle the alignment. */
line-height: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -644,17 +653,6 @@ li.top_left_scheduled_messages {
} }
} }
.top_left_row {
/* The row grid for the outer .top_left_row
is chiefly for lefthand spacing and placing
the inner row content and vdots. */
grid-template-columns: 7px 0 minmax(0, 1fr) 0 30px 0;
.sidebar-menu-icon {
grid-area: ending-anchor-element;
}
}
.left-sidebar-navigation-label-container { .left-sidebar-navigation-label-container {
grid-area: row-content; grid-area: row-content;
/* The label container itself is also a grid, /* The label container itself is also a grid,
@ -731,6 +729,21 @@ li.top_left_scheduled_messages {
grid-template-areas: "starting-offset starting-anchor-element row-content markers-and-controls ending-anchor-element ending-offset"; grid-template-areas: "starting-offset starting-anchor-element row-content markers-and-controls ending-anchor-element ending-offset";
} }
.top_left_row {
/* We stretch the items on the overall
nav row, so there's no unclickable
gaps between nav rows. */
align-items: stretch;
/* The row grid for the outer .top_left_row
is chiefly for lefthand spacing and placing
the inner row content and vdots. */
grid-template-columns: 7px 0 minmax(0, 1fr) 0 30px 0;
.sidebar-menu-icon {
grid-area: ending-anchor-element;
}
}
#direct-messages-section-header, #direct-messages-section-header,
#streams_header, #streams_header,
#topics_header { #topics_header {
@ -974,6 +987,11 @@ li.top_left_scheduled_messages {
so it remains hidden otherwise. */ so it remains hidden otherwise. */
justify-content: center; justify-content: center;
text-align: center; text-align: center;
/* Ensure icons are vertically aligned, in
case they appear in a grid definition,
like the nav rows, that use a different
centering regime for the row. */
align-self: center;
/* Set the icon size, which will be inherited /* Set the icon size, which will be inherited
by .zulip-icon */ by .zulip-icon */
font-size: 17px; font-size: 17px;