Force hidden sidebar on load for screen widths smaller than sidebar plus content and simplify styles
This commit is contained in:
parent
6e90e520d6
commit
71689da6b1
|
@ -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 {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue