Added navigation icons + javascript code to hide them when there is no previous or next. Closes #12
This commit is contained in:
Mathieu David
parent
9d29fdaf42
commit
5b11907a56
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
|
|
|||
|
|
@ -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 == ¤t {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
use book::{BookItem, BookItems};
|
||||
use book::BookItems;
|
||||
use book::BookConfig;
|
||||
|
||||
use std::error::Error;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue