Fix #47 sidebar stays hidden even after page change
This commit is contained in:
parent
7446743cd6
commit
6c240090ae
|
@ -30,9 +30,15 @@ body {
|
|||
}
|
||||
@media only screen and (max-width: 1060px) {
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
left: -$sidebar-width;
|
||||
}
|
||||
}
|
||||
.sidebar-hidden .sidebar {
|
||||
left: -300px;
|
||||
}
|
||||
.sidebar-visible . sidebar {
|
||||
left: 0;
|
||||
}
|
||||
.chapter {
|
||||
list-style: none outside none;
|
||||
padding-left: 0;
|
||||
|
@ -85,6 +91,12 @@ body {
|
|||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
.sidebar-hidden .page-wrapper {
|
||||
left: 15px;
|
||||
}
|
||||
.sidebar-visible .page-wrapper {
|
||||
left: 315px;
|
||||
}
|
||||
.page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
@ -3,12 +3,14 @@ $( document ).ready(function() {
|
|||
// url
|
||||
var url = window.location.pathname;
|
||||
|
||||
|
||||
// Set theme
|
||||
var theme = localStorage.getItem('theme');
|
||||
if (theme == null) { theme = 'light'; }
|
||||
|
||||
set_theme(theme);
|
||||
|
||||
|
||||
// Syntax highlighting Configuration
|
||||
hljs.configure({
|
||||
tabReplace: ' ', // 4 spaces
|
||||
|
@ -21,19 +23,31 @@ $( document ).ready(function() {
|
|||
|
||||
|
||||
// Interesting DOM Elements
|
||||
var html = $("html");
|
||||
var sidebar = $("#sidebar");
|
||||
var page_wrapper = $("#page-wrapper");
|
||||
|
||||
|
||||
// Toggle sidebar
|
||||
$("#sidebar-toggle").click(function(event){
|
||||
if(sidebar.position().left === 0){
|
||||
sidebar.css({left: "-300px"});
|
||||
page_wrapper.css({left: "15px"});
|
||||
if ( html.hasClass("sidebar-hidden") ) {
|
||||
html.removeClass("sidebar-hidden").addClass("sidebar-visible");
|
||||
localStorage.setItem('sidebar', 'visible');
|
||||
} else if ( html.hasClass("sidebar-visible") ) {
|
||||
html.removeClass("sidebar-visible").addClass("sidebar-hidden");
|
||||
localStorage.setItem('sidebar', 'hidden');
|
||||
} else {
|
||||
sidebar.css({left: "0"});
|
||||
page_wrapper.css({left: "315px"});
|
||||
if(sidebar.position().left === 0){
|
||||
html.addClass("sidebar-hidden");
|
||||
localStorage.setItem('sidebar', 'hidden');
|
||||
} else {
|
||||
html.addClass("sidebar-visible");
|
||||
localStorage.setItem('sidebar', 'visible');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Print button
|
||||
$("#print-button").click(function(){
|
||||
var printWindow = window.open("print.html");
|
||||
|
@ -43,6 +57,7 @@ $( document ).ready(function() {
|
|||
window.print();
|
||||
}
|
||||
|
||||
|
||||
// Theme button
|
||||
$("#theme-toggle").click(function(){
|
||||
if($('.theme-popup').length) {
|
||||
|
|
|
@ -37,6 +37,13 @@
|
|||
$('body').removeClass().addClass(theme);
|
||||
</script>
|
||||
|
||||
<!-- Hide / unhide sidebar before it is displayed -->
|
||||
<script type="text/javascript">
|
||||
var sidebar = localStorage.getItem('sidebar');
|
||||
if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
|
||||
else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
|
||||
</script>
|
||||
|
||||
<div id="sidebar" class="sidebar">
|
||||
{{#toc}}{{/toc}}
|
||||
</div>
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
@require 'variables'
|
||||
|
||||
.page-wrapper {
|
||||
position: absolute
|
||||
overflow-y: auto
|
||||
left: 315px
|
||||
left: $sidebar-width + 15px
|
||||
right: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
|
@ -19,6 +21,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-hidden .page-wrapper {
|
||||
left: 15px
|
||||
}
|
||||
|
||||
.sidebar-visible .page-wrapper {
|
||||
left: $sidebar-width + 15px
|
||||
}
|
||||
|
||||
.page {
|
||||
position: absolute
|
||||
top: 0
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
@require 'variables'
|
||||
|
||||
.sidebar {
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 0
|
||||
bottom: 0
|
||||
width: 300px
|
||||
width: $sidebar-width
|
||||
overflow-y: auto
|
||||
padding: 10px 10px
|
||||
font-size: 0.875em
|
||||
|
@ -14,10 +16,18 @@
|
|||
transition: left 0.5s
|
||||
|
||||
@media only screen and (max-width: 1060px) {
|
||||
left: -300px
|
||||
left: -$sidebar-width
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-hidden .sidebar {
|
||||
left: - $sidebar-width
|
||||
}
|
||||
|
||||
.sidebar-visible . sidebar {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.chapter {
|
||||
list-style: none outside none
|
||||
padding-left: 0
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
$sidebar-width = 300px
|
Loading…
Reference in New Issue