add subtopic indent, use position fixed to help users scroll on the s…

…idebar (#642) * add subtopic indent, use position fixed to help users scroll on the sidebar * fix lint
datacommonsorg · Oct 23, 2020 · 9252c2a · 9252c2a
1 parent 099e913
commit 9252c2a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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";
   }
 }