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 %}
|
{% include head.html %}
|
||||||
|
|
||||||
<body data-spy="scroll" data-target="#toc">
|
<body data-spy="scroll" data-target="#toc">
|
||||||
|
|
||||||
<div id="sidebar" class="d-flex flex-column">
|
<div id="sidebar" class="d-flex flex-column">
|
||||||
{% include sidebar.html %}
|
{% include sidebar.html %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include topbar.html %}
|
||||||
|
|
||||||
<div id="main-wrapper">
|
<div id="main-wrapper">
|
||||||
{% include topbar.html %}
|
|
||||||
<div id="main">
|
<div id="main">
|
||||||
|
|
||||||
{% capture _content %}
|
{% capture _content %}
|
||||||
|
|
@ -37,7 +40,8 @@ layout: compress
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
</div>
|
</div>
|
||||||
{% include search-results.html %}
|
{% include search-results.html %}
|
||||||
</div>
|
|
||||||
|
</div> <!-- #main-wrapper -->
|
||||||
|
|
||||||
<div id="mask"></div>
|
<div id="mask"></div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -53,15 +53,9 @@ html[mode=dark] {
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
height: 100%;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Solved jumping scrollbar */
|
|
||||||
html {
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1.75rem;
|
line-height: 1.75rem;
|
||||||
background: var(--body-bg);
|
background: var(--body-bg);
|
||||||
|
|
@ -76,6 +70,8 @@ $tab-height: 3.3rem;
|
||||||
$tab-cursor-height: 1.6rem;
|
$tab-cursor-height: 1.6rem;
|
||||||
$tab-count: {{ site.data.tabs | size }};
|
$tab-count: {{ site.data.tabs | size }};
|
||||||
|
|
||||||
|
$sidebar-display: "sidebar-display";
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
@include pl-pr(0);
|
@include pl-pr(0);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -85,8 +81,6 @@ $tab-count: {{ site.data.tabs | size }};
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
width: $sidebar-width-medium;
|
width: $sidebar-width-medium;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
-webkit-transition: transform 0.4s ease;
|
|
||||||
transition: transform 0.4s ease;
|
|
||||||
background: rgb(42, 30, 107);
|
background: rgb(42, 30, 107);
|
||||||
background: var(--sidebar-bg);
|
background: var(--sidebar-bg);
|
||||||
a {
|
a {
|
||||||
|
|
@ -273,10 +267,6 @@ $tab-count: {{ site.data.tabs | size }};
|
||||||
margin: .5rem 1.5rem 2rem 1.5rem;
|
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 {
|
#search-result-wrapper {
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -447,10 +437,8 @@ $tab-count: {{ site.data.tabs | size }};
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--mask-bg);
|
|
||||||
opacity: 0.5;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
@at-root .sidebar-expand~& {
|
@at-root [#{$sidebar-display}] & {
|
||||||
display: block!important;
|
display: block!important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -460,12 +448,9 @@ $tab-count: {{ site.data.tabs | size }};
|
||||||
#main-wrapper {
|
#main-wrapper {
|
||||||
background-color: var(--main-wrapper-bg);
|
background-color: var(--main-wrapper-bg);
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100%;
|
min-height: 100vh;
|
||||||
padding-bottom: $footer-height;
|
padding-bottom: $footer-height;
|
||||||
@include pl-pr(0);
|
@include pl-pr(0);
|
||||||
margin-left: 260px;
|
|
||||||
transition: transform 0.4s ease;
|
|
||||||
-webkit-transition: transform 0.4s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#main>div.row:first-child>div {
|
#main>div.row:first-child>div {
|
||||||
|
|
@ -902,11 +887,6 @@ table {
|
||||||
visibility: hidden !important;
|
visibility: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-scroll {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow-1 {
|
.flex-grow-1 {
|
||||||
-ms-flex-positive: 1!important;
|
-ms-flex-positive: 1!important;
|
||||||
flex-grow: 1!important;
|
flex-grow: 1!important;
|
||||||
|
|
@ -1003,62 +983,38 @@ table {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar is visibal */
|
|
||||||
@media all and (min-width: 831px) {
|
|
||||||
|
|
||||||
#profile-wrapper {
|
/* Hide Sidebar and TOC */
|
||||||
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 */
|
|
||||||
@media all and (max-width: 830px) {
|
@media all and (max-width: 830px) {
|
||||||
|
%slide {
|
||||||
|
-webkit-transition: transform 0.4s ease;
|
||||||
|
transition: transform 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-expand {
|
|
||||||
transform: translateX(0) !important;
|
html, body {
|
||||||
~#main-wrapper {
|
overflow-x: hidden;
|
||||||
transform: translateX(#{$sidebar-width-medium}) !important;
|
}
|
||||||
|
|
||||||
|
[#{$sidebar-display}] {
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#topbar-wrapper,
|
||||||
|
#main-wrapper {
|
||||||
|
transform: translateX(#{$sidebar-width-medium});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
|
@extend %slide;
|
||||||
|
|
||||||
transform: translateX(-#{$sidebar-width-medium}); // hide
|
transform: translateX(-#{$sidebar-width-medium}); // hide
|
||||||
-webkit-transform: translateX(-#{$sidebar-width-medium});
|
-webkit-transform: translateX(-#{$sidebar-width-medium});
|
||||||
|
|
||||||
.cursor {
|
.cursor {
|
||||||
-webkit-transition: none;
|
-webkit-transition: none;
|
||||||
-moz-transition: none;
|
-moz-transition: none;
|
||||||
|
|
@ -1066,8 +1022,13 @@ table {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#topbar-wrapper {
|
||||||
|
@extend %slide;
|
||||||
|
}
|
||||||
|
|
||||||
#main-wrapper {
|
#main-wrapper {
|
||||||
margin-left: 0;
|
@extend %slide;
|
||||||
|
padding-top: $topbar-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search-result-wrapper {
|
#search-result-wrapper {
|
||||||
|
|
@ -1087,8 +1048,6 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
#topbar-wrapper {
|
#topbar-wrapper {
|
||||||
position: -webkit-sticky;
|
|
||||||
position: sticky;
|
|
||||||
left: 0;
|
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 */
|
/* Compact icons in sidebar & TOC hidden */
|
||||||
@media all and (min-width: 832px) and (max-width: 1199px) {
|
@media all and (min-width: 832px) and (max-width: 1199px) {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,10 +29,8 @@ $(function() {
|
||||||
return {
|
return {
|
||||||
block: function() {
|
block: function() {
|
||||||
offset = $(window).scrollTop();
|
offset = $(window).scrollTop();
|
||||||
$('body').addClass('no-scroll');
|
|
||||||
},
|
},
|
||||||
release: function() {
|
release: function() {
|
||||||
$('body').removeClass('no-scroll');
|
|
||||||
$('html,body').scrollTop(offset);
|
$('html,body').scrollTop(offset);
|
||||||
},
|
},
|
||||||
getOffset: function() {
|
getOffset: function() {
|
||||||
|
|
|
||||||
|
|
@ -5,52 +5,30 @@
|
||||||
* © 2018-2019 Cotes Chung
|
* © 2018-2019 Cotes Chung
|
||||||
* MIT License
|
* MIT License
|
||||||
*/
|
*/
|
||||||
$(function(){
|
|
||||||
|
|
||||||
var isExpanded = false;
|
$(function() {
|
||||||
|
|
||||||
$("#sidebar-trigger").click(function() {
|
var sidebarUtil = (function() {
|
||||||
if (isExpanded == false) {
|
const ATTR_DISPLAY = "sidebar-display";
|
||||||
$("#sidebar").addClass("sidebar-expand");
|
var isExpanded = false;
|
||||||
openModal();
|
var body = $('body');
|
||||||
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 {
|
return {
|
||||||
afterOpen: function() {
|
toggle: function() {
|
||||||
scrollTop = document.scrollingElement.scrollTop;
|
if (isExpanded == false) {
|
||||||
document.body.classList.add(bodyCls);
|
body.attr(ATTR_DISPLAY, '');
|
||||||
document.body.style.top = -scrollTop + 'px';
|
} else {
|
||||||
},
|
body.removeAttr(ATTR_DISPLAY);
|
||||||
beforeClose: function() {
|
}
|
||||||
document.body.classList.remove(bodyCls);
|
|
||||||
// scrollTop lost after set position:fixed, restore it back.
|
isExpanded = !isExpanded;
|
||||||
document.scrollingElement.scrollTop = scrollTop;
|
|
||||||
document.body.style.top = '';
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
})('no-scroll');
|
|
||||||
|
|
||||||
function openModal() {
|
})();
|
||||||
ModalHelper.afterOpen();
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeModal() {
|
$("#sidebar-trigger").click(sidebarUtil.toggle);
|
||||||
ModalHelper.beforeClose();
|
|
||||||
}
|
$('#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