bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

Rollup merge of #87167 - GuillaumeGomez:sidebar-display-mobile, r=notriddle

Browse source 
Fix sidebar display on small devices

Part of #87059.

Instead of hiding the sidebar on small devices, we instead move it out of the viewport so that it remains "visible" to our text only users.

Could you confirm it works for you `@ahicks92` and `@DataTriny` please? You can give it a try at [this URL](https://guillaume-gomez.fr/rustdoc-test/test_docs/index.html).

r? `@notriddle`
This commit is contained in:
Guillaume Gomez 2021-07-16 10:08:11 +02:00 • committed by GitHub
commit b19f37ca54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/librustdoc/html/static/css/rustdoc.css
View file

@ -1634,15 +1634,18 @@ details.undocumented[open] > summary::before {
display: none;
}
/* We do NOT hide this element so that alternative device readers still have this information
available. */
.sidebar-elems {
position: fixed;
z-index: 1;
left: 0;
top: 45px;
bottom: 0;
width: 246px;
/* We move the sidebar to the left by its own width so it doesn't appear. */
left: -246px;
overflow-y: auto;
border-right: 1px solid;
display: none;
}
.sidebar > .block.version {
@ -1730,8 +1733,7 @@ details.undocumented[open] > summary::before {
}
.show-it {
display: block;
width: 246px;
left: 0;
}
.show-it > .block.items {

10
src/test/rustdoc-gui/sidebar-mobile.goml Normal file
View file

@ -0,0 +1,10 @@
// This test ensure that the sidebar isn't "hidden" on mobile but instead moved out of the viewport.
// This is especially important for devices for "text-first" content (like for users with
// sight issues).
goto: file://|DOC_PATH|/test_docs/struct.Foo.html
// Switching to "mobile view" by reducing the width to 600px.
size: (600, 600)
assert-css: (".sidebar-elems", {"display": "block", "left": "-246px"})
// Opening the sidebar menu.
click: ".sidebar-menu"
assert-css: (".sidebar-elems", {"display": "block", "left": "0px"})