Greatly improve sidebar when width < 700px

This commit is contained in:
Guillaume Gomez 2017-12-06 00:42:33 +01:00
parent 9c49f401fe
commit 71b70feb1f
4 changed files with 71 additions and 6 deletions

View file

@ -65,6 +65,7 @@ r##"<!DOCTYPE html>
{before_content} {before_content}
<nav class="sidebar"> <nav class="sidebar">
<div class="sidebar-menu">&#9776;</div>
{logo} {logo}
{sidebar} {sidebar}
</nav> </nav>

View file

@ -3542,6 +3542,7 @@ impl<'a> fmt::Display for Sidebar<'a> {
let cx = self.cx; let cx = self.cx;
let it = self.item; let it = self.item;
let parentlen = cx.current.len() - if it.is_mod() {1} else {0}; 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() if it.is_struct() || it.is_trait() || it.is_primitive() || it.is_union()
|| it.is_enum() || it.is_mod() || it.is_typedef() || 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 { match it.inner {
clean::StructItem(ref s) => sidebar_struct(fmt, it, s)?, clean::StructItem(ref s) => sidebar_struct(fmt, it, s)?,
clean::TraitItem(ref t) => sidebar_trait(fmt, it, t)?, 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>", write!(fmt, "<script defer src=\"{path}sidebar-items.js\"></script>",
path = relpath)?; path = relpath)?;
} }
if should_close {
// Closes sidebar-elems div.
write!(fmt, "</div>")?;
}
Ok(()) Ok(())
} }

View file

@ -106,6 +106,24 @@
return (elem.offsetParent === null) 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 // used for special search precedence
var TY_PRIMITIVE = itemTypes.indexOf("primitive"); var TY_PRIMITIVE = itemTypes.indexOf("primitive");
@ -130,6 +148,8 @@
} }
function highlightSourceLines(ev) { function highlightSourceLines(ev) {
// If we're in mobile mode, we should add the sidebar in any case.
hideSidebar();
var search = document.getElementById("search"); var search = document.getElementById("search");
var i, from, to, match = window.location.hash.match(/^#?(\d+)(?:-(\d+))?$/); var i, from, to, match = window.location.hash.match(/^#?(\d+)(?:-(\d+))?$/);
if (match) { if (match) {
@ -1459,7 +1479,7 @@
// delayed sidebar rendering. // delayed sidebar rendering.
function initSidebarItems(items) { function initSidebarItems(items) {
var sidebar = document.getElementsByClassName('sidebar')[0]; var sidebar = document.getElementsByClassName('sidebar-elems')[0];
var current = window.sidebarCurrent; var current = window.sidebarCurrent;
function block(shortty, longty) { function block(shortty, longty) {
@ -1829,6 +1849,22 @@
removeClass(search, "hidden"); removeClass(search, "hidden");
search.innerHTML = '<h3 style="text-align: center;">Loading search results...</h3>'; 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 // Sets the focus on the search bar at the top of the page

View file

@ -263,6 +263,10 @@ nav.sub {
width: 100%; width: 100%;
} }
.sidebar-menu {
display: none;
}
.content { .content {
padding: 15px 0; padding: 15px 0;
} }
@ -823,7 +827,7 @@ span.since {
position: static; position: static;
} }
.sidebar .location { .sidebar > .location {
float: right; float: right;
margin: 0px; margin: 0px;
margin-top: 2px; margin-top: 2px;
@ -843,16 +847,33 @@ span.since {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
float: left; float: left;
margin-left: 50px;
}
.sidebar-menu {
position: absolute;
font-size: 2rem;
cursor: pointer;
margin-top: 2px;
display: 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 { nav.sub {
margin: 0 auto; margin: 0 auto;
} }
.sidebar .block {
display: none;
}
.content { .content {
margin-left: 0px; margin-left: 0px;
} }