Fix sidebar on ios

This commit is contained in:
Guillaume Gomez
2017-12-20 00:44:44 +01:00
parent b39c4bc123
commit 7f5c2f9249
3 changed files with 50 additions and 10 deletions

View File

@@ -109,24 +109,32 @@
function showSidebar() { function showSidebar() {
var elems = document.getElementsByClassName("sidebar-elems")[0]; var elems = document.getElementsByClassName("sidebar-elems")[0];
if (elems) { if (elems) {
elems.style.display = "block"; addClass(elems, "show-it");
} }
var sidebar = document.getElementsByClassName('sidebar')[0]; var sidebar = document.getElementsByClassName('sidebar')[0];
sidebar.style.position = 'fixed'; if (sidebar) {
sidebar.style.width = '100%'; addClass(sidebar, 'mobile');
sidebar.style.marginLeft = '0'; var filler = document.getElementById("sidebar-filler");
if (!filler) {
var div = document.createElement("div");
div.id = "sidebar-filler";
sidebar.appendChild(div);
}
}
document.getElementsByTagName("body")[0].style.marginTop = '45px'; document.getElementsByTagName("body")[0].style.marginTop = '45px';
} }
function hideSidebar() { function hideSidebar() {
var elems = document.getElementsByClassName("sidebar-elems")[0]; var elems = document.getElementsByClassName("sidebar-elems")[0];
if (elems) { if (elems) {
elems.style.display = ""; removeClass(elems, "show-it");
} }
var sidebar = document.getElementsByClassName('sidebar')[0]; var sidebar = document.getElementsByClassName('sidebar')[0];
sidebar.style.position = ''; removeClass(sidebar, 'mobile');
sidebar.style.width = ''; var filler = document.getElementById("sidebar-filler");
sidebar.style.marginLeft = ''; if (filler) {
filler.remove();
}
document.getElementsByTagName("body")[0].style.marginTop = ''; document.getElementsByTagName("body")[0].style.marginTop = '';
} }
@@ -1859,7 +1867,7 @@
if (sidebar_menu) { if (sidebar_menu) {
sidebar_menu.onclick = function() { sidebar_menu.onclick = function() {
var sidebar = document.getElementsByClassName('sidebar')[0]; var sidebar = document.getElementsByClassName('sidebar')[0];
if (sidebar.style.position === "fixed") { if (hasClass(sidebar, "mobile") === true) {
hideSidebar(); hideSidebar();
} else { } else {
showSidebar(); showSidebar();

View File

@@ -1020,6 +1020,33 @@ h4 > .important-traits {
#titles { #titles {
height: 50px; height: 50px;
} }
.sidebar.mobile {
position: fixed;
width: 100%;
margin-left: 0;
background-color: rgba(0,0,0,0);
height: 100%;
}
.show-it {
display: block;
}
/* Because of ios, we need to actually have a full height sidebar title so the
* actual sidebar can show up. But then we need to make it transparent so we don't
* hide content. The filler just allows to create the background for the sidebar
* title. But because of the absolute position, I had to lower the z-index.
*/
#sidebar-filler {
position: fixed;
left: 45px;
width: calc(100% - 45px);
top: 0;
height: 45px;
z-index: -1;
border-bottom: 1px solid;
}
} }

View File

@@ -191,7 +191,7 @@ a.test-arrow {
#help > div { #help > div {
background: #e9e9e9; background: #e9e9e9;
border-color: #bfbfbf;; border-color: #bfbfbf;
} }
#help dt { #help dt {
@@ -342,4 +342,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
background-color: #F1F1F1; background-color: #F1F1F1;
border-right-color: #000; border-right-color: #000;
} }
#sidebar-filler {
background-color: #F1F1F1;
border-bottom-color: #e0e0e0;
}
} }