rollup merge of #21071: sfaxon/mobile-friendly-book

Helps with mobile friendliness of The Rust Book #20850
This commit is contained in:
Alex Crichton 2015-01-15 14:11:40 -08:00
commit ee960afc10
5 changed files with 111 additions and 2 deletions

View File

@ -91,6 +91,7 @@ pub fn render(input: &str, mut output: Path, matches: &getopts::Matches,
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="rustdoc">
<title>{title}</title>

View File

@ -20,6 +20,7 @@ use error::{Error, CliResult, CommandResult};
use book;
use book::{Book, BookItem};
use css;
use javascript;
use regex::Regex;
@ -63,7 +64,7 @@ fn write_toc(book: &Book, path_to_root: &Path, out: &mut Writer) -> IoResult<()>
Ok(())
}
try!(writeln!(out, "<div id='toc'>"));
try!(writeln!(out, "<div id='toc' class='mobile-hidden'>"));
try!(writeln!(out, "<ul class='chapter'>"));
try!(walk_items(&book.chapters[], "", path_to_root, out));
try!(writeln!(out, "</ul>"));
@ -102,6 +103,14 @@ fn render(book: &Book, tgt: &Path) -> CliResult<()> {
let prelude = tmp.path().join("prelude.html");
{
let mut toc = BufferedWriter::new(try!(File::create(&prelude)));
try!(writeln!(&mut toc, r#"<div id="nav">
<button id="toggle-nav">
<span class="sr-only">Toggle navigation</span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</div>"#));
let _ = write_toc(book, &item.path_to_root, &mut toc);
try!(writeln!(&mut toc, "<div id='page-wrapper'>"));
try!(writeln!(&mut toc, "<div id='page'>"));
@ -111,6 +120,7 @@ fn render(book: &Book, tgt: &Path) -> CliResult<()> {
let postlude = tmp.path().join("postlude.html");
{
let mut toc = BufferedWriter::new(try!(File::create(&postlude)));
try!(toc.write_str(javascript::JAVASCRIPT));
try!(writeln!(&mut toc, "</div></div>"));
}

View File

@ -45,7 +45,7 @@ body {
#page {
margin-left: auto;
margin-right:auto;
width: 750px;
max-width: 750px;
}
.chapter {
@ -69,4 +69,58 @@ body {
.chapter li a {
color: #000000;
}
@media only screen and (max-width: 1060px) {
#toc {
width: 100%;
margin-right: 0;
top: 40px;
}
#page-wrapper {
top: 40px;
left: 15px;
padding-right: 15px;
}
.mobile-hidden {
display: none;
}
}
#toggle-nav {
height: 20px;
width: 30px;
padding: 3px 3px 0 3px;
}
#toggle-nav {
margin-top: 5px;
width: 30px;
height: 30px;
background-color: #FFF;
border: 1px solid #666;
border-radius: 3px 3px 3px 3px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.bar {
display: block;
background-color: #000;
border-radius: 2px;
width: 100%;
height: 2px;
margin: 2px 0 3px;
padding: 0;
}
"#;

View File

@ -0,0 +1,43 @@
// Copyright 2015 The Rust Project Developers. See the COPYRIGHT
// file at the top-level directory of this distribution and at
// http://rust-lang.org/COPYRIGHT.
//
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
// option. This file may not be copied, modified, or distributed
// except according to those terms.
// The rust-book JavaScript in string form.
pub static JAVASCRIPT: &'static str = r#"
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("toggle-nav").onclick = toggleNav;
function toggleNav() {
var toc = document.getElementById("toc");
var pagewrapper = document.getElementById("page-wrapper");
toggleClass(toc, "mobile-hidden");
toggleClass(pagewrapper, "mobile-hidden");
};
function toggleClass(el, className) {
// from http://youmightnotneedjquery.com/
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) {
classes.splice(existingIndex, 1);
} else {
classes.push(className);
}
el.className = classes.join(' ');
}
}
});
</script>
"#;

View File

@ -39,6 +39,7 @@ mod serve;
mod test;
mod css;
mod javascript;
#[cfg(not(test))] // thanks #12327
fn main() {