rustdoc: use flexbox to layout sidebar and main content

3 files changed, 80 insertions, 81 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index fceb508bc4f..6135038a404 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -111,7 +111,6 @@ body {
 	font: 16px/1.4 "Source Serif 4", NanumBarunGothic, serif;
 	margin: 0;
 	position: relative;
-	padding: 10px 15px 20px 15px;
 
 	-webkit-font-feature-settings: "kern", "liga";
 	-moz-font-feature-settings: "kern", "liga";
@@ -248,6 +247,25 @@ textarea {
 
 /* end tweaks for normalize.css 8 */
 
+.rustdoc {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+}
+
+main {
+	position: relative;
+	flex-grow: 1;
+	padding: 10px 15px 40px 45px;
+	height: 100vh;
+	overflow-y: auto;
+}
+
+.main-inner {
+	max-width: 960px;
+	margin-right: auto;
+}
+
 details:not(.rustdoc-toggle) summary {
 	margin-bottom: .6em;
 }
@@ -298,15 +316,13 @@ nav.sub {
 
 .sidebar {
 	width: 200px;
-	position: fixed;
-	left: 0;
-	top: 0;
-	bottom: 0;
 	overflow-y: scroll;
 }
 
 .rustdoc.source .sidebar {
 	overflow-y: auto;
+	min-width: 200px;
+	height: 100vh;
 }
 
 /* Improve the scrollbar display on firefox */
@@ -332,10 +348,6 @@ nav.sub {
 	margin-right: -10px;
 }
 
-.content, nav {
-	max-width: 960px;
-}
-
 /* Everything else */
 
 .hidden {
@@ -439,10 +451,6 @@ nav.sub {
 	display: none;
 }
 
-.content {
-	padding: 15px 0;
-}
-
 .source .content pre.rust {
 	white-space: pre;
 	overflow: auto;
@@ -487,7 +495,6 @@ nav.sub {
 }
 
 #search {
-	margin-left: 230px;
 	position: relative;
 }
 
@@ -707,7 +714,7 @@ nav.sub {
 nav:not(.sidebar) {
 	border-bottom: 1px solid;
 	padding-bottom: 10px;
-	margin-bottom: 10px;
+	margin-bottom: 25px;
 }
 nav.main {
 	padding: 20px 0;
@@ -726,10 +733,6 @@ nav.main .separator {
 nav.sum { text-align: right; }
 nav.sub form { display: inline; }
 
-nav.sub, .content {
-	margin-left: 230px;
-}
-
 a {
 	text-decoration: none;
 	background: transparent;
@@ -1354,7 +1357,7 @@ pre.rust {
 
 .theme-picker {
 	position: absolute;
-	left: 211px;
+	left: 11px;
 	top: 19px;
 }
 
@@ -1653,11 +1656,23 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding-top: 0px;
 	}
 
+	main {
+		height: auto;
+		padding-left: 15px;
+		padding-top: 0px;
+		overflow-y: visible;
+	}
+
+	.rustdoc {
+		flex-direction: column;
+	}
+
 	.rustdoc > .sidebar {
+		width: 100%;
 		height: 45px;
 		min-height: 40px;
+		max-height: 45px;
 		margin: 0;
-		margin-left: -15px;
 		padding: 0 15px;
 		position: static;
 		z-index: 11;
@@ -1748,20 +1763,17 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 
 	nav.sub {
 		width: calc(100% - 32px);
-		float: right;
+		margin-left: 32px;
+		margin-bottom: 10px;
 	}
 
 	.content {
 		margin-left: 0px;
 	}
 
-	#main, #search {
-		margin-top: 45px;
-		padding: 0;
-	}
-
 	#search {
 		margin-left: 0;
+		padding: 0;
 	}
 
 	.anchor {
@@ -1770,7 +1782,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 
 	.theme-picker {
 		left: 10px;
-		top: 54px;
+		top: 9px;
 		z-index: 1;
 	}
 
@@ -1790,22 +1802,12 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	}
 
 	.sidebar.mobile {
-		position: fixed;
+		position: sticky;
+		top: 0;
+		left: 0;
 		width: 100%;
 		margin-left: 0;
 		background-color: rgba(0,0,0,0);
-		height: 100%;
-	}
-	/*
-	This allows to prevent the version text to overflow the sidebar title on mobile mode when the
-	sidebar is displayed (after clicking on the "hamburger" button).
-	*/
-	.sidebar.mobile > div.version {
-		overflow: hidden;
-		max-height: 33px;
-	}
-	.sidebar {
-		width: calc(100% + 30px);
 	}
 
 	.show-it, .sidebar-elems:focus-within {
@@ -1920,13 +1922,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		height: 73px;
 	}
 
-	/* This is to prevent the search bar from being underneath the <section>
-	 * element following it.
-	 */
-	#main, #search {
-		margin-top: 100px;
-	}
-
 	#main > table:not(.table-display) td {
 		word-break: break-word;
 		width: 50%;
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index 5661d497334..abf6126599b 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -1001,7 +1001,7 @@ function hideThemeButtonState() {
         container.appendChild(rustdoc_version);
 
         popup.appendChild(container);
-        insertAfter(popup, searchState.outputElement());
+        insertAfter(popup, document.querySelector("main"));
         // So that it's only built once and then it'll do nothing when called!
         buildHelperPopup = function() {};
     };
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index 2a783c6da57..fb4133eca4c 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -81,39 +81,43 @@
         </a> {#- -#}
         {{- sidebar | safe -}}
     </nav> {#- -#}
-    <div class="theme-picker"> {#- -#}
-        <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
-            <img width="18" height="18" alt="Pick another theme!" {# -#}
-             src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
-        </button> {#- -#}
-        <div id="theme-choices" role="menu"></div> {#- -#}
-    </div> {#- -#}
-    <nav class="sub"> {#- -#}
-        <form class="search-form"> {#- -#}
-            <div class="search-container"> {#- -#}
-                <div>{%- if layout.generate_search_filter -%}
-                    <select id="crate-search"> {#- -#}
-                        <option value="All crates">All crates</option> {#- -#}
-                    </select> {#- -#}
-                    {%- endif -%}
-                    <input {# -#}
-                        class="search-input" {# -#}
-                        name="search" {# -#}
-                        autocomplete="off" {# -#}
-                        spellcheck="false" {# -#}
-                        placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
-                        type="search"> {#- -#}
-                </div> {#- -#}
-                <button type="button" id="help-button" title="help">?</button> {#- -#}
-                <a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
-                    <img width="18" height="18" alt="Change settings" {# -#}
-                         src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
-                </a> {#- -#}
+    <main> {#- -#}
+        <div class="main-inner"> {#- -#}
+            <div class="theme-picker"> {#- -#}
+                <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
+                    <img width="18" height="18" alt="Pick another theme!" {# -#}
+                     src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
+                </button> {#- -#}
+                <div id="theme-choices" role="menu"></div> {#- -#}
             </div> {#- -#}
-        </form> {#- -#}
-    </nav> {#- -#}
-    <section id="main" class="content">{{- content | safe -}}</section> {#- -#}
-    <section id="search" class="content hidden"></section> {#- -#}
+            <nav class="sub"> {#- -#}
+                <form class="search-form"> {#- -#}
+                    <div class="search-container"> {#- -#}
+                        <div>{%- if layout.generate_search_filter -%}
+                            <select id="crate-search"> {#- -#}
+                                <option value="All crates">All crates</option> {#- -#}
+                            </select> {#- -#}
+                            {%- endif -%}
+                            <input {# -#}
+                                class="search-input" {# -#}
+                                name="search" {# -#}
+                                autocomplete="off" {# -#}
+                                spellcheck="false" {# -#}
+                                placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
+                                type="search"> {#- -#}
+                        </div> {#- -#}
+                        <button type="button" id="help-button" title="help">?</button> {#- -#}
+                        <a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
+                            <img width="18" height="18" alt="Change settings" {# -#}
+                                 src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+                        </a> {#- -#}
+                    </div> {#- -#}
+                </form> {#- -#}
+            </nav> {#- -#}
+            <section id="main" class="content">{{- content | safe -}}</section> {#- -#}
+            <section id="search" class="content hidden"></section> {#- -#}
+        </div> {#- -#}
+    </main> {#- -#}
     {{- layout.external_html.after_content | safe -}}
     <div id="rustdoc-vars" {# -#}
          data-root-path="{{page.root_path | safe}}" {# -#}