This is an automated email from the ASF dual-hosted git repository.
zhasheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-mxnet.git
The following commit(s) were added to refs/heads/master by this push:
new 4bb8224 Fixed python website double scroller and improve UX (#18845)
4bb8224 is described below
commit 4bb82245ee5fcbfd32da6461f7b0770ae3c2d9b6
Author: Yang Shi <[email protected]>
AuthorDate: Mon Aug 3 12:30:13 2020 -0700
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
---
docs/python_docs/_static/mxnet.css | 8 ++++++--
.../mxtheme/static/sphinx_materialdesign_theme.css | 2 +-
.../mxtheme/static/sphinx_materialdesign_theme.css.map | 2 +-
.../mxtheme/static/sphinx_materialdesign_theme.js | 2 +-
.../mxtheme/static/sphinx_materialdesign_theme.js.map | 2 +-
.../mx-theme/src/js/sphinx_materialdesign_theme.js | 18 ++++++++++++++++++
docs/python_docs/themes/mx-theme/src/scss/_root.scss | 8 ++++++++
.../themes/mx-theme/src/scss/layout/_layout.scss | 7 +------
8 files changed, 37 insertions(+), 12 deletions(-)
diff --git a/docs/python_docs/_static/mxnet.css
b/docs/python_docs/_static/mxnet.css
index 5c04804..0aec931 100644
--- a/docs/python_docs/_static/mxnet.css
+++ b/docs/python_docs/_static/mxnet.css
@@ -49,7 +49,7 @@
}
.mdl-layout__header-row {
- height: 84px !important;
+ height: 80px !important;
}
.mdl-shadow--2dp {
@@ -199,4 +199,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/mxtheme/static/sphinx_materialdesign_theme.css
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css
index 9b5a231..dca3a34 100644
---
a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css
+++
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css
@@ -1,2 +1,2 @@
-.admonition,.mdl-shadow--2dp,.page-content pre:hover,.page-content
table:not(.footnote):not(.indextable):not(.hlist):not(.option-list):not(.field-list){box-shadow:0
2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0
rgba(0,0,0,.12)}.mdl-shadow--3dp{box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px
3px -2px rgba(0,0,0,.2),0 1px 8px 0
rgba(0,0,0,.12)}.mdl-shadow--4dp{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px
10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}.mdl-shadow--6 [...]
+.admonition,.mdl-shadow--2dp,.page-content pre:hover,.page-content
table:not(.footnote):not(.indextable):not(.hlist):not(.option-list):not(.field-list){box-shadow:0
2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0
rgba(0,0,0,.12)}.mdl-shadow--3dp{box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 3px
3px -2px rgba(0,0,0,.2),0 1px 8px 0
rgba(0,0,0,.12)}.mdl-shadow--4dp{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px
10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)}.mdl-shadow--6 [...]
/*# sourceMappingURL=/sphinx_materialdesign_theme.css.map */
\ No newline at end of file
diff --git
a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map
index 4287952..ad36016 100644
---
a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map
+++
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/material-design-lite/src/shadow/_shadow.scss","../../node_modules/material-design-lite/src/_mixins.scss","../../node_modules/material-design-lite/src/data-table/_data-table.scss","../../node_modules/material-design-lite/src/_variables.scss","../../node_modules/material-design-lite/src/footer/_mini_footer.scss","../../node_modules/material-design-lite/src/card/_card.scss","../../node_modules/material-design-lite/src/button/_button.scss","../scss
[...]
\ No newline at end of file
+{"version":3,"sources":["../../node_modules/material-design-lite/src/shadow/_shadow.scss","../../node_modules/material-design-lite/src/_mixins.scss","../../node_modules/material-design-lite/src/data-table/_data-table.scss","../../node_modules/material-design-lite/src/_variables.scss","../../node_modules/material-design-lite/src/footer/_mini_footer.scss","../../node_modules/material-design-lite/src/card/_card.scss","../../node_modules/material-design-lite/src/button/_button.scss","../scss
[...]
\ No newline at end of file
diff --git
a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js
index 7ca6cd6..9d73a56 100644
---
a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js
+++
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js
@@ -700,6 +700,6 @@ var
e=arguments[3];if(require("core-js/shim"),require("regenerator-runtime/runti
},{"core-js/shim":"y1LN","regenerator-runtime/runtime":"VuXv","core-js/fn/regexp/escape":"Rlym"}],"sKvN":[function(require,module,exports)
{
"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot
call a class as a function")}function e(t,e){for(var n=0;n<e.length;n++){var
s=e[n];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in
s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}function n(t,n,s){return
n&&e(t.prototype,n),s&&e(t,s),t}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void
0;var s=function(){function
e(n){t(this,e),this.doc=document,this.nav=this.doc.querySe [...]
},{}],"brfV":[function(require,module,exports) {
-"use
strict";require("../scss/sphinx_materialdesign_theme.scss"),require("./feedback"),require("material-design-lite"),require("babel-polyfill");var
a=t(require("./scrollspy"));function t(a){return
a&&a.__esModule?a:{default:a}}$(function(){var t,e;t=$(".mdl-layout__drawer
nav").find("li"),$.each(t,function(a,t){var e=$(t),n=$('<span
class="link-wrapper"></span>'),l=e.children("a");e.append(n.append(l));var
o=e.hasClass("current")&&!l.hasClass("current"),d=e.children("ul");if(d.length){v
[...]
+"use
strict";require("../scss/sphinx_materialdesign_theme.scss"),require("./feedback"),require("material-design-lite"),require("babel-polyfill");var
a=t(require("./scrollspy"));function t(a){return
a&&a.__esModule?a:{default:a}}$(function(){var t,e;t=$(".mdl-layout__drawer
nav").find("li"),$.each(t,function(a,t){var e=$(t),n=$('<span
class="link-wrapper"></span>'),l=e.children("a");e.append(n.append(l));var
o=e.hasClass("current")&&!l.hasClass("current"),d=e.children("ul");if(d.length){v
[...]
},{"../scss/sphinx_materialdesign_theme.scss":"BS4D","./feedback":"dMzA","material-design-lite":"vKy7","babel-polyfill":"zUFY","./scrollspy":"sKvN"}]},{},["brfV"],
null)
//# sourceMappingURL=/sphinx_materialdesign_theme.js.map
\ No newline at end of file
diff --git
a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map
index 87e68e4..c8e0635 100644
---
a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map
+++
b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map
@@ -1 +1 @@
-{"version":3,"sources":["feedback.js","ripple.js","tabs.js","layout.js","mdlComponentHandler.js","rAF.js","button.js","checkbox.js","icon-toggle.js","menu.js","progress.js","radio.js","slider.js","snackbar.js","spinner.js","switch.js","textfield.js","tooltip.js","data-table.js","../../node_modules/core-js/modules/_global.js","../../node_modules/core-js/modules/_has.js","../../node_modules/core-js/modules/_fails.js","../../node_modules/core-js/modules/_descriptors.js","../../node_modules/
[...]
\ No newline at end of file
+{"version":3,"sources":["feedback.js","ripple.js","tabs.js","layout.js","mdlComponentHandler.js","rAF.js","button.js","checkbox.js","icon-toggle.js","menu.js","progress.js","radio.js","slider.js","snackbar.js","spinner.js","switch.js","textfield.js","tooltip.js","data-table.js","../../node_modules/core-js/modules/_global.js","../../node_modules/core-js/modules/_has.js","../../node_modules/core-js/modules/_fails.js","../../node_modules/core-js/modules/_descriptors.js","../../node_modules/
[...]
\ No newline at end of file
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 dad4607..75d2f91 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 0cfa145..b1954a5 100644
--- a/docs/python_docs/themes/mx-theme/src/scss/_root.scss
+++ b/docs/python_docs/themes/mx-theme/src/scss/_root.scss
@@ -18,6 +18,14 @@ body {
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;
}
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 2e862e1..be12d94 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) {
