From dc04b0e17199afbb3732c23088aef668b7bdae59 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Sun, 21 May 2023 18:52:46 +0000 Subject: [PATCH] navbar_alerts: Adjust app based on navbar height. --- templates/zerver/app/index.html | 1 - web/src/navbar_alerts.js | 8 +++--- web/src/resize.js | 18 ++----------- web/styles/recent_topics.css | 1 - web/styles/zulip.css | 48 ++++++++++++++++----------------- 5 files changed, 31 insertions(+), 45 deletions(-) diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index 8118c6e256..709dad8c4e 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -104,7 +104,6 @@ text-decoration: underline; } - {% endblock %} {% block content %} diff --git a/web/src/navbar_alerts.js b/web/src/navbar_alerts.js index 5ee5db0e41..4aa9e088a4 100644 --- a/web/src/navbar_alerts.js +++ b/web/src/navbar_alerts.js @@ -23,9 +23,11 @@ import * as util from "./util"; /* This is called by resize.js, and thus indirectly when we trigger * resize events in the logic below. */ export function resize_app() { - const navbar_alerts_wrapper_height = $("#navbar_alerts_wrapper").height(); - $("body > .app").height("calc(100% - " + navbar_alerts_wrapper_height + "px)"); - $(".recent_topics_container").height("calc(100vh - " + navbar_alerts_wrapper_height + "px)"); + const navbar_alerts_height = $("#navbar_alerts_wrapper").height(); + document.documentElement.style.setProperty( + "--navbar-alerts-wrapper-height", + navbar_alerts_height + "px", + ); // If the compose-box is in expanded state, // reset its height as well. diff --git a/web/src/resize.js b/web/src/resize.js index d5dba39bd9..abf9b53d65 100644 --- a/web/src/resize.js +++ b/web/src/resize.js @@ -14,16 +14,13 @@ import * as util from "./util"; function get_new_heights() { const res = {}; const viewport_height = message_viewport.height(); - const top_navbar_height = $("#top_navbar").safeOuterHeight(true); const right_sidebar_shortcuts_height = $(".right-sidebar-shortcuts").safeOuterHeight(true) || 0; res.bottom_whitespace_height = viewport_height * 0.4; - res.main_div_min_height = viewport_height - top_navbar_height; - res.stream_filters_max_height = viewport_height - - Number.parseInt($("#left-sidebar").css("marginTop"), 10) - + Number.parseInt($("#left-sidebar").css("paddingTop"), 10) - Number.parseInt($(".narrows_panel").css("marginTop"), 10) - Number.parseInt($(".narrows_panel").css("marginBottom"), 10) - $("#global_filters").safeOuterHeight(true) - @@ -36,7 +33,7 @@ function get_new_heights() { const usable_height = viewport_height - - Number.parseInt($("#right-sidebar").css("marginTop"), 10) - + Number.parseInt($("#right-sidebar").css("paddingTop"), 10) - $("#userlist-header").safeOuterHeight(true) - $("#user_search_section").safeOuterHeight(true) - right_sidebar_shortcuts_height; @@ -145,19 +142,8 @@ export function resize_sidebars() { return h; } -export function reposition_message_header() { - // Since `navbar_alerts_wrapper`'s height can vary based on text / language, we - // need to adjust at what `top` position do `message-header` becomes `sticky`. - // Best way to do this is via adding custom CSS to the DOM instead of running endless - // javascript queries to find and update them on various re-renders. - const navbar_fixed_height = $("#navbar-fixed-container").safeOuterHeight(true); - const style = document.querySelector("#sticky_message_header_styles"); - style.textContent = `.message_list .message_header { top: ${navbar_fixed_height}px !important; }`; -} - export function resize_page_components() { navbar_alerts.resize_app(); - reposition_message_header(); const h = resize_sidebars(); resize_bottom_whitespace(h); } diff --git a/web/styles/recent_topics.css b/web/styles/recent_topics.css index 77824f2c96..f68ecf4022 100644 --- a/web/styles/recent_topics.css +++ b/web/styles/recent_topics.css @@ -16,7 +16,6 @@ border-color: hsl(0deg 0% 88%); border-width: 0 1px; border-radius: 0; - margin-top: 40px; /* To make the table span full height * when rows don't reach bottom of the * window. This makes the border span diff --git a/web/styles/zulip.css b/web/styles/zulip.css index c5c53f1585..71f428e6ba 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -44,6 +44,15 @@ body { --header-height: 30px; } + /* + Since #navbar_alerts_wrapper can take variable height depending upon + window width / language, we sync its height in navbar_alerts.js + */ + --navbar-alerts-wrapper-height: 0px; + --navbar-fixed-height: calc( + var(--header-height) + var(--navbar-alerts-wrapper-height) + ); + /* We have a 10px gutter below the header, which often needs to be respected by both @@ -56,7 +65,6 @@ body { Our sidebars (and anything that top-align with them) go beneath the header. */ - --sidebar-top: calc(var(--header-height) + var(--header-padding-bottom)); --left-sidebar-collapse-widget-gutter: 10px; --left-sidebar-width: 270px; --right-sidebar-width: 250px; @@ -490,6 +498,10 @@ p.n-margin { } } +.recent_topics_container #recent_topics_table { + margin-top: var(--navbar-fixed-height); +} + .app { width: 100%; height: 100%; @@ -584,6 +596,14 @@ p.n-margin { top: 0; } +#message_feed_container, +.column-left .left-sidebar, +.column-right .right-sidebar { + padding-top: calc( + var(--navbar-fixed-height) + var(--header-padding-bottom) + ); +} + .app-main { height: 100%; min-height: 100%; @@ -591,7 +611,6 @@ p.n-margin { .column-left .left-sidebar, .column-right .right-sidebar { position: fixed; - margin-top: var(--sidebar-top); z-index: 100; } @@ -1272,7 +1291,7 @@ td.pointer { .message_header { position: sticky; - top: var(--header-height); + top: var(--navbar-fixed-height); /* Needs to be higher than the z-index of date_row. */ z-index: 4; box-shadow: 0 -1px 0 0 var(--color-background); @@ -2670,10 +2689,6 @@ select.invite-as { margin-left: -15px; } -#message_feed_container { - padding-top: var(--sidebar-top); -} - .screen { position: absolute; left: 0; @@ -2809,12 +2824,8 @@ select.invite-as { .right-sidebar { box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%); border-left: 1px solid hsl(0deg 0% 87%); - - /* We use both margin and padding to - hide little artifacts from showing up in - the gutter below the navbar. */ - margin-top: var(--header-height); - padding: var(--header-padding-bottom) 15px 0 15px; + padding-right: 15px; + padding-left: 15px; height: 100%; right: 0; background-color: var(--color-background); @@ -2872,13 +2883,6 @@ select.invite-as { background-color: var(--color-background); box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%); border-right: 1px solid hsl(0deg 0% 87%); - - /* We use both margin and padding to - hide little artifacts from showing up in - the gutter below the navbar. */ - margin-top: var(--header-height); - padding-top: var(--header-padding-bottom); - height: 100%; padding-left: 10px; width: var(--left-sidebar-width); @@ -2991,10 +2995,6 @@ select.invite-as { border: none !important; } - #floating_recipient_bar { - top: var(--sidebar-top); - } - .message_content { padding-right: 50px; }