Remove fixed height on .top-navbar (#68)

* Remove fixed height on .top-navbar

* Fix responsiveness

Co-authored-by: Emruz Hossain <emruz@appscode.com>

5 files changed, 55 insertions, 194 deletions

diff --git a/static/assets/css/layouts/list.css b/static/assets/css/layouts/list.css
index 5c21f71..b3fde85 100644
--- a/static/assets/css/layouts/list.css
+++ b/static/assets/css/layouts/list.css
@@ -167,6 +167,7 @@
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     position: relative;
+    transition: all ease-out 0.3s;
   }
 
   .post-card-holder .post-card {
@@ -181,45 +182,6 @@
 /*  Large devices (desktops, 992px and up) */
 
 @media (max-width: 992px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    order: 2;
-    padding-bottom: 0.5rem;
-  }
-
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-  .navbar-toggler {
-    display: block;
-  }
-
-  #toc-toggler {
-    visibility: hidden;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    width: 100%;
-    padding-left: 0px;
-  }
-
-  .post-card-holder {
-    margin: 0;
-    margin-top: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    position: relative;
-  }
-
   .post-card-holder .post-card {
     width: 50%;
   }
@@ -232,52 +194,6 @@
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    order: 2;
-    padding-bottom: 0.5rem;
-  }
-
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-  .navbar-toggler {
-    display: block;
-  }
-
-  #toc-toggler {
-    visibility: hidden;
-  }
-
-  .content-cards {
-    padding-top: 20px;
-    width: 100%;
-    padding-left: 0px;
-  }
-
-  .post-card-holder {
-    margin: 0;
-    margin-top: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    position: relative;
-  }
-
-  .post-card-holder .post-card {
-    width: 50%;
-  }
-
-  .content-section.hide .post-card-holder .post-card {
-    width: 100%;
-  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -300,33 +216,24 @@
     width: 100%;
     padding-left: 0;
     padding-right: 0;
+    transition: all ease-out 0.3s;
   }
 
   .content-section.hide .content {
     margin-top: 0;
     padding-top: 0;
-  }
-
-  #toc-toggler {
-    visibility: hidden;
+    transition: all ease-out 0.3s;
   }
 
   .content-cards {
     padding-top: 20px;
     padding-left: 0px;
-    transition: all ease-out 0.5s;
-  }
-
-  .post-card-holder {
-    margin: 0;
-    margin-top: 1.5rem;
-    padding-right: 0;
-    padding-left: 0;
-    transition: all ease-out 0.5s;
+    transition: all ease-out 0.3s;
   }
 
