提交 7f5c2f92 编写于 作者: G Guillaume Gomez

Fix sidebar on ios

上级 b39c4bc1
......@@ -109,24 +109,32 @@
function showSidebar() {
var elems = document.getElementsByClassName("sidebar-elems")[0];
if (elems) {
elems.style.display = "block";
addClass(elems, "show-it");
}
var sidebar = document.getElementsByClassName('sidebar')[0];
sidebar.style.position = 'fixed';
sidebar.style.width = '100%';
sidebar.style.marginLeft = '0';
if (sidebar) {
addClass(sidebar, 'mobile');
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';
}
function hideSidebar() {
var elems = document.getElementsByClassName("sidebar-elems")[0];
if (elems) {
elems.style.display = "";
removeClass(elems, "show-it");
}
var sidebar = document.getElementsByClassName('sidebar')[0];
sidebar.style.position = '';
sidebar.style.width = '';
sidebar.style.marginLeft = '';
removeClass(sidebar, 'mobile');
var filler = document.getElementById("sidebar-filler");
if (filler) {
filler.remove();
}
document.getElementsByTagName("body")[0].style.marginTop = '';
}
......@@ -1859,7 +1867,7 @@
if (sidebar_menu) {
sidebar_menu.onclick = function() {
var sidebar = document.getElementsByClassName('sidebar')[0];
if (sidebar.style.position === "fixed") {
if (hasClass(sidebar, "mobile") === true) {
hideSidebar();
} else {
showSidebar();
......
......@@ -1020,6 +1020,33 @@ h4 > .important-traits {
#titles {
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 {
background: #e9e9e9;
border-color: #bfbfbf;;
border-color: #bfbfbf;
}
#help dt {
......@@ -342,4 +342,9 @@ pre.ignore:hover, .information:hover + pre.ignore {
background-color: #F1F1F1;
border-right-color: #000;
}
#sidebar-filler {
background-color: #F1F1F1;
border-bottom-color: #e0e0e0;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册