mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rollup merge of #103321 - notriddle:notriddle/source-page-top-bar-layout, r=GuillaumeGomez

Browse Source 
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)
This commit is contained in:
Dylan DPC 2022-10-21 17:30:00 +05:30 committed by GitHub
commit 325e9203ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 72 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/librustdoc/html/static/css/noscript.css
View File

@ -14,7 +14,7 @@ rules.
display: none;
}
.sub {
nav.sub {
/* The search bar and related controls don't work without JS */
display: none;
}

38
src/librustdoc/html/static/css/rustdoc.css
View File

@ -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 {
@ -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;
@ -796,7 +796,6 @@ table,
position: relative;
display: flex;
height: 34px;
margin-top: 4px;
}
.search-results-title {
margin-top: 0;
@ -1822,10 +1821,6 @@ in storage.js
margin-left: 0px;
}
.source .content {
margin-top: 10px;
}
.anchor {
display: none !important;
}
@ -1934,6 +1929,11 @@ in storage.js
.impl-items > .item-info {
margin-left: 34px;
}
.source nav.sub {
margin: 0;
padding: 8px;
}
}
@media print {
@ -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 {

46
src/librustdoc/html/templates/page.html
View File

@ -102,7 +102,7 @@
</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() %}
@ -112,30 +112,28 @@
{%- 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> {#- -#}

12
src/test/rustdoc-gui/help-page.goml
View File

@ -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"
@ -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
src/test/rustdoc-gui/settings.goml
View File

@ -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"

24
src/test/rustdoc-gui/source-code-page.goml
View File

@ -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)
@ -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"})