Fixed python website double scroller and improve UX (apache#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
ys2843 · Sep 11, 2020 · 909b172 · 909b172
1 parent 53cb4a6
commit 909b172
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git 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;
-}
+}
+
+.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
@@ -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
@@ -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
@@ -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) {