mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 05:53:43 +00:00
96 lines
3.4 KiB
JavaScript
96 lines
3.4 KiB
JavaScript
import $ from "jquery";
|
|
|
|
import {media_breakpoints} from "./css_variables";
|
|
import {page_params} from "./page_params";
|
|
|
|
// A few of our width properties in Zulip depend on the width of the
|
|
// browser scrollbar that is generated at the far right side of the
|
|
// page, which unfortunately varies depending on the browser and
|
|
// cannot be detected directly using CSS. As a result, we adjust a
|
|
// number of element widths based on the value detected here.
|
|
//
|
|
// From https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
|
|
function getScrollbarWidth() {
|
|
const outer = document.createElement("div");
|
|
outer.style.visibility = "hidden";
|
|
outer.style.width = "100px";
|
|
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
|
|
|
|
document.body.append(outer);
|
|
|
|
const widthNoScroll = outer.offsetWidth;
|
|
// force scrollbars
|
|
outer.style.overflow = "scroll";
|
|
|
|
// add innerdiv
|
|
const inner = document.createElement("div");
|
|
inner.style.width = "100%";
|
|
outer.append(inner);
|
|
|
|
const widthWithScroll = inner.offsetWidth;
|
|
|
|
// remove divs
|
|
outer.remove();
|
|
|
|
return widthNoScroll - widthWithScroll;
|
|
}
|
|
|
|
let sbWidth;
|
|
|
|
export function initialize() {
|
|
// Workaround for browsers with fixed scrollbars
|
|
sbWidth = getScrollbarWidth();
|
|
|
|
if (sbWidth > 0) {
|
|
$(".header").css("left", "-" + sbWidth + "px");
|
|
$(".header-main").css("left", sbWidth + "px");
|
|
$(".header-main .column-middle").css("margin-right", 7 + sbWidth + "px");
|
|
|
|
$(".fixed-app").css("left", "-" + sbWidth + "px");
|
|
$(".fixed-app .column-middle").css("margin-left", 7 + sbWidth + "px");
|
|
|
|
$(".column-right").css("right", sbWidth + "px");
|
|
$(".app-main .right-sidebar").css({
|
|
"margin-left": sbWidth + "px",
|
|
width: 250 - sbWidth + "px",
|
|
});
|
|
|
|
$("#compose").css("left", "-" + sbWidth + "px");
|
|
$(".compose-content").css({left: sbWidth + "px", "margin-right": 7 + sbWidth + "px"});
|
|
$("#keyboard-icon").css({"margin-right": sbWidth + "px"});
|
|
|
|
$("head").append(
|
|
"<style> @media (min-width: " +
|
|
media_breakpoints.xl_min +
|
|
") { .compose-content, .header-main .column-middle { margin-right: " +
|
|
(250 + sbWidth) +
|
|
"px !important; } } " +
|
|
"@media (min-width: " +
|
|
media_breakpoints.md_min +
|
|
") { .fixed-app .column-middle { margin-left: " +
|
|
(250 + sbWidth) +
|
|
"px !important; } } " +
|
|
"</style>",
|
|
);
|
|
}
|
|
set_layout_width();
|
|
}
|
|
|
|
export function set_layout_width() {
|
|
// This logic unfortunately leads to a flash of mispositioned
|
|
// content when reloading a Zulip browser window. More details
|
|
// are available in the comments on the max-width of 1400px in
|
|
// the .app-main CSS rules.
|
|
if (page_params.fluid_layout_width) {
|
|
$(".header-main").css("max-width", "inherit");
|
|
$(".app .app-main").css("max-width", "inherit");
|
|
$(".fixed-app .app-main").css("max-width", "inherit");
|
|
$("#compose-container").css("max-width", "inherit");
|
|
} else {
|
|
$(".header-main").css("max-width", 1400 + sbWidth + "px");
|
|
$(".app .app-main").css("max-width", 1400 + "px");
|
|
$(".fixed-app .app-main").css("max-width", 1400 + sbWidth + "px");
|
|
$("#compose-container").css("max-width", 1400 + sbWidth + "px");
|
|
}
|
|
}
|