Added navigation icons + javascript code to hide them when there is no previous or next. Closes #12

book-example/book/README.html

@@ -24,7 +24,8 @@
                 <h1 class="menu-title"></h1>
             </div>
 
-            <div id="page" class="page">
+            <div class="page">
+                <div id="content" class="content">
                     <h1>mdBook</h1>
 <p><strong>mdBook</strong> is a command line tool and Rust library to create books using Markdown.
 It's very similar to Gitbook but written in <a href="http://www.rust-lang.org">Rust</a>.</p>
@@ -35,6 +36,22 @@ Issues and feature requests can be posted on the <a href="https://github.com/aze
 <p>mdBook, all the code and this book, are released under the <a href="https://www.mozilla.org/MPL/2.0/">Mozilla Public License v2.0</a></p>
 
                 </div>
+            </div>
+
+            <!--
+                Doesn't seem to work:  using JavaScript
+                alternative until I find a way to do it in the template
+            -->
+                <a href="" class="nav-chapters previous">
+                    <i class="fa fa-angle-left"></i>
+                </a>
+            <!--  -->
+
+            <!--  -->
+                <a href="cli/cli-tool.html" class="nav-chapters next">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+            <!--  -->
 
         </div>
 

book-example/book/book.css

@@ -55,6 +55,15 @@ html, body {
 }
 
 .page {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    overflow-y: auto;
+}
+
+.content {
     margin-left: auto;
     margin-right:auto;
     max-width: 750px;
@@ -126,10 +135,6 @@ pre {
     border-radius: 3px;
 }
 
-.nav-previous-next {
-    margin-top: 60px;
-}
-
 .left {
     float: left;
 }
@@ -140,11 +145,48 @@ pre {
 
 /* Content */
 
-.page a {
+.content a {
     color: #4183c4;
     text-decoration: none;
 }
 
-.page a:hover {
+.content a:hover {
     text-decoration: underline;
 }
+
+/* Nav icons */
+.nav-chapters {
+    color: #CCC;
+    font-size: 40px;
+    text-align: center;
+    text-decoration: none;
+
+    position: absolute;
+    top: 50px; /* Height of menu-bar */
+    bottom: 0;
+    margin: 0;
+    max-width: 150px;
+    min-width: 90px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
+
+    -webkit-transition: color 0.5s; /* Safari */
+    -o-transition: color 0.5s; /* Opera */
+    -moz-transition: color 0.5s; /* Mozilla Firefox */
+    transition: color 0.5s;
+}
+
+.nav-chapters:hover {
+    color: #333;
+    text-decoration: none;
+}
+
+.previous {
+    left: 0;
+}
+
+.next {
+    right: 0;
+}

book-example/book/book.js

@@ -14,4 +14,13 @@ $( document ).ready(function() {
         }
     });
 
+
+    // Hide navigation icons when there is no next or previous link
+    // JavaScript Solution until I find a way to do this in the template
+    $(".nav-chapters").each(function(){
+        if(!$(this).attr('href')){
+            this.remove();
+        }
+    });
+
 });

book-example/book/cli/build.html

@@ -24,7 +24,8 @@
                 <h1 class="menu-title"></h1>
             </div>
 
-            <div id="page" class="page">
+            <div class="page">
+                <div id="content" class="content">
                     <h1>The build command</h1>
 <p>The build command is used to render your book:</p>
 <pre><code>mdbook build
@@ -42,6 +43,22 @@ current working directory.</p>
 <p><strong>note:</strong> make sure to run the build command in the root directory and not in the <code>src</code> directory</p>
 
                 </div>
+            </div>
+
+            <!--
+                Doesn't seem to work:  using JavaScript
+                alternative until I find a way to do it in the template
+            -->
+                <a href="../cli/init.html" class="nav-chapters previous">
+                    <i class="fa fa-angle-left"></i>
+                </a>
+            <!--  -->
+
+            <!--  -->
+                <a href="" class="nav-chapters next">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+            <!--  -->
 
         </div>
 

book-example/book/cli/cli-tool.html

@@ -24,12 +24,29 @@
                 <h1 class="menu-title"></h1>
             </div>
 
-            <div id="page" class="page">
+            <div class="page">
+                <div id="content" class="content">
                     <h1>Command Line Tool</h1>
 <p>mdBook can be used either as a command line tool or a Rust library.
 Let's focus on the command line tool capabilities first.</p>
 
                 </div>
+            </div>
+
+            <!--
+                Doesn't seem to work:  using JavaScript
+                alternative until I find a way to do it in the template
+            -->
+                <a href="../README.html" class="nav-chapters previous">
+                    <i class="fa fa-angle-left"></i>
+                </a>
+            <!--  -->
+
+            <!--  -->
+                <a href="../cli/init.html" class="nav-chapters next">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+            <!--  -->
 
         </div>
 

book-example/book/cli/init.html

@@ -24,7 +24,8 @@
                 <h1 class="menu-title"></h1>
             </div>
 
-            <div id="page" class="page">
+            <div class="page">
+                <div id="content" class="content">
                     <h1>The init command</h1>
 <p>The init command, used like this:</p>
 <pre><code>mdbook init
@@ -59,6 +60,22 @@ not create the corresponding files, init command should create the files for him
 </ul>
 
                 </div>
+            </div>
+
+            <!--
+                Doesn't seem to work:  using JavaScript
+                alternative until I find a way to do it in the template
+            -->
+                <a href="../cli/cli-tool.html" class="nav-chapters previous">
+                    <i class="fa fa-angle-left"></i>
+                </a>
+            <!--  -->
+
+            <!--  -->
+                <a href="../cli/build.html" class="nav-chapters next">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+            <!--  -->
 
         </div>
 

book-example/book/index.html

@@ -24,7 +24,8 @@
                 <h1 class="menu-title"></h1>
             </div>
 
-            <div id="page" class="page">
+            <div class="page">
+                <div id="content" class="content">
                     <h1>mdBook</h1>
 <p><strong>mdBook</strong> is a command line tool and Rust library to create books using Markdown.
 It's very similar to Gitbook but written in <a href="http://www.rust-lang.org">Rust</a>.</p>
@@ -35,6 +36,22 @@ Issues and feature requests can be posted on the <a href="https://github.com/aze
 <p>mdBook, all the code and this book, are released under the <a href="https://www.mozilla.org/MPL/2.0/">Mozilla Public License v2.0</a></p>
 
                 </div>
+            </div>
+
+            <!--
+                Doesn't seem to work:  using JavaScript
+                alternative until I find a way to do it in the template
+            -->
+                <a href="" class="nav-chapters previous">
+                    <i class="fa fa-angle-left"></i>
+                </a>
+            <!--  -->
+
+            <!--  -->
+                <a href="cli/cli-tool.html" class="nav-chapters next">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+            <!--  -->
 
         </div>
 

src/book/mdbook.rs

@@ -1,6 +1,6 @@
 use std::path::Path;
 use std::fs::{self, File, metadata};
-use std::io::{self, Write};
+use std::io::Write;
 use std::error::Error;
 
 use {BookConfig, BookItem};

src/renderer/html_handlebars/hbs_navigation_helper.rs

@@ -23,7 +23,7 @@ pub fn previous(c: &Context, _h: &Helper, _: &Handlebars, rc: &mut RenderContext
     // Decode json format
     let decoded: Vec<BTreeMap<String,String>> = json::decode(&chapters.to_string()).unwrap();
 
-    let mut previous = PathBuf::new();
+    let mut previous = PathBuf::from("");
 
     for item in decoded {
 
@@ -56,8 +56,6 @@ pub fn next(c: &Context, _h: &Helper, _: &Handlebars, rc: &mut RenderContext) ->
     let current = c.navigate(rc.get_path(), "path").to_string().replace("\"", "");
     let path_to_root = c.navigate(rc.get_path(), "path_to_root").to_string().replace("\"", "");
 
-    try!(rc.writer.write(path_to_root.as_bytes()));
-
     // Decode json format
     let decoded: Vec<BTreeMap<String,String>> = json::decode(&chapters.to_string()).unwrap();
 
@@ -70,6 +68,7 @@ pub fn next(c: &Context, _h: &Helper, _: &Handlebars, rc: &mut RenderContext) ->
                 if is_current {
                     let mut next = PathBuf::from(path);
                     next.set_extension("html");
+                    try!(rc.writer.write(path_to_root.as_bytes()));
                     try!(rc.writer.write(next.to_str().unwrap().as_bytes()));
                     break;
                 } else if path == &current {

src/renderer/renderer.rs

@@ -1,4 +1,4 @@
-use book::{BookItem, BookItems};
+use book::BookItems;
 use book::BookConfig;
 
 use std::error::Error;

src/theme/book.css

@@ -55,6 +55,15 @@ html, body {
 }
 
 .page {
+    position: absolute;
+    top: 50px;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    overflow-y: auto;
+}
+
+.content {
     margin-left: auto;
     margin-right:auto;
     max-width: 750px;
@@ -136,11 +145,48 @@ pre {
 
 /* Content */
 
-.page a {
+.content a {
     color: #4183c4;
     text-decoration: none;
 }
 
-.page a:hover {
+.content a:hover {
     text-decoration: underline;
 }
+
+/* Nav icons */
+.nav-chapters {
+    color: #CCC;
+    font-size: 40px;
+    text-align: center;
+    text-decoration: none;
+
+    position: absolute;
+    top: 50px; /* Height of menu-bar */
+    bottom: 0;
+    margin: 0;
+    max-width: 150px;
+    min-width: 90px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
+
+    -webkit-transition: color 0.5s; /* Safari */
+    -o-transition: color 0.5s; /* Opera */
+    -moz-transition: color 0.5s; /* Mozilla Firefox */
+    transition: color 0.5s;
+}
+
+.nav-chapters:hover {
+    color: #333;
+    text-decoration: none;
+}
+
+.previous {
+    left: 0;
+}
+
+.next {
+    right: 0;
+}

src/theme/book.js

@@ -14,4 +14,13 @@ $( document ).ready(function() {
         }
     });
 
+
+    // Hide navigation icons when there is no next or previous link
+    // JavaScript Solution until I find a way to do this in the template
+    $(".nav-chapters").each(function(){
+        if(!$(this).attr('href')){
+            this.remove();
+        }
+    });
+
 });

src/theme/index.hbs

@@ -24,9 +24,26 @@
                 <h1 class="menu-title">{{ title }}</h1>
             </div>
 
-            <div id="page" class="page">
+            <div class="page">
+                <div id="content" class="content">
                     {{{ content }}}
                 </div>
+            </div>
+
+            <!--
+                Doesn't seem to work: {{!#if (previous)}} using JavaScript
+                alternative until I find a way to do it in the template
+            -->
+                <a href="{{#previous}}{{/previous}}" class="nav-chapters previous">
+                    <i class="fa fa-angle-left"></i>
+                </a>
+            <!-- {{!/if}} -->
+
+            <!-- {{!#if (next "")}} -->
+                <a href="{{#next}}{{/next}}" class="nav-chapters next">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+            <!-- {{!/if}} -->
 
         </div>