Greatly improve sidebar when width < 700px

GuillaumeGomez · GuillaumeGomez · commit 71b70feb1ffa · 2017-12-07T22:42:46.000+01:00
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,24 @@
         return (elem.offsetParent === null)
     }
 
+    function showSidebar() {
+        document.getElementsByClassName("sidebar-elems")[0].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() {
+        document.getElementsByClassName("sidebar-elems")[0].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 +148,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 +1479,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 +1849,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;
 }
@@ -823,7 +827,7 @@ span.since {
 		position: static;
 	}
 
-	.sidebar .location {
+	.sidebar > .location {
 		float: right;
 		margin: 0px;
 		margin-top: 2px;
@@ -843,16 +847,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;
 	}

Original file line number	Diff line number	Diff line change
`@@ -3542,6 +3542,7 @@ impl<'a> fmt::Display for Sidebar<'a> {`
`3542`	`3542`	`let cx = self.cx;`
`3543`	`3543`	`let it = self.item;`
`3544`	`3544`	`let parentlen = cx.current.len() - if it.is_mod() {1} else {0};`
	`3545`	`+ let mut should_close = false;`
`3545`	`3546`
`3546`	`3547`	`if it.is_struct() \|\| it.is_trait() \|\| it.is_primitive() \|\| it.is_union()`
`3547`	`3548`	`\|\| it.is_enum() \|\| it.is_mod() \|\| it.is_typedef()`
`@@ -3575,6 +3576,8 @@ impl<'a> fmt::Display for Sidebar<'a> {`
`3575`	`3576`	`}`
`3576`	`3577`	`}`
`3577`	`3578`
	`3579`	`+ write!(fmt, "<div class=\"sidebar-elems\">")?;`
	`3580`	`+ should_close = true;`
`3578`	`3581`	`match it.inner {`
`3579`	`3582`	`clean::StructItem(ref s) => sidebar_struct(fmt, it, s)?,`
`3580`	`3583`	`clean::TraitItem(ref t) => sidebar_trait(fmt, it, t)?,`
`@@ -3625,6 +3628,10 @@ impl<'a> fmt::Display for Sidebar<'a> {`
`3625`	`3628`	`write!(fmt, "<script defer src=\"{path}sidebar-items.js\"></script>",`
`3626`	`3629`	`path = relpath)?;`
`3627`	`3630`	`}`
	`3631`	`+ if should_close {`
	`3632`	`+ // Closes sidebar-elems div.`
	`3633`	`+ write!(fmt, "</div>")?;`
	`3634`	`+ }`
`3628`	`3635`
`3629`	`3636`	`Ok(())`
`3630`	`3637`	`}`