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

Improve experience on smaller screens

src/theme/book.css

@@ -1,11 +1,12 @@
-html,
+html {
-body {
   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;
+  width: 100%;
-  -moz-transition: padding-left 0.5s, margin-right 0.5s;
+  -webkit-transition: padding-left 0.5s, margin-left 0.5s;
-  -o-transition: padding-left 0.5s, margin-right 0.5s;
+  -moz-transition: padding-left 0.5s, margin-left 0.5s;
-  -ms-transition: padding-left 0.5s, margin-right 0.5s;
+  -o-transition: padding-left 0.5s, margin-left 0.5s;
-  transition: padding-left 0.5s, margin-right 0.5s;
+  -ms-transition: padding-left 0.5s, margin-left 0.5s;
-}
+  transition: padding-left 0.5s, margin-left 0.5s;
-@media only screen and (max-width: 1060px) {
-  .page-wrapper {
-    padding-left: 0;
-  }
-}
-.sidebar-hidden .page-wrapper {
-  padding-left: 0;
 }
 .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 {
-  display: none;
-}
 .nav-chapters:hover {
   text-decoration: none;
 }
-.previous {
+.nav-wrapper {
-  left: 315px;
+  margin-top: 50px;
-  -webkit-transition: left 0.5s;
+  display: none;
-  -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) {
+.mobile-nav-chapters {
-  .previous {
+  font-size: 2.5em;
-    left: 15px;
+  text-align: center;
-  }
+  text-decoration: none;
+  width: 90px;
+  border-radius: 5px;
+}
+.previous {
+  float: left;
 }
 .next {
+  float: right;
   right: 15px;
 }
-.sidebar-hidden .previous {
+@media only screen and (max-width: 1080px) {
-  left: 15px;
+  .nav-chapters {
-}
+    display: none;
-.sidebar-visible .previous {
+  }
-  left: 315px;
-}
-@media only screen and (max-width: 1060px) {
   .nav-wrapper {
-    max-width: 750px;
+    display: block;
-    margin: 0 auto;
+  }
+}
+@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');
+            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>
 
         <div id="sidebar" class="sidebar">
@@ -92,30 +93,24 @@
 
                 <div id="content" class="content">
                     {{{ content }}}
+
+                    <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>
-
-                <!--
-                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>
-
             </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
-    }
-}
-.next { right: $page-padding }
-
-.sidebar-hidden .previous {
-  left: $page-padding
-}
-
-.sidebar-visible .previous {
-  left: $sidebar-width + $page-padding
-}
 
 .nav-wrapper {
-  @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
+    margin-top: 50px
-    max-width: $content-max-width
+    display: none
-    margin: 0 auto
+}
-  }
+
+.mobile-nav-chapters { 
+    font-size: 2.5em
+    text-align: center
+    text-decoration: none
+    width: 90px
+    border-radius: 5px
+}
+
+.previous {
+    float: left
+}
+
+.next {
+    float: right
+    right: $page-padding 
+}
+
+@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
+    transition: padding-left 0.5s, margin-left 0.5s
-
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        padding-left: 0
-    }
-}
-
-.sidebar-hidden .page-wrapper {
-    padding-left: 0
 }
 
 .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
 

src/theme/stylus/sidebar.styl

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

src/theme/stylus/theme-popup.styl

@@ -21,37 +21,4 @@
         }
     }
 
-}
+}
-
-@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-
-    .nav-chapters {
-        display: none
-    }
-
-    .mobile-nav-chapters {
-        font-size: 2.5em
-        text-align: center
-        text-decoration: none
-
-        max-width: 150px
-        min-width: 90px
-
-        justify-content: center
-        align-content: center
-
-        position: relative
-        display: inline-block
-        margin-bottom: 50px
-
-        border-radius: 5px
-    }
-
-    .next {
-        float: right
-    }
-
-    .previous {
-        float: left
-    }
-}

src/theme/stylus/variables.styl

@@ -1,4 +1,4 @@
 $sidebar-width = 300px
 $page-padding = 15px
-$max-page-width-with-hidden-sidebar = 1060px
 $content-max-width = 750px
+$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2