Merge pull request #2 from AshvinKooner/master

css/main.css

@@ -6,7 +6,7 @@ body {
 }
 
 .page-content {
-  margin: 6rem auto 2rem auto;
+  margin: 6rem auto 0rem auto;
   width: 95%;
 }
 
@@ -243,10 +243,16 @@ p {
 
 .research-section {
   scroll-margin-top: 4.3rem;
+  padding-bottom: 2rem;
 }
 
-#monetary_policy {
-  scroll-margin-top: 5.8rem;
+.research-section h2 {
+  margin: 0rem;
+  padding: 2rem 0rem 1rem;
+}
+
+.research-section hr {
+  margin: 0rem;
 }
 
 footer {

research.html

@@ -7,11 +7,11 @@
 <nav class="research-nav">
   <div>
     <ul>
-      <li onclick="onResearchLinkClick()" class="active" data-ref="monetary_policy"><a href="#monetary_policy">Monetary Policy</a></li
-      ><li onclick="onResearchLinkClick()" data-ref="io"><a href="#io">Org Econ/Firms</a></li
-      ><li onclick="onResearchLinkClick()" data-ref="econ_measurement"><a href="#econ_measurement">Consumption</a></li
-      ><li onclick="onResearchLinkClick()" data-ref="stats"><a href="#stats">Econometrics</a></li
-      ><li onclick="onResearchLinkClick()" data-ref="review"><a href="#review">Reviews</a></li>
+      <li onclick="onResearchLinkClick(this)" class="active" data-ref="monetary_policy"><a href="#monetary_policy">Monetary Policy</a></li
+      ><li onclick="onResearchLinkClick(this)" data-ref="io"><a href="#io">Org Econ/Firms</a></li
+      ><li onclick="onResearchLinkClick(this)" data-ref="econ_measurement"><a href="#econ_measurement">Consumption</a></li
+      ><li onclick="onResearchLinkClick(this)" data-ref="stats"><a href="#stats">Econometrics</a></li
+      ><li onclick="onResearchLinkClick(this)" data-ref="review"><a href="#review">Reviews</a></li>
     </ul> 
     <i class="fas fa-caret-down" onclick="expandResearchNav()"></i>
     <i class="fas fa-caret-up" onclick="collapseResearchNav()"></i>
@@ -397,26 +397,45 @@ <h5> Machine Learning for Economics and Policy </h5>
 
 
 <script>
+  var researchLinkWasClicked = false;
+  var researchNavWasCollapsed = false;
+
   // Highlight research nav link corresponding to the current section of the page in view
 
   const sections = document.querySelectorAll("div.research-section");
   window.addEventListener("scroll", navHighlighter);
 
   function navHighlighter() {
+    if (researchLinkWasClicked) {
+      // don't do anything if the scroll event is due to a link in the research nav being clicked - this highlighting will
+      // be handled by the onclick handler
+      researchLinkWasClicked = false;
+      return;
+    }
+    if (researchNavWasCollapsed) {
+      // don't do anything if the scroll event is due to a link in the research nav being clicked - this highlighting will
+      // be handled by the onclick handler
+      researchNavWasCollapsed = false;
+      return;
+    }
+
     const mediaQueryString = "(max-width: 600px)";
     const onMobile = window.matchMedia(mediaQueryString).matches;
-    const activeLink = document.querySelector(".research-nav li.active");
-    // Current scroll position
-    const scrollY = window.pageYOffset;
-    // scrolled to (or near enough to) bottom of page?
-    const atBottomOfPage = ((window.innerHeight + scrollY) > document.body.offsetHeight - 100);
-
+
     if (researchNavExpanded && onMobile) {
       // don't do anything if the nav is expanded - should show all elements and not highlight anything
       return;
     }
 
+    const activeLink = document.querySelector(".research-nav li.active");
+    // Current scroll position
+    const scrollY = window.pageYOffset;
+    // scrolled to (or near enough to) bottom of page?
+    const bottomOfPageTolerance = 3;
+    const atBottomOfPage = ((window.innerHeight + scrollY) >= document.documentElement.scrollHeight - bottomOfPageTolerance);
+
     if (atBottomOfPage) {
+      // alert("at the bottom of page");
 
       // at bottom of page, so bottom-most section in view. highlight link corresponding to last section.
       const lastSection = sections[sections.length - 1];
@@ -439,7 +458,9 @@ <h5> Machine Learning for Economics and Policy </h5>
     for (var i = 0; i < sections.length; i++){
       const current = sections[i];
       const sectionHeight = current.offsetHeight;
-      const sectionTop = current.offsetTop - 100;
+      mainNavHeight = document.querySelector(".main-nav").offsetHeight;
+      researchNavHeight = document.querySelector(".research-nav").offsetHeight;
+      const sectionTop = current.offsetTop - (mainNavHeight + researchNavHeight);
       const sectionId = current.getAttribute("id");
 
       // the nav link for current section
@@ -512,6 +533,7 @@ <h5> Machine Learning for Economics and Policy </h5>
   }
 
   function collapseResearchNav() {
+    researchNavWasCollapsed = true;
     var mediaQueryString = "(max-width: 600px)";
     smallWindow = window.matchMedia(mediaQueryString).matches;
     if (smallWindow) {
@@ -524,10 +546,28 @@ <h5> Machine Learning for Economics and Policy </h5>
     }
   }
 
-  function onResearchLinkClick() {
+  function onResearchLinkClick(e) {
+    // so the scroll event handler doesn't react
+    researchLinkWasClicked = true;
+
     var mediaQueryString = "(max-width: 600px)";
-    smallWindow = window.matchMedia(mediaQueryString).matches;
-    if (smallWindow) {collapseResearchNav();}
+    onMobile = window.matchMedia(mediaQueryString).matches;
+    activeLink = document.querySelector(".research-nav li.active");
+    if (onMobile) {
+      // in mobile mode
+
+      // clicking on a link should collapse the menu if expanded
+      if (researchNavExpanded) {
+        collapseResearchNav();
+        // make sure link clicked is visible
+        activeLink.style.display = "none";
+        e.style.display = "block";
+      }
+      // clicking on the active link should expand the menu
+      else expandResearchNav();
+    }
+    activeLink.classList.remove("active");
+    e.classList.add("active");
   }
 
   function onWindowContract() {