Greatly improve sidebar when width < 700px
This commit is contained in:
parent
9c49f401fe
commit
71b70feb1f
4 changed files with 71 additions and 6 deletions
|
@ -65,6 +65,7 @@ r##"<!DOCTYPE html>
|
||||||
{before_content}
|
{before_content}
|
||||||
|
|
||||||
<nav class="sidebar">
|
<nav class="sidebar">
|
||||||
|
<div class="sidebar-menu">☰</div>
|
||||||
{logo}
|
{logo}
|
||||||
{sidebar}
|
{sidebar}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -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(())
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue