Make the Rust Book more mobile friendly

author: Seth Faxon <seth.faxon@gmail.com> 2015-01-12 16:51:31 -0800
committer: Seth Faxon <seth.faxon@gmail.com> 2015-01-13 09:41:26 -0800
commit: 9af8a646a964985fe42a91ea34672266c91ae295 (patch)
tree: a51757aa155dafe7f28be7e5b73b36532c4b5c5d
parent: 3d5fbae33897a8340542f21b6ded913148ca9199 (diff)
5 files changed, 111 insertions, 2 deletions
diff --git a/src/librustdoc/markdown.rs b/src/librustdoc/markdown.rs
index ab9c4ef9422..dc98a56eb1a 100644
--- a/src/librustdoc/markdown.rs
+++ b/src/librustdoc/markdown.rs
@@ -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>
 
diff --git a/src/rustbook/build.rs b/src/rustbook/build.rs
index 44b1630d9fb..50a6ad43aee 100644
--- a/src/rustbook/build.rs
+++ b/src/rustbook/build.rs
@@ -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>"));
         }
 
diff --git a/src/rustbook/css.rs b/src/rustbook/css.rs
index 92433589155..65ba031a2d6 100644
--- a/src/rustbook/css.rs
+++ b/src/rustbook/css.rs
@@ -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;
+}
+
 "#;
diff --git a/src/rustbook/javascript.rs b/src/rustbook/javascript.rs
new file mode 100644
index 00000000000..eb4401e1835
--- /dev/null
+++ b/src/rustbook/javascript.rs
@@ -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>
+"#;
diff --git a/src/rustbook/main.rs b/src/rustbook/main.rs
index 48dad14321a..85b9a7d79db 100644
--- a/src/rustbook/main.rs
+++ b/src/rustbook/main.rs
@@ -39,6 +39,7 @@ mod serve;
 mod test;
 
 mod css;
+mod javascript;
 
 #[cfg(not(test))] // thanks #12327
 fn main() {
author	Seth Faxon <seth.faxon@gmail.com>	2015-01-12 16:51:31 -0800
committer	Seth Faxon <seth.faxon@gmail.com>	2015-01-13 09:41:26 -0800
commit	9af8a646a964985fe42a91ea34672266c91ae295 (patch)
tree	a51757aa155dafe7f28be7e5b73b36532c4b5c5d
parent	3d5fbae33897a8340542f21b6ded913148ca9199 (diff)