Skip to content

Commit

Permalink
Fixed python website double scroller and improve UX (apache#18845)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
ys2843 authored Aug 3, 2020
1 parent 7a5a488 commit 4bb8224
Show file tree
Hide file tree
Showing 8 changed files with 37 additions and 12 deletions.
8 changes: 6 additions & 2 deletions docs/python_docs/_static/mxnet.css
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
}

.mdl-layout__header-row {
height: 84px !important;
height: 80px !important;
}

.mdl-shadow--2dp {
Expand Down Expand Up @@ -199,4 +199,8 @@ p {
float: right;
margin: 4px;
cursor: pointer;
}
}

.scrollUp {
transform: translateY(-80px);
}

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
8 changes: 8 additions & 0 deletions docs/python_docs/themes/mx-theme/src/scss/_root.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 4bb8224

Please sign in to comment.