Fix issue #37.
This commit is contained in:
Cotes Chung
parent
74921c6570
commit
6f42bbc6e5
6 changed files with 111 additions and 121 deletions
|
|
@ -20,11 +20,14 @@ layout: compress
|
|||
{% include head.html %}
|
||||
|
||||
<body data-spy="scroll" data-target="#toc">
|
||||
|
||||
<div id="sidebar" class="d-flex flex-column">
|
||||
{% include sidebar.html %}
|
||||
</div>
|
||||
|
||||
{% include topbar.html %}
|
||||
|
||||
<div id="main-wrapper">
|
||||
{% include topbar.html %}
|
||||
<div id="main">
|
||||
|
||||
{% capture _content %}
|
||||
|
|
@ -37,7 +40,8 @@ layout: compress
|
|||
{% include footer.html %}
|
||||
</div>
|
||||
{% include search-results.html %}
|
||||
</div>
|
||||
|
||||
</div> <!-- #main-wrapper -->
|
||||
|
||||
<div id="mask"></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
#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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
/* Hide Sidebar and TOC */
|
||||
@media all and (max-width: 830px) {
|
||||
%slide {
|
||||
-webkit-transition: transform 0.4s ease;
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
.sidebar-expand {
|
||||
transform: translateX(0) !important;
|
||||
~#main-wrapper {
|
||||
transform: translateX(#{$sidebar-width-medium}) !important;
|
||||
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
[#{$sidebar-display}] {
|
||||
|
||||
#sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#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) {
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -5,52 +5,30 @@
|
|||
* © 2018-2019 Cotes Chung
|
||||
* MIT License
|
||||
*/
|
||||
$(function(){
|
||||
|
||||
var isExpanded = false;
|
||||
$(function() {
|
||||
|
||||
$("#sidebar-trigger").click(function() {
|
||||
if (isExpanded == false) {
|
||||
$("#sidebar").addClass("sidebar-expand");
|
||||
openModal();
|
||||
isExpanded = true;
|
||||
}
|
||||
});
|
||||
var sidebarUtil = (function() {
|
||||
const ATTR_DISPLAY = "sidebar-display";
|
||||
var isExpanded = false;
|
||||
var body = $('body');
|
||||
|
||||
$("#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();
|
||||
}
|
||||
})();
|
||||
|
||||
function closeModal() {
|
||||
ModalHelper.beforeClose();
|
||||
}
|
||||
$("#sidebar-trigger").click(sidebarUtil.toggle);
|
||||
|
||||
$('#mask').click(sidebarUtil.toggle);
|
||||
|
||||
});
|
||||
|
|
@ -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")})});
|
||||
$(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")})});
|
||||
2
assets/js/dist/_commons/sidebar.min.js
vendored
2
assets/js/dist/_commons/sidebar.min.js
vendored
|
|
@ -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()}});
|
||||
$(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)});
|
||||
Loading…
Reference in a new issue