diff --git a/less/style.less b/less/style.less index 7caf276..a0b9ca0 100644 --- a/less/style.less +++ b/less/style.less @@ -18,6 +18,10 @@ body { min-height: 100%; } +#panel { + padding-top: var(--panel-offset); +} + @media (max-width: @screen-xs-max) { .slideout-panel { min-height: 100vh; diff --git a/less/topic.less b/less/topic.less index bf61f38..19a5d1e 100644 --- a/less/topic.less +++ b/less/topic.less @@ -41,7 +41,7 @@ } .topic-header { position: sticky; - top: @navbar-height; + top: calc(var(--panel-offset) + @navbar-height); background-color: @body-bg; z-index: @zindex-navbar; margin-left: -15px; @@ -50,6 +50,12 @@ padding-right: 15px; } + @media (max-width: @screen-md-max) { + .topic-header { + top: calc(var(--panel-offset) + @navbar-height - 70px); + } + } + .topic-info { border-bottom: 1px solid @post-border-color; margin-bottom: 10px; diff --git a/public/persona.js b/public/persona.js index 172c01a..20d0bba 100644 --- a/public/persona.js +++ b/public/persona.js @@ -7,10 +7,10 @@ $(document).ready(function () { setupEditedByIcon(); setupQuickReply(); configureNavbarHiding(); - fixHeaderPadding(); + updatePanelOffset(); $(window).on('resize', utils.debounce(configureNavbarHiding, 200)); - $(window).on('resize', fixHeaderPadding); + $(window).on('resize', updatePanelOffset); $(window).on('action:app.loggedIn', function () { setupMobileMenu(); @@ -21,25 +21,24 @@ $(document).ready(function () { setupMobileMenu(); }); - function fixHeaderPadding() { + function updatePanelOffset() { var env = utils.findBootstrapEnvironment(); const headerEl = document.getElementById('header-menu'); - const panelEl = document.getElementById('panel'); - if (!headerEl || !panelEl) { + if (!headerEl) { return; } const headerRect = headerEl.getBoundingClientRect(); const headerStyle = window.getComputedStyle(headerEl); - let paddingTop = headerRect.y + headerRect.height + (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0); + let offset = headerRect.y + headerRect.height + (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0); // body element itself introduces a hardcoded 70px padding on desktop resolution if (env === 'lg') { - paddingTop -= 70; + offset -= 70; } - panelEl.style.paddingTop = `${paddingTop}px`; + document.documentElement.style.setProperty('--panel-offset', `${offset}px`); } var lastBSEnv = '';