Rollup merge of #46526 - GuillaumeGomez:mobile-sidebar, r=QuietMisdre…

…avus Greatly improve sidebar when width < 700px Fixes #36531. r? @QuietMisdreavus A few screenshots: <img width="1440" alt="screen shot 2017-12-06 at 00 41 36" src="https://user-images.githubusercontent.com/3050060/33636875-6ad8b1a6-da1e-11e7-8d5b-d6d530ea5258.png"> <img width="1440" alt="screen shot 2017-12-06 at 00 41 40" src="https://user-images.githubusercontent.com/3050060/33636876-6af58196-da1e-11e7-82ab-b82768958037.png">
rust-lang · Dec 7, 2017 · 1b7ea6d · 1b7ea6d
2 parents 14f2bc0 + 423e5ac
commit 1b7ea6d
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 5 deletions.
diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
@@ -65,6 +65,7 @@ r##"<!DOCTYPE html>
     {before_content}
 
     <nav class="sidebar">
+        <div class="sidebar-menu">&#9776;</div>
         {logo}
         {sidebar}
     </nav>

diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
@@ -3542,6 +3542,7 @@ impl<'a> fmt::Display for Sidebar<'a> {
         let cx = self.cx;
         let it = self.item;
         let parentlen = cx.current.len() - if it.is_mod() {1} else {0};
+        let mut should_close = false;
 
         if it.is_struct() || it.is_trait() || it.is_primitive() || it.is_union()
             || it.is_enum() || it.is_mod() || it.is_typedef()
@@ -3575,6 +3576,8 @@ impl<'a> fmt::Display for Sidebar<'a> {
                 }
             }
 
+            write!(fmt, "<div class=\"sidebar-elems\">")?;
+            should_close = true;
             match it.inner {
                 clean::StructItem(ref s) => sidebar_struct(fmt, it, s)?,
                 clean::TraitItem(ref t) => sidebar_trait(fmt, it, t)?,
@@ -3625,6 +3628,10 @@ impl<'a> fmt::Display for Sidebar<'a> {
             write!(fmt, "<script defer src=\"{path}sidebar-items.js\"></script>",
                    path = relpath)?;
         }
+        if should_close {
+            // Closes sidebar-elems div.
+            write!(fmt, "</div>")?;
+        }
 
         Ok(())
     }

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
@@ -106,6 +106,30 @@
         return (elem.offsetParent === null)
     }
 
+    function showSidebar() {
+        var elems = document.getElementsByClassName("sidebar-elems")[0];
+        if (elems) {
+            elems.style.display = "block";
+        }
+        var sidebar = document.getElementsByClassName('sidebar')[0];
+        sidebar.style.position = 'fixed';
+        sidebar.style.width = '100%';
+        sidebar.style.marginLeft = '0';
+        document.getElementsByTagName("body")[0].style.marginTop = '45px';
+    }
+
+    function hideSidebar() {
+        var elems = document.getElementsByClassName("sidebar-elems")[0];
+        if (elems) {
+            elems.style.display = "";
+        }
+        var sidebar = document.getElementsByClassName('sidebar')[0];
+        sidebar.style.position = '';
+        sidebar.style.width = '';
+        sidebar.style.marginLeft = '';
+        document.getElementsByTagName("body")[0].style.marginTop = '';
+    }
+
     // used for special search precedence
     var TY_PRIMITIVE = itemTypes.indexOf("primitive");
 
@@ -130,6 +154,8 @@
     }
 
     function highlightSourceLines(ev) {
+        // If we're in mobile mode, we should add the sidebar in any case.
+        hideSidebar();
         var search = document.getElementById("search");
         var i, from, to, match = window.location.hash.match(/^#?(\d+)(?:-(\d+))?$/);
         if (match) {
@@ -1459,7 +1485,7 @@
 
     // delayed sidebar rendering.
     function initSidebarItems(items) {
-        var sidebar = document.getElementsByClassName('sidebar')[0];
+        var sidebar = document.getElementsByClassName('sidebar-elems')[0];
         var current = window.sidebarCurrent;
 
         function block(shortty, longty) {
@@ -1829,6 +1855,22 @@
         removeClass(search, "hidden");
         search.innerHTML = '<h3 style="text-align: center;">Loading search results...</h3>';
     }
+
+    var sidebar_menu = document.getElementsByClassName("sidebar-menu")[0];
+    if (sidebar_menu) {
+        sidebar_menu.onclick = function() {
+            var sidebar = document.getElementsByClassName('sidebar')[0];
+            if (sidebar.style.position === "fixed") {
+                hideSidebar();
+            } else {
+                showSidebar();
+            }
+        };
+    }
+
+    window.onresize = function() {
+        hideSidebar();
+    };
 }());
 
 // Sets the focus on the search bar at the top of the page

diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
@@ -263,6 +263,10 @@ nav.sub {
 	width: 100%;
 }
 
+.sidebar-menu {
+	display: none;
+}
+
 .content {
 	padding: 15px 0;
 }
@@ -820,7 +824,7 @@ span.since {
 		position: static;
 	}
 
-	.sidebar .location {
+	.sidebar > .location {
 		float: right;
 		margin: 0px;
 		margin-top: 2px;
@@ -840,16 +844,33 @@ span.since {
 		margin-top: 5px;
 		margin-bottom: 5px;
 		float: left;
+		margin-left: 50px;
 	}
 
-	nav.sub {
-		margin: 0 auto;
+	.sidebar-menu {
+		position: absolute;
+		font-size: 2rem;
+		cursor: pointer;
+		margin-top: 2px;
+		display: block;
 	}
 
-	.sidebar .block {
+	.sidebar-elems {
+		background-color: #F1F1F1;
+		position: fixed;
+		z-index: 1;
+		left: 0;
+		top: 45px;
+		bottom: 0;
+		overflow-y: auto;
+		border-right: 1px solid #000;
 		display: none;
 	}
 
+	nav.sub {
+		margin: 0 auto;
+	}
+
 	.content {
 		margin-left: 0px;
 	}