Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve rustdoc layout #91356

Merged
merged 13 commits into from
Dec 5, 2021
Prev Previous commit
Next Next commit
Fix remaining bugs
  • Loading branch information
GuillaumeGomez committed Dec 2, 2021
commit 1e55c31cbbc43a21c93ed5652dc39c267e6557af
27 changes: 21 additions & 6 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -348,21 +348,18 @@ nav.sub {
position: sticky;
min-width: 200px;
height: 100vh;
top: 0;
left: 0;
}

.rustdoc.source .sidebar {
overflow: auto;
}

.source .sidebar {
width: 50px;
min-width: 0px;
max-width: 300px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
border-right: 1px solid;
transition: width .5s;
overflow-x: hidden;
/* The sidebar is by default hidden */
overflow-y: hidden;
Expand All @@ -376,7 +373,7 @@ nav.sub {

.source .sidebar.expanded {
overflow-y: auto;
width: 300px !important;
width: 300px;
}

.source .sidebar.expanded > * {
Expand Down Expand Up @@ -1698,6 +1695,18 @@ details.rustdoc-toggle[open] > summary.hideme::after {
.docblock > .information:first-child > .tooltip {
margin-top: 16px;
}

/* When we expand the sidebar on the source code page, we hide the logo on the left of the
search bar to have more space. */
.sidebar.expanded + main .main-inner .sub-logo-container.rust-logo {
display: none;
}

/* It doesn't render well on mobile because of the layout, so better only have the transition
on desktop. */
.rustdoc.source .sidebar {
transition: width .5s;
}
}

@media (max-width: 700px) {
Expand All @@ -1723,6 +1732,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
padding: 0 15px;
position: static;
z-index: 11;
overflow-y: hidden;
}

.rustdoc.source > .sidebar {
Expand Down Expand Up @@ -1779,6 +1789,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
cursor: pointer;
width: 45px;
left: 0;
top: 0;
text-align: center;
display: block;
border-bottom: 1px solid;
Expand Down Expand Up @@ -2052,6 +2063,10 @@ details.rustdoc-toggle[open] > summary.hideme::after {
height: 35px;
width: 35px;
}

.sidebar:not(.expanded) #sidebar-toggle {
top: 10px;
}
}


Expand Down
1 change: 0 additions & 1 deletion src/librustdoc/html/templates/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@
<input {# -#}
class="search-input" {# -#}
name="search" {# -#}
disabled {# -#}
autocomplete="off" {# -#}
spellcheck="false" {# -#}
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
Expand Down
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/source-code-page.goml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
// Check that we can click on the line number.
click: (50, 196) // This is the position of the span for line 4.
click: ".line-numbers > span:nth-child(4)" // This is the span for line 4.
// Unfortunately, "#4" isn't a valid query selector, so we have to go around that limitation
// by instead getting the nth span.
assert-attribute: (".line-numbers > span:nth-child(4)", {"class": "line-highlighted"})
Expand Down