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

Rollup merge of #92861 - jsha:mobile-column-flex, r=GuillaumeGomez

Browse Source 
Rustdoc mobile: put out-of-band info on its own line

Before this, the item name and the stability, source link, and "collapse
all docs" would compete for room on a single line, resulting in awkward
wrapping behavior on mobile. This gives a separate line for that
out-of-band information. It also removes the "copy path" icon on mobile
to make a little more room.

Demo: https://rustdoc.crud.net/jsha/mobile-column-flex/std/string/struct.String.html

r? `@GuillaumeGomez`
This commit is contained in:
Matthias Krüger 2022-01-20 17:10:39 +01:00 committed by GitHub
commit ed3bf67db7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -148,11 +148,11 @@ h1.fqn {
}
.main-heading {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 1px dashed #DDDDDD;
padding-bottom: 6px;
margin-bottom: 15px;
/* workaround to keep flex from breaking below 700 px width due to the float: right on the nav
above the h1 */
padding-left: 1px;
}
.main-heading a:hover {
text-decoration: underline;
@ -623,11 +623,7 @@ nav.sub {
.content .out-of-band {
flex-grow: 0;
text-align: right;
margin-left: auto;
margin-right: 0;
font-size: 1.15rem;
padding: 0 0 0 12px;
font-weight: normal;
float: right;
}
@ -1748,10 +1744,25 @@ details.rustdoc-toggle[open] > summary.hideme::after {
padding-top: 0px;
}
.rustdoc {
.rustdoc,
.main-heading {
flex-direction: column;
}
.content .out-of-band {
text-align: left;
margin-left: initial;
padding: initial;
}
.content .out-of-band .since::before {
content: "Since ";
}
#copy-path {
display: none;
}
/* Hide the logo and item name from the sidebar. Those are displayed
in the mobile-topbar instead. */
.sidebar .sidebar-logo,

17
src/test/rustdoc-gui/mobile.goml Normal file
View File

@ -0,0 +1,17 @@
// Test various properties of the mobile UI
goto: file://|DOC_PATH|/staged_api/struct.Foo.html
size: (400, 600)
// The out-of-band info (source, stable version, collapse) should be below the
// h1 when the screen gets narrow enough.
assert-css: (".main-heading", {
"display": "flex",
"flex-direction": "column"
})
// Note: We can't use assert-text here because the 'Since' is set by CSS and
// is therefore not part of the DOM.
assert-css: (".content .out-of-band .since::before", { "content": "\"Since \"" })
size: (1000, 1000)
assert-css-false: (".content .out-of-band .since::before", { "content": "\"Since \"" })

12
src/test/rustdoc-gui/toggle-docs-mobile.goml
View File

@ -1,12 +1,12 @@
goto: file://|DOC_PATH|/test_docs/struct.Foo.html
size: (433, 600)
assert-attribute: (".top-doc", {"open": ""})
click: (4, 250) // This is the position of the top doc comment toggle
click: (4, 270) // This is the position of the top doc comment toggle
assert-attribute-false: (".top-doc", {"open": ""})
click: (4, 250)
click: (4, 270)
assert-attribute: (".top-doc", {"open": ""})
// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
click: (3, 250)
click: (3, 270)
assert-attribute: (".top-doc", {"open": ""})
// Assert the position of the toggle on the top doc block.
@ -22,10 +22,10 @@ assert-position: (
// Now we do the same but with a little bigger width
size: (600, 600)
assert-attribute: (".top-doc", {"open": ""})
click: (4, 250) // New Y position since all search elements are back on one line.
click: (4, 270) // New Y position since all search elements are back on one line.
assert-attribute-false: (".top-doc", {"open": ""})
click: (4, 250)
click: (4, 270)
assert-attribute: (".top-doc", {"open": ""})
// To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
click: (3, 250)
click: (3, 270)
assert-attribute: (".top-doc", {"open": ""})