Skip to content

Commit

Permalink
Rustdoc mobile: put out-of-band on its own line
Browse files Browse the repository at this point in the history
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.

Also, switch to flex-wrap: wrap, so anytime there's not enough room for
`source`, it gets bumped to the next line.
  • Loading branch information
jsha committed Jan 20, 2022
1 parent 237949b commit 152e888
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 15 deletions.
29 changes: 20 additions & 9 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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,
Expand Down
17 changes: 17 additions & 0 deletions src/test/rustdoc-gui/mobile.goml
Original file line number Diff line number Diff line change
@@ -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 changes: 6 additions & 6 deletions src/test/rustdoc-gui/toggle-docs-mobile.goml
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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": ""})

0 comments on commit 152e888

Please sign in to comment.