Skip to content

Commit 325e920

Browse files
Dylan-DPCDylan-DPC
authored
Rollup merge of rust-lang#103321 - notriddle:notriddle/source-page-top-bar-layout, r=GuillaumeGomez
rustdoc: improve appearance of source page navigation bar This commit changes things so that the search bar is exactly centered between the top of the page and the top of the source code content area. Preview: https://notriddle.com/notriddle-rustdoc-demos/source-page-header/src/std/lib.rs.html ## Before ![image](https://user-images.githubusercontent.com/1593513/197053420-02a64627-48ed-4bb6-9363-a1863d47b092.png) ## After ![image](https://user-images.githubusercontent.com/1593513/197053355-bd6149f9-0f5c-47da-aeb7-590b5eecb5da.png)
2 parents 3055eb9 + f6dd470 commit 325e920

File tree

6 files changed

+72
-52
lines changed

6 files changed

+72
-52
lines changed

Diff for: ‎src/librustdoc/html/static/css/noscript.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ rules.
1414
display: none;
1515
}
1616

17-
.sub {
17+
nav.sub {
1818
/* The search bar and related controls don't work without JS */
1919
display: none;
2020
}

Diff for: ‎src/librustdoc/html/static/css/rustdoc.css

+19-19
Original file line numberDiff line numberDiff line change
@@ -365,15 +365,8 @@ img {
365365
overflow: visible;
366366
}
367367

368-
.sub-container {
369-
display: flex;
370-
flex-direction: row;
371-
flex-wrap: nowrap;
372-
}
373-
374368
.sub-logo-container {
375-
display: block;
376-
margin-right: 20px;
369+
line-height: 0;
377370
}
378371

379372
.sub-logo-container > img {
@@ -696,14 +689,21 @@ pre, .rustdoc.source .example-wrap {
696689
}
697690

698691
nav.sub {
699-
position: relative;
700692
flex-grow: 1;
701-
margin-bottom: 25px;
693+
flex-flow: row nowrap;
694+
margin: 4px 0 25px 0;
695+
display: flex;
696+
align-items: center;
697+
}
698+
nav.sub form {
699+
flex-grow: 1;
702700
}
703701
.source nav.sub {
702+
margin: 0 0 15px 0;
703+
}
704+
.source nav.sub form {
704705
margin-left: 32px;
705706
}
706-
nav.sub form { display: inline; }
707707

708708
a {
709709
text-decoration: none;
@@ -796,7 +796,6 @@ table,
796796
position: relative;
797797
display: flex;
798798
height: 34px;
799-
margin-top: 4px;
800799
}
801800
.search-results-title {
802801
margin-top: 0;
@@ -1822,10 +1821,6 @@ in storage.js
18221821
margin-left: 0px;
18231822
}
18241823

1825-
.source .content {
1826-
margin-top: 10px;
1827-
}
1828-
18291824
.anchor {
18301825
display: none !important;
18311826
}
@@ -1934,6 +1929,11 @@ in storage.js
19341929
.impl-items > .item-info {
19351930
margin-left: 34px;
19361931
}
1932+
1933+
.source nav.sub {
1934+
margin: 0;
1935+
padding: 8px;
1936+
}
19371937
}
19381938

19391939
@media print {
@@ -1962,12 +1962,12 @@ in storage.js
19621962
overflow-wrap: anywhere;
19631963
}
19641964

1965-
.sub-container {
1965+
nav.sub {
19661966
flex-direction: column;
19671967
}
19681968

1969-
.sub-logo-container {
1970-
align-self: center;
1969+
nav.sub form {
1970+
align-self: stretch;
19711971
}
19721972

19731973
.sub-logo-container > img {

Diff for: ‎src/librustdoc/html/templates/page.html

+22-24
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ <h2></h2> {#- -#}
102102
</nav> {#- -#}
103103
<main> {#- -#}
104104
<div class="width-limiter"> {#- -#}
105-
<div class="sub-container"> {#- -#}
105+
<nav class="sub"> {#- -#}
106106
{%- if page.css_class == "source" -%}
107107
<a class="sub-logo-container" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
108108
{%- if !layout.logo.is_empty() %}
@@ -112,30 +112,28 @@ <h2></h2> {#- -#}
112112
{%- endif -%}
113113
</a> {#- -#}
114114
{%- endif -%}
115-
<nav class="sub"> {#- -#}
116-
<form class="search-form"> {#- -#}
117-
<div class="search-container"> {#- -#}
118-
<span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
119-
<input {# -#}
120-
class="search-input" {# -#}
121-
name="search" {# -#}
122-
autocomplete="off" {# -#}
123-
spellcheck="false" {# -#}
124-
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
125-
type="search"> {#- -#}
126-
<div id="help-button" title="help" tabindex="-1"> {#- -#}
127-
<a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
128-
</div> {#- -#}
129-
<div id="settings-menu" tabindex="-1"> {#- -#}
130-
<a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
131-
<img width="22" height="22" alt="Change settings" {# -#}
132-
src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
133-
</a> {#- -#}
134-
</div> {#- -#}
115+
<form class="search-form"> {#- -#}
116+
<div class="search-container"> {#- -#}
117+
<span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
118+
<input {# -#}
119+
class="search-input" {# -#}
120+
name="search" {# -#}
121+
autocomplete="off" {# -#}
122+
spellcheck="false" {# -#}
123+
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
124+
type="search"> {#- -#}
125+
<div id="help-button" title="help" tabindex="-1"> {#- -#}
126+
<a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
135127
</div> {#- -#}
136-
</form> {#- -#}
137-
</nav> {#- -#}
138-
</div> {#- -#}
128+
<div id="settings-menu" tabindex="-1"> {#- -#}
129+
<a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
130+
<img width="22" height="22" alt="Change settings" {# -#}
131+
src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
132+
</a> {#- -#}
133+
</div> {#- -#}
134+
</div> {#- -#}
135+
</form> {#- -#}
136+
</nav> {#- -#}
139137
<section id="main-content" class="content">{{- content|safe -}}</section> {#- -#}
140138
</div> {#- -#}
141139
</main> {#- -#}

Diff for: ‎src/test/rustdoc-gui/help-page.goml

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ wait-for: "#help"
55
assert-css: ("#help", {"display": "block"})
66
click: "#help-button > a"
77
assert-css: ("#help", {"display": "block"})
8-
compare-elements-property: (".sub-container", "#help", ["offsetWidth"])
9-
compare-elements-position: (".sub-container", "#help", ("x"))
8+
compare-elements-property: (".sub", "#help", ["offsetWidth"])
9+
compare-elements-position: (".sub", "#help", ("x"))
1010
size: (500, 1000) // Try mobile next.
1111
assert-css: ("#help", {"display": "block"})
12-
compare-elements-property: (".sub-container", "#help", ["offsetWidth"])
13-
compare-elements-position: (".sub-container", "#help", ("x"))
12+
compare-elements-property: (".sub", "#help", ["offsetWidth"])
13+
compare-elements-position: (".sub", "#help", ("x"))
1414

1515
// This test ensures that opening the help popover without switching pages works.
1616
goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
@@ -20,5 +20,5 @@ click: "#help-button > a"
2020
assert-css: ("#help", {"display": "block"})
2121
click: "#help-button > a"
2222
assert-css: ("#help", {"display": "none"})
23-
compare-elements-property-false: (".sub-container", "#help", ["offsetWidth"])
24-
compare-elements-position-false: (".sub-container", "#help", ("x"))
23+
compare-elements-property-false: (".sub", "#help", ["offsetWidth"])
24+
compare-elements-position-false: (".sub", "#help", ("x"))

Diff for: ‎src/test/rustdoc-gui/settings.goml

+1-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ assert-css: (
147147
)
148148

149149
assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
150-
compare-elements-position: (".sub-container", "#settings", ("x"))
150+
compare-elements-position: (".sub form", "#settings", ("x"))
151151

152152
// We now check the display with JS disabled.
153153
assert-false: "noscript section"

Diff for: ‎src/test/rustdoc-gui/source-code-page.goml

+23-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ assert-css: (".src-line-numbers", {"text-align": "right"})
2323
show-text: true
2424
goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
2525
// We use this assert-position to know where we will click.
26-
assert-position: ("//*[@id='1']", {"x": 104, "y": 103})
26+
assert-position: ("//*[@id='1']", {"x": 104, "y": 112})
2727
// We click on the left of the "1" span but still in the "src-line-number" `<pre>`.
2828
click: (103, 103)
2929
assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
@@ -47,3 +47,25 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
4747

4848
// Check the spacing.
4949
assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"})
50+
51+
// Check the search form
52+
assert-css: ("nav.sub", {"flex-direction": "row"})
53+
// The goal of this test is to ensure the search input is perfectly centered
54+
// between the top of the page and the top of the gray code block.
55+
// To check this, we maintain the invariant:
56+
//
57+
// offsetTop[nav.sub form] = offsetTop[#main-content] - offsetHeight[nav.sub form] - offsetTop[nav.sub form]
58+
assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
59+
assert-property: ("#main-content", {"offsetTop": 90})
60+
// 28 = 90 - 34 - 28
61+
62+
// Now do the same check on moderately-sized mobile.
63+
size: (700, 700)
64+
assert-css: ("nav.sub", {"flex-direction": "row"})
65+
assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
66+
assert-property: ("#main-content", {"offsetTop": 76})
67+
// 21 = 76 - 34 - 21
68+
69+
// Tiny mobile gets a different display where the logo is stacked on top.
70+
size: (450, 700)
71+
assert-css: ("nav.sub", {"flex-direction": "column"})

0 commit comments

Comments
 (0)