mirror of
https://github.com/zulip/zulip.git
synced 2025-11-07 15:33:30 +00:00
243db9a22f
Apparently, while b38ae6e0ed was correct
for the default Zulip UI, it was not correct for the fluid width case,
where we did actually want to override the 1400px width rule for the
non-fixed `.app-main` element.
The right fix here is to add an additional CSS rule tweak to our
scrollbar logic. This has been carefully tested with both initial
setting states as well as toggling the state.
95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
|
|
var scroll_bar = (function () {
|
|
|
|
var exports = {};
|
|
|
|
// 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() {
|
|
var outer = document.createElement("div");
|
|
outer.style.visibility = "hidden";
|
|
outer.style.width = "100px";
|
|
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
|
|
|
|
document.body.appendChild(outer);
|
|
|
|
var widthNoScroll = outer.offsetWidth;
|
|
// force scrollbars
|
|
outer.style.overflow = "scroll";
|
|
|
|
// add innerdiv
|
|
var inner = document.createElement("div");
|
|
inner.style.width = "100%";
|
|
outer.appendChild(inner);
|
|
|
|
var widthWithScroll = inner.offsetWidth;
|
|
|
|
// remove divs
|
|
outer.parentNode.removeChild(outer);
|
|
|
|
return widthNoScroll - widthWithScroll;
|
|
}
|
|
|
|
var sbWidth;
|
|
|
|
exports.initialize = function () {
|
|
// 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", 250 + sbWidth + "px");
|
|
|
|
$(".fixed-app").css("left", "-" + sbWidth + "px");
|
|
$(".fixed-app .column-middle").css("margin-left", 250 + 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": 250 + sbWidth + "px"});
|
|
$('#keyboard-icon').css({right: sbWidth + 13 + "px"});
|
|
|
|
$("head").append("<style> @media (max-width: 1165px) { .compose-content, .header-main .column-middle { margin-right: " + (7 + sbWidth) + "px !important; } } " +
|
|
"@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " + (7 + sbWidth) + "px !important; } } " +
|
|
"</style>");
|
|
|
|
exports.set_layout_width();
|
|
}
|
|
ui.set_up_scrollbar($("#stream-filters-container"));
|
|
};
|
|
|
|
exports.set_layout_width = function () {
|
|
// 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");
|
|
}
|
|
};
|
|
|
|
return exports;
|
|
}());
|
|
if (typeof module !== 'undefined') {
|
|
module.exports = scroll_bar;
|
|
}
|
|
|
|
window.scroll_bar = scroll_bar;
|