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

View File

@ -68,14 +68,6 @@ $( document ).ready(function() {
// Toggle sidebar // Toggle sidebar
$("#sidebar-toggle").click(sidebarToggle); $("#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 // Scroll sidebar to current active section
var activeSection = sidebar.find(".active"); var activeSection = sidebar.find(".active");
if(activeSection.length) { if(activeSection.length) {

View File

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

View File

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

View File

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