Skip to content

Commit

Permalink
rustdoc: improve appearance of source page navigation bar
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@notriddle
notriddle committed Oct 20, 2022
1 parent 542febd commit f6dd470
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 52 deletions.
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/noscript.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ rules.
display: none;
}

.sub {
nav.sub {
/* The search bar and related controls don't work without JS */
display: none;
}
38 changes: 19 additions & 19 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,15 +365,8 @@ img {
overflow: visible;
}

.sub-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.sub-logo-container {
display: block;
margin-right: 20px;
line-height: 0;
}

.sub-logo-container > img {
Expand Down Expand Up @@ -696,14 +689,21 @@ pre, .rustdoc.source .example-wrap {
}

nav.sub {
position: relative;
flex-grow: 1;
margin-bottom: 25px;
flex-flow: row nowrap;
margin: 4px 0 25px 0;
display: flex;
align-items: center;
}
nav.sub form {
flex-grow: 1;
}
.source nav.sub {
margin: 0 0 15px 0;
}
.source nav.sub form {
margin-left: 32px;
}
nav.sub form { display: inline; }

a {
text-decoration: none;
Expand Down Expand Up @@ -796,7 +796,6 @@ table,
position: relative;
display: flex;
height: 34px;
margin-top: 4px;
}
.search-results-title {
margin-top: 0;
Expand Down Expand Up @@ -1822,10 +1821,6 @@ in storage.js
margin-left: 0px;
}

.source .content {
margin-top: 10px;
}

.anchor {
display: none !important;
}
Expand Down Expand Up @@ -1934,6 +1929,11 @@ in storage.js
.impl-items > .item-info {
margin-left: 34px;
}

.source nav.sub {
margin: 0;
padding: 8px;
}
}

@media print {
Expand Down Expand Up @@ -1962,12 +1962,12 @@ in storage.js
overflow-wrap: anywhere;
}

.sub-container {
nav.sub {
flex-direction: column;
}

.sub-logo-container {
align-self: center;
nav.sub form {
align-self: stretch;
}

.sub-logo-container > img {
Expand Down
46 changes: 22 additions & 24 deletions src/librustdoc/html/templates/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ <h2></h2> {#- -#}
</nav> {#- -#}
<main> {#- -#}
<div class="width-limiter"> {#- -#}
<div class="sub-container"> {#- -#}
<nav class="sub"> {#- -#}
{%- if page.css_class == "source" -%}
<a class="sub-logo-container" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
{%- if !layout.logo.is_empty() %}
Expand All @@ -112,30 +112,28 @@ <h2></h2> {#- -#}
{%- endif -%}
</a> {#- -#}
{%- endif -%}
<nav class="sub"> {#- -#}
<form class="search-form"> {#- -#}
<div class="search-container"> {#- -#}
<span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
<input {# -#}
class="search-input" {# -#}
name="search" {# -#}
autocomplete="off" {# -#}
spellcheck="false" {# -#}
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
type="search"> {#- -#}
<div id="help-button" title="help" tabindex="-1"> {#- -#}
<a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
</div> {#- -#}
<div id="settings-menu" tabindex="-1"> {#- -#}
<a 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> {#- -#}
<form class="search-form"> {#- -#}
<div class="search-container"> {#- -#}
<span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
<input {# -#}
class="search-input" {# -#}
name="search" {# -#}
autocomplete="off" {# -#}
spellcheck="false" {# -#}
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
type="search"> {#- -#}
<div id="help-button" title="help" tabindex="-1"> {#- -#}
<a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
</div> {#- -#}
</form> {#- -#}
</nav> {#- -#}
</div> {#- -#}
<div id="settings-menu" tabindex="-1"> {#- -#}
<a 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> {#- -#}
</div> {#- -#}
</form> {#- -#}
</nav> {#- -#}
<section id="main-content" class="content">{{- content|safe -}}</section> {#- -#}
</div> {#- -#}
</main> {#- -#}
Expand Down
12 changes: 6 additions & 6 deletions src/test/rustdoc-gui/help-page.goml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ wait-for: "#help"
assert-css: ("#help", {"display": "block"})
click: "#help-button > a"
assert-css: ("#help", {"display": "block"})
compare-elements-property: (".sub-container", "#help", ["offsetWidth"])
compare-elements-position: (".sub-container", "#help", ("x"))
compare-elements-property: (".sub", "#help", ["offsetWidth"])
compare-elements-position: (".sub", "#help", ("x"))
size: (500, 1000) // Try mobile next.
assert-css: ("#help", {"display": "block"})
compare-elements-property: (".sub-container", "#help", ["offsetWidth"])
compare-elements-position: (".sub-container", "#help", ("x"))
compare-elements-property: (".sub", "#help", ["offsetWidth"])
compare-elements-position: (".sub", "#help", ("x"))

// This test ensures that opening the help popover without switching pages works.
goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
Expand All @@ -20,5 +20,5 @@ click: "#help-button > a"
assert-css: ("#help", {"display": "block"})
click: "#help-button > a"
assert-css: ("#help", {"display": "none"})
compare-elements-property-false: (".sub-container", "#help", ["offsetWidth"])
compare-elements-position-false: (".sub-container", "#help", ("x"))
compare-elements-property-false: (".sub", "#help", ["offsetWidth"])
compare-elements-position-false: (".sub", "#help", ("x"))
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/settings.goml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ assert-css: (
)

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

// We now check the display with JS disabled.
assert-false: "noscript section"
Expand Down
24 changes: 23 additions & 1 deletion src/test/rustdoc-gui/source-code-page.goml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ assert-css: (".src-line-numbers", {"text-align": "right"})
show-text: true
goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
// We use this assert-position to know where we will click.
assert-position: ("//*[@id='1']", {"x": 104, "y": 103})
assert-position: ("//*[@id='1']", {"x": 104, "y": 112})
// We click on the left of the "1" span but still in the "src-line-number" `<pre>`.
click: (103, 103)
assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
Expand All @@ -47,3 +47,25 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})

// Check the spacing.
assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"})

// Check the search form
assert-css: ("nav.sub", {"flex-direction": "row"})
// The goal of this test is to ensure the search input is perfectly centered
// between the top of the page and the top of the gray code block.
// To check this, we maintain the invariant:
//
// offsetTop[nav.sub form] = offsetTop[#main-content] - offsetHeight[nav.sub form] - offsetTop[nav.sub form]
assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
assert-property: ("#main-content", {"offsetTop": 90})
// 28 = 90 - 34 - 28

// Now do the same check on moderately-sized mobile.
size: (700, 700)
assert-css: ("nav.sub", {"flex-direction": "row"})
assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
assert-property: ("#main-content", {"offsetTop": 76})
// 21 = 76 - 34 - 21

// Tiny mobile gets a different display where the logo is stacked on top.
size: (450, 700)
assert-css: ("nav.sub", {"flex-direction": "column"})

0 comments on commit f6dd470

Please sign in to comment.