From 71608649bbcf62f4961d2111f0207ef0c17a10fc Mon Sep 17 00:00:00 2001
From: Yang Shi <yangshia@amazon.com>
Date: Mon, 3 Aug 2020 12:30:13 -0700
Subject: [PATCH] Fixed python website double scroller and improve UX (#18845)

* make python site header scroll aware and avoid double scroller

* add compiled assets

* adjust python site second header height

* add new line

* set focus to main content on DOM load
# Conflicts:
#	docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css
#	docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map
#	docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js
#	docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map
#	docs/python_docs/themes/mx-theme/src/scss/_root.scss
---
 docs/python_docs/_static/mxnet.css            |  8 +++++--
 .../src/js/sphinx_materialdesign_theme.js     | 18 +++++++++++++++
 .../themes/mx-theme/src/scss/_root.scss       | 22 +++++++++++++++++++
 .../mx-theme/src/scss/layout/_layout.scss     |  7 +-----
 4 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/docs/python_docs/_static/mxnet.css b/docs/python_docs/_static/mxnet.css
index 7d4f7f115424..08415c83222b 100644
--- a/docs/python_docs/_static/mxnet.css
+++ b/docs/python_docs/_static/mxnet.css
@@ -53,7 +53,7 @@
 }
 
 .mdl-layout__header-row {
-    height: 84px !important;
+    height: 80px !important;
 }
 
 .mdl-shadow--2dp {
@@ -203,4 +203,8 @@ p {
     float: right;
     margin: 4px;
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+.scrollUp {
+    transform: translateY(-80px);
+}
diff --git a/docs/python_docs/themes/mx-theme/src/js/sphinx_materialdesign_theme.js b/docs/python_docs/themes/mx-theme/src/js/sphinx_materialdesign_theme.js
index 5f14255205f4..1165c1bfd6d6 100644
--- a/docs/python_docs/themes/mx-theme/src/js/sphinx_materialdesign_theme.js
+++ b/docs/python_docs/themes/mx-theme/src/js/sphinx_materialdesign_theme.js
@@ -172,4 +172,22 @@ $(function() {
 
     $('.mdl-layout').css('visibility', 'visible');
 
+    const addScrollAwareHeaderAnimation = function() {
+        let preScrollTop, curScrollTop = 0;
+        const scrollContent = $("main.mdl-layout__content");
+        scrollContent.focus();
+        const navBar = $('header.mdl-layout__header');
+        const navBarHeight = navBar.height();
+    
+        scrollContent.scroll(function () {
+            curScrollTop = scrollContent.scrollTop();
+            if (preScrollTop < curScrollTop && curScrollTop > navBarHeight) {
+                navBar.addClass("scrollUp");
+            } else if (preScrollTop > curScrollTop && !(curScrollTop <= navBarHeight)) {
+                navBar.removeClass("scrollUp");
+            }
+            preScrollTop = curScrollTop;
+        });
+    }
+    addScrollAwareHeaderAnimation();
 });
diff --git a/docs/python_docs/themes/mx-theme/src/scss/_root.scss b/docs/python_docs/themes/mx-theme/src/scss/_root.scss
index f805a8fb8f0e..b1954a5b4613 100644
--- a/docs/python_docs/themes/mx-theme/src/scss/_root.scss
+++ b/docs/python_docs/themes/mx-theme/src/scss/_root.scss
@@ -14,6 +14,28 @@ body {
     outline: none;
  }
 
+.mdl-layout__content header.mdl-layout__drawer {
+    display: none;
+}
+
+.mdl-layout__container {
+    height: calc(100% - 76px);
+    margin-top: 76px;
+}
+.mdl-layout__header {
+    position: fixed;
+    transition: transform 0.5s;
+}
+.mdl-layout--fixed-drawer>.mdl-layout__content {
+    margin-left: 300px;    
+}
+
+@media screen and (max-width: 1024px) {
+    .mdl-layout--fixed-drawer>.mdl-layout__content {
+        margin-left:0
+    }
+}
+
 h1, h2, h3, h4, h5, h6, blockquote, span.mdl-layout-title,
 a.download > code.download {
     font-family: $body_font_family;
diff --git a/docs/python_docs/themes/mx-theme/src/scss/layout/_layout.scss b/docs/python_docs/themes/mx-theme/src/scss/layout/_layout.scss
index 2654a2c1e72c..3e4f8023fd77 100644
--- a/docs/python_docs/themes/mx-theme/src/scss/layout/_layout.scss
+++ b/docs/python_docs/themes/mx-theme/src/scss/layout/_layout.scss
@@ -25,14 +25,9 @@
     )
 );
 
-.mdl-layout {
-    margin-top: 76px;
-}
-
-
 .document {
     width: 100%;
-    margin: 0 auto;
+    margin: 84px auto;
     display: flex;
 
     @media (min-width: $xl-breakpoint) {