diff --git a/static/css/place/place.scss b/static/css/place/place.scss index 6cb0db1a3..4b76bfc70 100644 --- a/static/css/place/place.scss +++ b/static/css/place/place.scss @@ -81,7 +81,8 @@ $chart-border: 0.5px solid #dee2e6; #topics .nav-item .nav-item a { font-weight: 300; - padding: 0.25rem 0; + padding: 0.25rem 0 .25rem .5rem; + font-size: .8rem; } #topics a.active { @@ -146,7 +147,6 @@ $chart-border: 0.5px solid #dee2e6; .subtopic .row .col { padding: 0.5rem; - margin-bottom: calc(.7rem + 10px); // height of feedback link + padding } .btn-dc { @@ -254,6 +254,13 @@ $chart-border: 0.5px solid #dee2e6; position: relative; } +#sidebar-region.fixed { + position: fixed; + height: 100vh; + overflow-y: scroll; + top: 0; +} + #child-place-title { font-weight: bold; font-size: 14px; diff --git a/static/js/place/place.ts b/static/js/place/place.ts index d0eb0452c..e0cf13b16 100644 --- a/static/js/place/place.ts +++ b/static/js/place/place.ts @@ -64,9 +64,13 @@ function updatePageLayoutState(): void { function maybeToggleFixedSidebar(): void { if (window.innerWidth < Y_SCROLL_WINDOW_BREAKPOINT) { document.removeEventListener("scroll", adjustMenuPosition); + document.getElementById("sidebar-region").classList.remove("fixed"); return; } document.addEventListener("scroll", adjustMenuPosition); + document.getElementById("sidebar-region").style.width = + document.getElementById("sidebar-top-spacer").offsetWidth + "px"; + adjustMenuPosition(); } /** @@ -78,10 +82,16 @@ function adjustMenuPosition(): void { const calcTop = window.scrollY - yScrollLimit - Y_SCROLL_MARGIN; if (calcTop > sidebarTopMax) { topicsEl.style.top = sidebarTopMax + "px"; + topicsEl.classList.remove("fixed"); return; } - topicsEl.style.top = calcTop + "px"; + topicsEl.classList.add("fixed"); + if (topicsEl.style.top != "0") { + topicsEl.style.top = "0"; + topicsEl.scrollTop = 0; + } } else { + topicsEl.classList.remove("fixed"); topicsEl.style.top = "0"; } }