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

This commit is contained in:
Mathieu David 2015-08-01 14:12:55 +02:00
parent 9d29fdaf42
commit 5b11907a56
13 changed files with 232 additions and 25 deletions

View File

@ -24,8 +24,9 @@
<h1 class="menu-title"></h1>
</div>
<div id="page" class="page">
<h1>mdBook</h1>
<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>
<p>This book serves as an example of the output of mdBook and as the docs at the same time.</p>
@ -34,8 +35,24 @@ Issues and feature requests can be posted on the <a href="https://github.com/aze
<h2>License</h2>
<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>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

View File

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

View File

@ -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();
}
});
});

View File

@ -24,8 +24,9 @@
<h1 class="menu-title"></h1>
</div>
<div id="page" class="page">
<h1>The build command</h1>
<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
</code></pre>
@ -41,8 +42,24 @@ current working directory.</p>
<hr />
<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>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

View File

@ -24,13 +24,30 @@
<h1 class="menu-title"></h1>
</div>
<div id="page" class="page">
<h1>Command Line Tool</h1>
<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>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

View File

@ -24,8 +24,9 @@
<h1 class="menu-title"></h1>
</div>
<div id="page" class="page">
<h1>The init command</h1>
<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
</code></pre>
@ -58,8 +59,24 @@ The user could then tweak the theme to his needs.</li>
not create the corresponding files, init command should create the files for him.</li>
</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>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

View File

@ -24,8 +24,9 @@
<h1 class="menu-title"></h1>
</div>
<div id="page" class="page">
<h1>mdBook</h1>
<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>
<p>This book serves as an example of the output of mdBook and as the docs at the same time.</p>
@ -34,8 +35,24 @@ Issues and feature requests can be posted on the <a href="https://github.com/aze
<h2>License</h2>
<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>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

View File

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

View File

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

View File

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

View File

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

View File

@ -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();
}
});
});

View File

@ -24,10 +24,27 @@
<h1 class="menu-title">{{ title }}</h1>
</div>
<div id="page" class="page">
{{{ content }}}
<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>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>