Force hidden sidebar on load for screen widths smaller than sidebar plus content and simplify styles

This commit is contained in:
Shane Nelson 2017-10-13 18:25:12 -04:00
parent 6e90e520d6
commit 71689da6b1
5 changed files with 14 additions and 49 deletions

View File

@ -67,20 +67,12 @@ table thead td {
-ms-transition: left 0.5s;
transition: left 0.5s;
}
@media only screen and (max-width: 1060px) {
.sidebar {
left: -300px;
}
}
.sidebar code {
line-height: 2em;
}
.sidebar-hidden .sidebar {
left: -300px;
}
.sidebar-visible .sidebar {
left: 0;
}
.chapter {
list-style: none outside none;
padding-left: 0;
@ -243,26 +235,20 @@ table thead td {
text-decoration: none;
}
.previous {
left: 315px;
left: 15px;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
-ms-transition: left 0.5s;
transition: left 0.5s;
}
@media only screen and (max-width: 1060px) {
.previous {
left: 15px;
}
}
.next {
right: 15px;
}
.sidebar-hidden .previous {
left: 15px;
}
.sidebar-visible .previous {
left: 315px;
@media only screen and (min-width: 1251px) {
.sidebar-visible .previous {
left: 315px;
}
}
@media only screen and (max-width: 1060px) {
.nav-wrapper {

View File

@ -68,14 +68,6 @@ $( document ).ready(function() {
// Toggle sidebar
$("#sidebar-toggle").click(sidebarToggle);
// Hide sidebar on section link click if it occupies large space
// in relation to the whole screen (phone in portrait)
$("#sidebar a").click(function(event){
if (sidebar.width() > window.screen.width * 0.4) {
sidebarToggle();
}
});
// Scroll sidebar to current active section
var activeSection = sidebar.find(".active");
if(activeSection.length) {

View File

@ -62,9 +62,10 @@
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var sidebar = store.get('mdbook-sidebar');
if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080)
sidebar = store.get('mdbook-sidebar') || 'visible';
$("html").addClass("sidebar-" + sidebar);
</script>
<div id="sidebar" class="sidebar">

View File

@ -20,21 +20,15 @@
.mobile-nav-chapters { display: none }
.nav-chapters:hover { text-decoration: none }
.previous {
left: $sidebar-width + $page-padding
left: $page-padding
transition: left 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
left: $page-padding
}
}
.next { right: $page-padding }
.sidebar-hidden .previous {
left: $page-padding
}
.sidebar-visible .previous {
left: $sidebar-width + $page-padding
@media only screen and (min-width: 1251px) {
.sidebar-visible .previous {
left: $sidebar-width + $page-padding
}
}
.nav-wrapper {

View File

@ -15,10 +15,6 @@
// Animation: slide away
transition: left 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
left: - $sidebar-width
}
code {
line-height: 2em;
}
@ -28,10 +24,6 @@
left: - $sidebar-width
}
.sidebar-visible .sidebar {
left: 0
}
.chapter {
list-style: none outside none
padding-left: 0