-  .post-card-holder.hide {
-    margin-top: 0;
+  .content-section.hide .post-card-holder {
+    margin-top: 0.5rem;
+    transition: all ease-out 0.3s;
   }
 
   .post-card-holder .post-card {
diff --git a/static/assets/css/layouts/single.css b/static/assets/css/layouts/single.css
index 393f101..319afe9 100644
--- a/static/assets/css/layouts/single.css
+++ b/static/assets/css/layouts/single.css
@@ -44,7 +44,6 @@ body {
   overflow-y: auto;
   background-color: #f9fafc;
   margin-right: 0.5rem;
-  max-height: 100vh;
   /* box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); */
   transition: all ease-out 0.3s;
 }
@@ -246,7 +245,7 @@ a.header-anchor code {
 .content li > ol,
 .content li > ul {
   -webkit-padding-start: 1rem;
-          padding-inline-start: 1rem;
+  padding-inline-start: 1rem;
 }
 
 kbd {
@@ -363,6 +362,7 @@ mark {
 
   .toc-holder {
     top: 3rem;
+    max-height: calc(100vh - 3rem);
   }
 
   .navbar-toggler {
@@ -403,70 +403,6 @@ mark {
 /* Medium devices (tablets, 768px and up) */
 
 @media only screen and (max-width: 768px) {
-  .wrapper {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .content-section {
-    padding: 0;
-    flex: 60%;
-    max-width: 100%;
-    order: 2;
-    overflow: hidden;
-  }
-  .content {
-    overflow: hidden;
-  }
-  .container {
-    max-width: 100%;
-  }
-
-  .toc-section {
-    order: 3;
-    flex: 0%;
-    max-width: 0%;
-    transition: all ease-out 0.3s;
-  }
-  .toc-section.hide {
-    flex: 40%;
-    max-width: 40%;
-    margin-left: 0.5rem;
-    transition: all ease-out 0.3s;
-  }
-
-  .toc-holder {
-    top: 3rem;
-  }
-
-  .navbar-toggler {
-    display: block;
-  }
-
-  .hero-area {
-    height: 300px;
-    margin-top: 1rem;
-  }
-
-  .page-content {
-    padding: 0px;
-  }
-
-  pre {
-    margin: 0px;
-  }
-  code {
-    padding: 0px;
-  }
-
-  .btn-improve-page {
-    margin-right: 1rem;
-  }
-
-  #disqus_thread,
-  .dsq-brlink {
-    padding: 5px;
-  }
 }
 
 /* Small devices (landscape phones, 576px and up) */
@@ -488,7 +424,7 @@ mark {
   .toc-section {
     order: 2;
     width: 100%;
-    height: 0;
+    height: fit-content;
     max-height: 0;
     max-width: 100%;
     transition: all ease-out 0.5s;
@@ -530,9 +466,6 @@ mark {
     margin-top: 1rem;
   }
 
-  .hero-area.hide {
-    margin-top: 1rem;
-  }
   .page-content {
     padding: 0px;
   }
diff --git a/static/assets/css/navigators/navbar.css b/static/assets/css/navigators/navbar.css
index 3a26a45..f8e13f3 100644
--- a/static/assets/css/navigators/navbar.css
+++ b/static/assets/css/navigators/navbar.css
@@ -132,6 +132,14 @@
 
 /* IPad Pro */
 @media (max-width: 1024px) {
+  .top-navbar {
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    padding-bottom: 0px;
+    padding-top: 0px;
+  }
+
   .top-navbar .container {
     max-width: 100%;
   }
diff --git a/static/assets/css/navigators/sidebar.css b/static/assets/css/navigators/sidebar.css
index 7b38faa..9522e49 100644
--- a/static/assets/css/navigators/sidebar.css
+++ b/static/assets/css/navigators/sidebar.css
@@ -196,6 +196,7 @@ a.focused {
     position: sticky;
     top: 2.5rem;
     width: 100%;
+    max-height: calc(100vh - 2.5rem);
   }
 
   .sidebar-section.hide {
diff --git a/static/assets/js/main.js b/static/assets/js/main.js
index b12216d..745b547 100644
--- a/static/assets/js/main.js
+++ b/static/assets/js/main.js
@@ -23,32 +23,44 @@ var isMobile = false, isTablet = false, isLaptop = false;
 
     // ================= Smooth Scroll ===================
     function addSmoothScroll() {
-      // Add smooth scrolling to all links
-      $('a[href*="#"]').on('click', function (event) {
+      // ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
+      // Select all links with hashes
+      $('a[href*="#"]').click(function (event) {
+        // On-page links
+        if (
+          location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+          &&
+          location.hostname == this.hostname
+        ) {
+          // Figure out element to scroll to
+          var target = $(this.hash);
+          target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+          // Does a scroll target exist?
+          if (target.length) {
+            // Only prevent default if animation is actually gonna happen
+            event.preventDefault();
 
-        // Make sure this.hash has a value before overriding default behavior
-        if (this.hash !== "") {
-          // Prevent default anchor click behavior
-          event.preventDefault();
-
-          // Store hash
-          var hash = this.hash;
-
-          let offset = 60;
-          if (isMobile) {
-            offset = 760;
-          } else if (isTablet) {
-            offset = 60;
+            let offset = 60;
+            if (isMobile) {
+              offset = 710;
+            } else if (isTablet) {
+              offset = 60;
+            }
+            $('html, body').animate({
+              scrollTop: target.offset().top - offset
+            }, 1000, function () {
+              // Callback after animation
+              // Must change focus!
+              var $target = $(target);
+              $target.focus();
+              if ($target.is(":focus")) { // Checking if the target was focused
+                return false;
+              } else {
+                $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
+                $target.focus(); // Set focus again
+              };
+            });
           }
-          // Using jQuery's animate() method to add smooth page scroll
-          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
-          $('html, body').animate({
-            scrollTop: $(hash).offset().top - offset
-          }, 800, function () {
-
-            // Add hash (#) to URL when done scrolling (default click behavior)
-            window.location.hash = hash
-          });
         }
       });
     }