Move theme picker to the right with the other buttons

rust-lang · Mar 4, 2022 · d955a6a · d955a6a
1 parent 8c9c796
commit d955a6a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
@@ -791,7 +791,13 @@ nav.main .separator {
 	margin: 0 20px;
 }
 nav.sum { text-align: right; }
-nav.sub form { display: inline; }
+nav.sub form {
+	flex-grow: 1;
+}
+
+nav.sub form input {
+	height: 100%;
+}
 
 a {
 	text-decoration: none;
@@ -883,6 +889,7 @@ table,
 	position: relative;
 	display: flex;
 	height: 34px;
+	width: 100%;
 }
 .search-container > * {
 	height: 100%;
@@ -1379,16 +1386,13 @@ pre.rust {
 }
 
 .theme-picker {
-	position: absolute;
-	left: -38px;
-	top: 4px;
+	position: relative;
 }
-
 .theme-picker button {
 	outline: none;
 }
 
-#settings-menu, #help-button {
+#settings-menu, #help-button, .theme-picker {
 	margin-left: 4px;
 	outline: none;
 }
@@ -1425,7 +1429,7 @@ pre.rust {
 	display: none;
 	position: absolute;
 	left: 0;
-	top: 28px;
+	top: 31px;
 	border: 1px solid;
 	border-radius: 3px;
 	z-index: 1;
@@ -1832,7 +1836,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	}
 
 	/* Space is at a premium on mobile, so remove the theme-picker icon. */
-	#theme-picker {
+	.theme-picker {
 		display: none;
 		width: 0;
 	}

diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
@@ -108,15 +108,8 @@ <h2 class="location"></h2>
                     {%- endif -%}
                 </a> {#- -#}
                 <nav class="sub"> {#- -#}
-                    <div class="theme-picker"> {#- -#}
-                        <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
-                            <img width="22" height="22" alt="Pick another theme!" {# -#}
-                             src="{{static_root_path|safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
-                        </button> {#- -#}
-                        <div id="theme-choices" role="menu"></div> {#- -#}
-                    </div> {#- -#}
-                    <form class="search-form"> {#- -#}
-                        <div class="search-container"> {#- -#}
+                    <div class="search-container"> {#- -#}
+                        <form class="search-form"> {#- -#}
                             <span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
                             <input {# -#}
                                 class="search-input" {# -#}
@@ -125,13 +118,20 @@ <h2 class="location"></h2>
                                 spellcheck="false" {# -#}
                                 placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
                                 type="search"> {#- -#}
-                            <button type="button" id="help-button" title="help">?</button> {#- -#}
-                            <a id="settings-menu" href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
-                                <img width="22" height="22" alt="Change settings" {# -#}
-                                     src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
-                            </a> {#- -#}
+                        </form> {#- -#}
+                        <button type="button" id="help-button" title="help">?</button> {#- -#}
+                        <div class="theme-picker"> {#- -#}
+                            <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
+                                <img width="22" height="22" alt="Pick another theme!" {# -#}
+                                 src="{{static_root_path|safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
+                            </button> {#- -#}
+                            <div id="theme-choices" role="menu"></div> {#- -#}
                         </div> {#- -#}
-                    </form> {#- -#}
+                        <a id="settings-menu" href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
+                            <img width="22" height="22" alt="Change settings" {# -#}
+                                 src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+                        </a> {#- -#}
+                    </div> {#- -#}
                 </nav> {#- -#}
             </div> {#- -#}
             <section id="main-content" class="content">{{- content|safe -}}</section> {#- -#}