Fix #47 sidebar stays hidden even after page change

This commit is contained in:
Mathieu David 2015-09-24 16:47:33 +02:00
parent 7446743cd6
commit 6c240090ae
6 changed files with 64 additions and 9 deletions

View File

@ -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;

View File

@ -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) {

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -0,0 +1 @@
$sidebar-width = 300px