Rollup merge of #46861 - GuillaumeGomez:fix-ios-sidebar, r=QuietMisdreavus

Fix sidebar on ios

r? @QuietMisdreavus

Author: GuillaumeGomez

src/librustdoc/html/static/main.js

@@ -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();

src/librustdoc/html/static/rustdoc.css

@@ -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;
+	}
 }
 
 

src/librustdoc/html/static/styles/main.css

@@ -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;
+	}
 }