Fix sidebar on ios
This commit is contained in:
@@ -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();
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user