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

sidebars: Refactor to remove .default-sidebar-behaviour.

Browse Source 
Despite the comment in `ui_init.js`, this class is never in fact
removed, and appears only to add unnecessary complexity to certain
selectors, which are here cleaned up.
This commit is contained in:
Karl Stolley
2025-02-20 11:33:30 -06:00
committed by Tim Abbott
parent c9109ef736
commit 0ce20fb515
2 changed files with 69 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/ui_init.js
View File

@@ -298,13 +298,6 @@ export function initialize_kitchen_sink_stuff() {
$("body").addClass("more-dense-mode");
}
// To keep the specificity same for the CSS related to hiding the
// sidebars, we add the class to the body which is then later replaced
// by the class to hide right / left sidebar. We can take our time to do
// this since we are still showing the loading indicator screen and
// the rendered sidebars hasn't been displayed to the user yet.
$("body").addClass("default-sidebar-behaviour");
$(window).on("blur", () => {
$(document.body).addClass("window_blurred");
});

136
web/styles/zulip.css
View File

@@ -1482,35 +1482,33 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
}
@media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
.default-sidebar-behaviour {
&.spectator-view.default-sidebar-behaviour {
#navbar-middle {
/* = (width of button, square with header) * 3 (number of buttons) + 10px extra margin. */
margin-right: calc(var(--header-height) * 3 + 10px);
}
#help-menu,
#gear-menu {
position: relative;
right: var(--header-height);
}
.spectator-view {
#navbar-middle {
/* = (width of button, square with header) * 3 (number of buttons) + 10px extra margin. */
margin-right: calc(var(--header-height) * 3 + 10px);
}
&.spectator-view #top_navbar .column-right .spectator_login_buttons {
#help-menu,
#gear-menu {
position: relative;
right: var(--header-height);
}
#top_navbar .column-right .spectator_login_buttons {
display: none;
}
}
.header-main .column-right {
/* For a diminutive right column in the navbar,
allow the width to be that of the flexing
button elements. */
width: auto;
}
.header-main .column-right {
/* For a diminutive right column in the navbar,
allow the width to be that of the flexing
button elements. */
width: auto;
}
}
%hide-right-sidebar {
.app-main .column-right {
.column-right {
display: none;
&.expanded {
@@ -1544,7 +1542,9 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
}
.hide-right-sidebar {
@extend %hide-right-sidebar;
.app-main {
@extend %hide-right-sidebar;
}
&.fluid_layout_width {
#compose-content,
@@ -1559,7 +1559,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
}
%hide-left-sidebar {
.app-main .column-left {
.column-left {
display: none;
&.expanded {
@@ -1586,7 +1586,9 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
}
.hide-left-sidebar {
@extend %hide-left-sidebar;
.app-main {
@extend %hide-left-sidebar;
}
&.fluid_layout_width {
#compose-content,
@@ -1605,23 +1607,23 @@ body:not(.hide-left-sidebar) {
}
@media (width < $xl_min) {
.default-sidebar-behaviour {
.app-main {
@extend %hide-right-sidebar;
}
.app-main .column-middle {
margin-right: 7px;
}
.app-main .column-middle {
margin-right: 7px;
}
#navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: calc(var(--header-height) * 4 + 3px);
}
#navbar-middle {
/* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
margin-right: calc(var(--header-height) * 4 + 3px);
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-right: 7px;
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-right: 7px;
}
.hide-left-sidebar {
@@ -1649,46 +1651,46 @@ body:not(.hide-left-sidebar) {
}
@media (width < $md_min) {
.default-sidebar-behaviour {
.app-main {
@extend %hide-left-sidebar;
}
.header-main .column-left {
display: none;
}
.header-main .column-left {
display: none;
}
.app-main .column-middle {
margin-left: 7px;
margin-right: 7px;
}
.app-main .column-middle {
margin-left: 7px;
margin-right: 7px;
}
#navbar-middle {
margin-left: 0;
}
#navbar-middle {
margin-left: 0;
}
.app-main .column-middle .column-middle-inner {
margin-left: 0;
margin-right: 0;
}
.app-main .column-middle .column-middle-inner {
margin-left: 0;
margin-right: 0;
}
#streamlist-toggle {
display: block;
}
#streamlist-toggle {
display: block;
}
.top-navbar-container {
margin-left: 40px;
}
.top-navbar-container {
margin-left: 40px;
}
#feedback_container {
width: calc(90% - 30px);
left: 5%;
top: 5%;
}
#feedback_container {
width: calc(90% - 30px);
left: 5%;
top: 5%;
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-left: 7px;
}
#typing_notifications,
#scheduled_message_indicator,
#compose-content {
margin-left: 7px;
}
}