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

right_sidebar: Introduce the right sidebar with a narrower width.

Browse Source
This commit is contained in:
Karl Stolley
2025-03-03 12:23:35 -06:00
committed by Tim Abbott
parent e9ddd4797f
commit 17629c0f9c
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/styles/app_variables.css
View File

@@ -273,7 +273,9 @@
--right-column-collapsed-sidebar-width: 10.15em; --right-column-collapsed-sidebar-width: 10.15em;
/* 288px at 14px/1em */ /* 288px at 14px/1em */
--right-column-max-width: 20.57em; --right-column-max-width: 20.57em;
--right-column-width: clamp(10em, 50%, var(--right-column-max-width)); /* We open the right sidebar at xl_min at a size of 240px,
here expressed as precisely 20% of the viewport. */
--right-column-width: min(20%, var(--right-column-max-width));
--right-sidebar-width: calc( --right-sidebar-width: calc(
var(--right-column-width) - var(--right-sidebar-left-spacing) var(--right-column-width) - var(--right-sidebar-left-spacing)
); );

11
web/styles/zulip.css
View File

@@ -1554,6 +1554,14 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
display: none; display: none;
&.expanded { &.expanded {
/* In the extended state, we open the sidebar
to its maximum possible size (otherwise, it
would be unnecessarily too narrow). */
--right-column-width: var(--right-column-max-width);
--right-sidebar-width: calc(
var(--right-column-max-width) -
var(--right-sidebar-left-spacing)
);
display: block; display: block;
position: absolute; position: absolute;
float: none; float: none;
@@ -1567,9 +1575,8 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
.right-sidebar { .right-sidebar {
box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%); box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid var(--color-border-sidebar); border-left: 1px solid var(--color-border-sidebar);
padding-right: 15px;
padding-left: 15px;
height: 100%; height: 100%;
width: var(--right-sidebar-width);
right: 0; right: 0;
background-color: var(--color-background); background-color: var(--color-background);
} }