Merge pull request #470 from stgn/sidebar-page-ux

Improve experience on smaller screens

Author: Michael-F-Bryan

src/theme/book.css

@@ -1,11 +1,12 @@
-html,
-body {
+html {
   font-family: "Open Sans", sans-serif;
   color: #333;
+  overflow-x: hidden;
 }
 body {
   margin: 0;
   font-size: 1rem;
+  overflow-x: hidden;
 }
 code {
   font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
@@ -66,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;
@@ -109,28 +102,25 @@ table thead td {
   white-space: nowrap;
 }
 .page-wrapper {
-  padding-left: 300px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 100%;
-  -webkit-transition: padding-left 0.5s, margin-right 0.5s;
-  -moz-transition: padding-left 0.5s, margin-right 0.5s;
-  -o-transition: padding-left 0.5s, margin-right 0.5s;
-  -ms-transition: padding-left 0.5s, margin-right 0.5s;
-  transition: padding-left 0.5s, margin-right 0.5s;
-}
-@media only screen and (max-width: 1060px) {
-  .page-wrapper {
-    padding-left: 0;
-  }
-}
-.sidebar-hidden .page-wrapper {
-  padding-left: 0;
+  width: 100%;
+  -webkit-transition: padding-left 0.5s, margin-left 0.5s;
+  -moz-transition: padding-left 0.5s, margin-left 0.5s;
+  -o-transition: padding-left 0.5s, margin-left 0.5s;
+  -ms-transition: padding-left 0.5s, margin-left 0.5s;
+  transition: padding-left 0.5s, margin-left 0.5s;
 }
 .sidebar-visible .page-wrapper {
   padding-left: 300px;
-  margin-right: -300px;
+}
+@media only screen and (max-width: 1079px) {
+  .sidebar-visible .page-wrapper {
+    padding-left: 0;
+    margin-left: 300px;
+  }
 }
 .page {
   outline: 0;
@@ -238,38 +228,41 @@ table thead td {
   -ms-transition: color 0.5s;
   transition: color 0.5s;
 }
-.mobile-nav-chapters {
+.nav-chapters:hover {
+  text-decoration: none;
+}
+.nav-wrapper {
+  margin-top: 50px;
   display: none;
 }
-.nav-chapters:hover {
+.mobile-nav-chapters {
+  font-size: 2.5em;
+  text-align: center;
   text-decoration: none;
+  width: 90px;
+  border-radius: 5px;
 }
 .previous {
-  left: 315px;
-  -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;
-  }
+  float: left;
 }
 .next {
+  float: right;
   right: 15px;
 }
-.sidebar-hidden .previous {
-  left: 15px;
-}
-.sidebar-visible .previous {
-  left: 315px;
-}
-@media only screen and (max-width: 1060px) {
+@media only screen and (max-width: 1080px) {
+  .nav-chapters {
+    display: none;
+  }
   .nav-wrapper {
-    max-width: 750px;
-    margin: 0 auto;
+    display: block;
+  }
+}
+@media only screen and (max-width: 1380px) {
+  .sidebar-visible .nav-chapters {
+    display: none;
+  }
+  .sidebar-visible .nav-wrapper {
+    display: block;
   }
 }
 .theme-popup {
@@ -291,37 +284,6 @@ table thead td {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-@media only screen and (max-width: 1060px) {
-  .nav-chapters {
-    display: none;
-  }
-  .mobile-nav-chapters {
-    font-size: 2.5em;
-    text-align: center;
-    text-decoration: none;
-    max-width: 150px;
-    min-width: 90px;
-    -webkit-box-pack: center;
-    -moz-box-pack: center;
-    -o-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -ms-flex-line-pack: center;
-    -webkit-align-content: center;
-    align-content: center;
-    position: relative;
-    display: inline-block;
-    margin-bottom: 50px;
-    border-radius: 5px;
-  }
-  .next {
-    float: right;
-  }
-  .previous {
-    float: left;
-  }
-}
 .light {
   color: #333;
   background-color: #fff;

src/theme/book.js

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

src/theme/index.hbs

@@ -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">
@@ -92,30 +93,24 @@
 
                 <div id="content" class="content">
                     {{{ content }}}
-                </div>
-
-                <!--
-                Constrain the space between buttons on small screen so the total
-                width of the buttons group will not exceed the main content
-                above.
-                -->
-                <div class="nav-wrapper">
-                    <!-- Mobile navigation buttons -->
-                    {{#previous}}
-                        <a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
-                            <i class="fa fa-angle-left"></i>
-                        </a>
-                    {{/previous}}
 
-                    {{#next}}
-                        <a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
-                            <i class="fa fa-angle-right"></i>
-                        </a>
-                    {{/next}}
-
-                    <div style="clear: both"></div>
+                    <div class="nav-wrapper">
+                        <!-- Mobile navigation buttons -->
+                        {{#previous}}
+                            <a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
+                                <i class="fa fa-angle-left"></i>
+                            </a>
+                        {{/previous}}
+
+                        {{#next}}
+                            <a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
+                                <i class="fa fa-angle-right"></i>
+                            </a>
+                        {{/next}}
+
+                        <div style="clear: both"></div>
+                    </div>
                 </div>
-
             </div>
 
             {{#previous}}

src/theme/stylus/general.styl

@@ -1,11 +1,13 @@
-html, body {
+html {
     font-family: "Open Sans", sans-serif
     color: #333
+    overflow-x: hidden
 }
 
 body {
     margin: 0;
     font-size: 1rem;
+    overflow-x: hidden
 }
 
 code {

src/theme/stylus/nav-icons.styl

@@ -9,6 +9,7 @@
     margin: 0
     max-width: 150px
     min-width: 90px
+
     display: flex
     justify-content: center
     align-content: center
@@ -17,29 +18,38 @@
     transition: color 0.5s
 }
 
-.mobile-nav-chapters { display: none }
 .nav-chapters:hover { text-decoration: none }
-.previous {
-    left: $sidebar-width + $page-padding
-    transition: left 0.5s
 
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        left: $page-padding
-    }
+.nav-wrapper {
+    margin-top: 50px
+    display: none
+}
+
+.mobile-nav-chapters { 
+    font-size: 2.5em
+    text-align: center
+    text-decoration: none
+    width: 90px
+    border-radius: 5px
 }
-.next { right: $page-padding }
 
-.sidebar-hidden .previous {
-  left: $page-padding
+.previous {
+    float: left
 }
 
-.sidebar-visible .previous {
-  left: $sidebar-width + $page-padding
+.next {
+    float: right
+    right: $page-padding 
 }
 
-.nav-wrapper {
-  @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-    max-width: $content-max-width
-    margin: 0 auto
-  }
+@media only screen and (max-width: $page-plus-sidebar-width) {
+    .nav-chapters { display: none }
+    .nav-wrapper { display: block }
+}
+
+@media only screen and (max-width: $page-plus-sidebar-width + $sidebar-width) {
+    .sidebar-visible {
+        .nav-chapters { display: none }
+        .nav-wrapper { display: block }
+    }
 }

src/theme/stylus/page.styl

@@ -1,26 +1,24 @@
 @require 'variables'
 
 .page-wrapper {
-    padding-left: $sidebar-width
     box-sizing: border-box
 
     min-height: 100%
+    width: 100%
 
     // Animation: slide away
-    transition: padding-left 0.5s, margin-right 0.5s
-
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        padding-left: 0
-    }
-}
-
-.sidebar-hidden .page-wrapper {
-    padding-left: 0
+    transition: padding-left 0.5s, margin-left 0.5s
 }
 
 .sidebar-visible .page-wrapper {
     padding-left: $sidebar-width
-    margin-right: - $sidebar-width
+}
+
+@media only screen and (max-width: $page-plus-sidebar-width - 1) {
+    .sidebar-visible .page-wrapper {
+        padding-left: 0
+        margin-left: $sidebar-width
+    }
 }
 
 .page {
@@ -30,7 +28,7 @@
 
 .content {
     margin-left: auto
-    margin-right:auto
+    margin-right: auto
     max-width: $content-max-width
     padding-bottom: 50px