Rollup merge of #91905 - GuillaumeGomez:source-code-page-sidebar, r=jsha

Fix source code page sidebar on mobile

Current broken behaviour:

https://user-images.githubusercontent.com/3050060/145984316-35c82353-5bab-4dc6-9ac6-63ea7e5c27d8.mp4

Fixed:

https://user-images.githubusercontent.com/3050060/145984329-8be1127b-d707-424d-ac3c-c1fb3c48a093.mp4

r? `@jsha`
This commit is contained in:
Matthias Krüger 2021-12-15 08:36:24 +01:00 committed by GitHub
commit 6132a2b55a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 2 deletions

View File

@ -373,7 +373,6 @@ nav.sub {
.source .sidebar.expanded {
overflow-y: auto;
width: 300px;
}
.source .sidebar.expanded > * {
@ -1394,7 +1393,7 @@ pre.rust {
z-index: 10;
}
#source-sidebar {
width: 300px;
width: 100%;
z-index: 1;
overflow: auto;
}
@ -1711,6 +1710,10 @@ details.rustdoc-toggle[open] > summary.hideme::after {
.rustdoc.source .sidebar {
transition: width .5s;
}
.source .sidebar.expanded {
width: 300px;
}
}
@media (max-width: 700px) {
@ -1999,6 +2002,11 @@ details.rustdoc-toggle[open] > summary.hideme::after {
.search-results div.desc, .search-results .result-description, .item-right {
padding-left: 2em;
}
.source .sidebar.expanded {
max-width: 100vw;
width: 100vw;
}
}
@media print {

View File

@ -0,0 +1,32 @@
// The goal of this test is to ensure that the sidebar is working as expected in the source
// code pages.
goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
// First: desktop mode.
size: (1100, 800)
// We check that the sidebar isn't expanded and has the expected width.
assert-css: ("nav.sidebar", {"width": "50px"})
// We now click on the button to expand the sidebar.
click: (10, 10)
// We wait for the sidebar to be expanded (there is a 0.5s animation).
wait-for: 600
assert-css: ("nav.sidebar.expanded", {"width": "300px"})
// We collapse the sidebar.
click: (10, 10)
// We wait for the sidebar to be collapsed (there is a 0.5s animation).
wait-for: 600
// We ensure that the class has been removed.
assert-false: "nav.sidebar.expanded"
assert: "nav.sidebar"
// We now switch to mobile mode.
size: (600, 600)
// We check that the sidebar has the expected width (0 and 1px for the border).
assert-css: ("nav.sidebar", {"width": "1px"})
// We expand the sidebar.
click: "#sidebar-toggle"
assert-css: ("nav.sidebar.expanded", {"width": "600px"})
// We collapse the sidebar.
click: (10, 10)
// We ensure that the class has been removed.
assert-false: "nav.sidebar.expanded"
assert: "nav.sidebar"