diff --git a/_layouts/default.html b/_layouts/default.html index 635880bb2f8..a92a79807ad 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -20,11 +20,14 @@ {% include head.html %} + + + {% include topbar.html %} +
- {% include topbar.html %}
{% capture _content %} @@ -37,7 +40,8 @@ {% include footer.html %}
{% include search-results.html %} -
+ +
diff --git a/assets/css/main.scss b/assets/css/main.scss index 10f63fbf72b..7dce592e4b4 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -53,15 +53,9 @@ html[mode=dark] { } html, body { - height: 100%; font-size: 16px; } -/* Solved jumping scrollbar */ -html { - overflow-y: scroll; -} - body { line-height: 1.75rem; background: var(--body-bg); @@ -76,6 +70,8 @@ $tab-height: 3.3rem; $tab-cursor-height: 1.6rem; $tab-count: {{ site.data.tabs | size }}; +$sidebar-display: "sidebar-display"; + #sidebar { @include pl-pr(0); position: fixed; @@ -85,8 +81,6 @@ $tab-count: {{ site.data.tabs | size }}; overflow-y: auto; width: $sidebar-width-medium; z-index: 99; - -webkit-transition: transform 0.4s ease; - transition: transform 0.4s ease; background: rgb(42, 30, 107); background: var(--sidebar-bg); a { @@ -273,10 +267,6 @@ $tab-count: {{ site.data.tabs | size }}; margin: .5rem 1.5rem 2rem 1.5rem; } -.sidebar-expand { - box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2), 6px 0 20px 0 rgba(0, 0, 0, 0.19) !important; -} - #search-result-wrapper { display: none; position: fixed; @@ -447,10 +437,8 @@ $tab-count: {{ site.data.tabs | size }}; left: 0; height: 100%; width: 100%; - background: var(--mask-bg); - opacity: 0.5; z-index: 1; - @at-root .sidebar-expand~& { + @at-root [#{$sidebar-display}] & { display: block!important; } } @@ -460,12 +448,9 @@ $tab-count: {{ site.data.tabs | size }}; #main-wrapper { background-color: var(--main-wrapper-bg); position: relative; - min-height: 100%; + min-height: 100vh; padding-bottom: $footer-height; @include pl-pr(0); - margin-left: 260px; - transition: transform 0.4s ease; - -webkit-transition: transform 0.4s ease; } #main>div.row:first-child>div { @@ -902,11 +887,6 @@ table { visibility: hidden !important; } -.no-scroll { - position: fixed; - width: 100%; -} - .flex-grow-1 { -ms-flex-positive: 1!important; flex-grow: 1!important; @@ -1003,62 +983,38 @@ table { } -/* Sidebar is visibal */ -@media all and (min-width: 831px) { - - #profile-wrapper { - margin-top: 3rem; - } - - #search-wrapper { - width: 22%; - min-width: 150px; - } - - /* button 'back-to-Top' position */ - #back-to-top { - bottom: 5.5rem; - right: 1.2rem; - } - .topbar-up { - box-shadow: none !important; +/* Hide Sidebar and TOC */ +@media all and (max-width: 830px) { + %slide { + -webkit-transition: transform 0.4s ease; + transition: transform 0.4s ease; } - #topbar-title { - text-align: left; - } - footer>div.d-flex { - width: 92%; + html, body { + overflow-x: hidden; } -} + [#{$sidebar-display}] { -/* iPad 9.7" horizontal */ -@media all and (min-width: 992px) and (max-width: 1024px) { - #main-wrapper .col-lg-11 { - -webkit-box-flex: 0; - -ms-flex: 0 0 96%; - flex: 0 0 96%; - max-width: 96%; - } -} - - -/* Hide SideBar and TOC */ -@media all and (max-width: 830px) { + #sidebar { + transform: translateX(0); + } - .sidebar-expand { - transform: translateX(0) !important; - ~#main-wrapper { - transform: translateX(#{$sidebar-width-medium}) !important; + #topbar-wrapper, + #main-wrapper { + transform: translateX(#{$sidebar-width-medium}); } + } #sidebar { + @extend %slide; + transform: translateX(-#{$sidebar-width-medium}); // hide -webkit-transform: translateX(-#{$sidebar-width-medium}); + .cursor { -webkit-transition: none; -moz-transition: none; @@ -1066,8 +1022,13 @@ table { } } + #topbar-wrapper { + @extend %slide; + } + #main-wrapper { - margin-left: 0; + @extend %slide; + padding-top: $topbar-height; } #search-result-wrapper { @@ -1087,8 +1048,6 @@ table { } #topbar-wrapper { - position: -webkit-sticky; - position: sticky; left: 0; } @@ -1157,6 +1116,57 @@ table { } +/* Sidebar visible */ +@media all and (min-width: 831px) { + + /* Solved jumping scrollbar */ + html { + overflow-y: scroll; + } + + #main-wrapper { + margin-left: $sidebar-width-medium; + } + + #profile-wrapper { + margin-top: 3rem; + } + + #search-wrapper { + width: 22%; + min-width: 150px; + } + + /* button 'back-to-Top' position */ + #back-to-top { + bottom: 5.5rem; + right: 1.2rem; + } + + .topbar-up { + box-shadow: none !important; + } + + #topbar-title { + text-align: left; + } + + footer>div.d-flex { + width: 92%; + } + +} + +/* iPad 9.7" horizontal */ +@media all and (min-width: 992px) and (max-width: 1024px) { + #main-wrapper .col-lg-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 96%; + flex: 0 0 96%; + max-width: 96%; + } +} + /* Compact icons in sidebar & TOC hidden */ @media all and (min-width: 832px) and (max-width: 1199px) { diff --git a/assets/js/_src/_commons/search-display.js b/assets/js/_src/_commons/search-display.js index e54e0c9a43b..a34babd2a30 100644 --- a/assets/js/_src/_commons/search-display.js +++ b/assets/js/_src/_commons/search-display.js @@ -29,10 +29,8 @@ $(function() { return { block: function() { offset = $(window).scrollTop(); - $('body').addClass('no-scroll'); }, release: function() { - $('body').removeClass('no-scroll'); $('html,body').scrollTop(offset); }, getOffset: function() { diff --git a/assets/js/_src/_commons/sidebar.js b/assets/js/_src/_commons/sidebar.js index 655f771164b..bf6551bef36 100644 --- a/assets/js/_src/_commons/sidebar.js +++ b/assets/js/_src/_commons/sidebar.js @@ -5,52 +5,30 @@ * © 2018-2019 Cotes Chung * MIT License */ -$(function(){ - var isExpanded = false; +$(function() { + + var sidebarUtil = (function() { + const ATTR_DISPLAY = "sidebar-display"; + var isExpanded = false; + var body = $('body'); - $("#sidebar-trigger").click(function() { - if (isExpanded == false) { - $("#sidebar").addClass("sidebar-expand"); - openModal(); - isExpanded = true; - } - }); - - $("#mask").click(function() { - $("#sidebar").removeClass("sidebar-expand"); - closeModal(); - isExpanded = false; - }); - - /** - * ModalHelper helpers resolve the modal scrolling issue on mobile devices - * https://github.com/twbs/bootstrap/issues/15852 - * requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element - */ - var ModalHelper = (function(bodyCls) { - var scrollTop; return { - afterOpen: function() { - scrollTop = document.scrollingElement.scrollTop; - document.body.classList.add(bodyCls); - document.body.style.top = -scrollTop + 'px'; - }, - beforeClose: function() { - document.body.classList.remove(bodyCls); - // scrollTop lost after set position:fixed, restore it back. - document.scrollingElement.scrollTop = scrollTop; - document.body.style.top = ''; + toggle: function() { + if (isExpanded == false) { + body.attr(ATTR_DISPLAY, ''); + } else { + body.removeAttr(ATTR_DISPLAY); + } + + isExpanded = !isExpanded; } - }; - })('no-scroll'); + } + + })(); - function openModal() { - ModalHelper.afterOpen(); - } + $("#sidebar-trigger").click(sidebarUtil.toggle); - function closeModal() { - ModalHelper.beforeClose(); - } + $('#mask').click(sidebarUtil.toggle); -}); \ No newline at end of file +}); diff --git a/assets/js/dist/_commons/search-display.min.js b/assets/js/dist/_commons/search-display.min.js index 3f614e6cfb7..013ff3d09c1 100644 --- a/assets/js/dist/_commons/search-display.min.js +++ b/assets/js/dist/_commons/search-display.min.js @@ -1 +1 @@ -$(function(){var j=$("#sidebar-trigger");var o=$("#search-trigger");var h=$("#search-cancel");var b=$("#search-cleaner");var e=$("#main");var c=$("#topbar-title");var k=$("#search-wrapper");var i=$("#search-result-wrapper");var g=$("#search-results");var l=$("#search-input");var a=$("#search-hints");var d=(function(){var p=0;return{block:function(){p=$(window).scrollTop();$("body").addClass("no-scroll")},release:function(){$("body").removeClass("no-scroll");$("html,body").scrollTop(p)},getOffset:function(){return p}}})();var m=(function(){return{on:function(){j.addClass("unloaded");c.addClass("unloaded");o.addClass("unloaded");k.addClass("d-flex");h.addClass("loaded")},off:function(){h.removeClass("loaded");k.removeClass("d-flex");j.removeClass("unloaded");c.removeClass("unloaded");o.removeClass("unloaded")}}})();var n=(function(){var p=false;return{on:function(){if(!p){i.removeClass("unloaded");e.addClass("hidden");p=true;d.block()}},off:function(){if(p){g.empty();if(a.hasClass("unloaded")){a.removeClass("unloaded")}i.addClass("unloaded");b.removeClass("visable");e.removeClass("hidden");l.val("");p=false;d.release()}},isVisable:function(){return p}}})();function f(){return h.hasClass("loaded")}o.click(function(){m.on();n.on();l.focus()});h.click(function(){m.off();n.off()});l.focus(function(){k.addClass("input-focus")});l.focusout(function(){k.removeClass("input-focus")});l.on("keyup",function(p){if(p.keyCode==8&&l.val()==""){if(!f()){n.off()}else{a.removeClass("unloaded")}}else{if(l.val()!=""){n.on();if(!b.hasClass("visible")){b.addClass("visable")}if(f()){a.addClass("unloaded")}}}});b.on("click",function(){l.val("");if(f()){a.removeClass("unloaded");g.empty()}else{n.off()}l.focus();b.removeClass("visable")})}); \ No newline at end of file +$(function(){var j=$("#sidebar-trigger");var o=$("#search-trigger");var h=$("#search-cancel");var b=$("#search-cleaner");var e=$("#main");var c=$("#topbar-title");var k=$("#search-wrapper");var i=$("#search-result-wrapper");var g=$("#search-results");var l=$("#search-input");var a=$("#search-hints");var d=(function(){var p=0;return{block:function(){p=$(window).scrollTop()},release:function(){$("html,body").scrollTop(p)},getOffset:function(){return p}}})();var m=(function(){return{on:function(){j.addClass("unloaded");c.addClass("unloaded");o.addClass("unloaded");k.addClass("d-flex");h.addClass("loaded")},off:function(){h.removeClass("loaded");k.removeClass("d-flex");j.removeClass("unloaded");c.removeClass("unloaded");o.removeClass("unloaded")}}})();var n=(function(){var p=false;return{on:function(){if(!p){i.removeClass("unloaded");e.addClass("hidden");p=true;d.block()}},off:function(){if(p){g.empty();if(a.hasClass("unloaded")){a.removeClass("unloaded")}i.addClass("unloaded");b.removeClass("visable");e.removeClass("hidden");l.val("");p=false;d.release()}},isVisable:function(){return p}}})();function f(){return h.hasClass("loaded")}o.click(function(){m.on();n.on();l.focus()});h.click(function(){m.off();n.off()});l.focus(function(){k.addClass("input-focus")});l.focusout(function(){k.removeClass("input-focus")});l.on("keyup",function(p){if(p.keyCode==8&&l.val()==""){if(!f()){n.off()}else{a.removeClass("unloaded")}}else{if(l.val()!=""){n.on();if(!b.hasClass("visible")){b.addClass("visable")}if(f()){a.addClass("unloaded")}}}});b.on("click",function(){l.val("");if(f()){a.removeClass("unloaded");g.empty()}else{n.off()}l.focus();b.removeClass("visable")})}); \ No newline at end of file diff --git a/assets/js/dist/_commons/sidebar.min.js b/assets/js/dist/_commons/sidebar.min.js index 27218dcd59a..1bae9be6a90 100644 --- a/assets/js/dist/_commons/sidebar.min.js +++ b/assets/js/dist/_commons/sidebar.min.js @@ -1 +1 @@ -$(function(){var d=false;$("#sidebar-trigger").click(function(){if(d==false){$("#sidebar").addClass("sidebar-expand");b();d=true}});$("#mask").click(function(){$("#sidebar").removeClass("sidebar-expand");c();d=false});var a=(function(e){var f;return{afterOpen:function(){f=document.scrollingElement.scrollTop;document.body.classList.add(e);document.body.style.top=-f+"px"},beforeClose:function(){document.body.classList.remove(e);document.scrollingElement.scrollTop=f;document.body.style.top=""}}})("no-scroll");function b(){a.afterOpen()}function c(){a.beforeClose()}}); \ No newline at end of file +$(function(){var a=(function(){const c="sidebar-display";var d=false;var b=$("body");return{toggle:function(){if(d==false){b.attr(c,"")}else{b.removeAttr(c)}d=!d}}})();$("#sidebar-trigger").click(a.toggle);$("#mask").click(a.toggle)}); \ No newline at end of file