mirror of
https://github.com/rust-lang/rust.git
synced 2025-06-06 20:28:33 +00:00
rustdoc: remove class name location
from sidebar sibling nav
This change tweaks the CSS to apply most of its styles to `.sidebar h2`, cleaning up a few redundant rules from `.mobile-topbar .location` and restoring useful navigation aids in mobile mode.
This commit is contained in:
parent
e94827e5b0
commit
a01b88575e
@ -1884,7 +1884,7 @@ fn print_sidebar(cx: &Context<'_>, it: &clean::Item, buffer: &mut Buffer) {
|
|||||||
if !it.is_mod() {
|
if !it.is_mod() {
|
||||||
let path: String = cx.current.iter().map(|s| s.as_str()).intersperse("::").collect();
|
let path: String = cx.current.iter().map(|s| s.as_str()).intersperse("::").collect();
|
||||||
|
|
||||||
write!(buffer, "<h2 class=\"location\"><a href=\"index.html\">In {}</a></h2>", path);
|
write!(buffer, "<h2><a href=\"index.html\">In {}</a></h2>", path);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Closes sidebar-elems div.
|
// Closes sidebar-elems div.
|
||||||
|
@ -171,7 +171,7 @@ h1.fqn {
|
|||||||
Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc)
|
Rustdoc-generated h2 section headings (e.g. "Implementations", "Required Methods", etc)
|
||||||
Underlines elsewhere in the documentation break up visual flow and tend to invert
|
Underlines elsewhere in the documentation break up visual flow and tend to invert
|
||||||
section hierarchies. */
|
section hierarchies. */
|
||||||
h2,
|
.content h2,
|
||||||
.top-doc .docblock > h3,
|
.top-doc .docblock > h3,
|
||||||
.top-doc .docblock > h4 {
|
.top-doc .docblock > h4 {
|
||||||
border-bottom: 1px solid var(--headings-border-bottom-color);
|
border-bottom: 1px solid var(--headings-border-bottom-color);
|
||||||
@ -397,15 +397,6 @@ img {
|
|||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-elems,
|
|
||||||
.sidebar > .location {
|
|
||||||
padding-left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .location {
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rustdoc.source .sidebar {
|
.rustdoc.source .sidebar {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
min-width: 0px;
|
min-width: 0px;
|
||||||
@ -504,8 +495,8 @@ ul.block, .block li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.block a,
|
.block a,
|
||||||
.sidebar h3 a,
|
.sidebar h2 a,
|
||||||
h2.location a {
|
.sidebar h3 a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
margin-left: -0.25rem;
|
margin-left: -0.25rem;
|
||||||
@ -515,8 +506,7 @@ h2.location a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar h2 {
|
.sidebar h2 {
|
||||||
border-bottom: none;
|
overflow-wrap: anywhere;
|
||||||
font-weight: 500;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 0.7rem;
|
margin-top: 0.7rem;
|
||||||
@ -525,11 +515,15 @@ h2.location a {
|
|||||||
|
|
||||||
.sidebar h3 {
|
.sidebar h3 {
|
||||||
font-size: 1.125rem; /* 18px */
|
font-size: 1.125rem; /* 18px */
|
||||||
font-weight: 500;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-elems,
|
||||||
|
.sidebar > h2 {
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar a, .sidebar .current {
|
.sidebar a, .sidebar .current {
|
||||||
color: var(--sidebar-link-color);
|
color: var(--sidebar-link-color);
|
||||||
}
|
}
|
||||||
@ -1798,18 +1792,10 @@ in storage.js plus the media query with (min-width: 701px)
|
|||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-topbar .location a {
|
.mobile-topbar h2 {
|
||||||
padding: 0;
|
padding-bottom: 0;
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-topbar .location {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: auto 0.5em auto auto;
|
margin: auto 0.5em auto auto;
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
|
||||||
/* Rare exception to specifying font sizes in rem. Since the topbar
|
/* Rare exception to specifying font sizes in rem. Since the topbar
|
||||||
height is specified in pixels, this also has to be specified in
|
height is specified in pixels, this also has to be specified in
|
||||||
pixels to avoid overflowing the topbar when the user sets a bigger
|
pixels to avoid overflowing the topbar when the user sets a bigger
|
||||||
@ -1817,6 +1803,13 @@ in storage.js plus the media query with (min-width: 701px)
|
|||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-topbar h2 a {
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-topbar .logo-container {
|
.mobile-topbar .logo-container {
|
||||||
max-height: 45px;
|
max-height: 45px;
|
||||||
}
|
}
|
||||||
|
@ -55,7 +55,7 @@ function blurHandler(event, parentElem, hideCallback) {
|
|||||||
function setMobileTopbar() {
|
function setMobileTopbar() {
|
||||||
// FIXME: It would be nicer to generate this text content directly in HTML,
|
// FIXME: It would be nicer to generate this text content directly in HTML,
|
||||||
// but with the current code it's hard to get the right information in the right place.
|
// but with the current code it's hard to get the right information in the right place.
|
||||||
const mobileLocationTitle = document.querySelector(".mobile-topbar h2.location");
|
const mobileLocationTitle = document.querySelector(".mobile-topbar h2");
|
||||||
const locationTitle = document.querySelector(".sidebar h2.location");
|
const locationTitle = document.querySelector(".sidebar h2.location");
|
||||||
if (mobileLocationTitle && locationTitle) {
|
if (mobileLocationTitle && locationTitle) {
|
||||||
mobileLocationTitle.innerHTML = locationTitle.innerHTML;
|
mobileLocationTitle.innerHTML = locationTitle.innerHTML;
|
||||||
|
@ -85,7 +85,7 @@
|
|||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</div> {#- -#}
|
</div> {#- -#}
|
||||||
</a> {#- -#}
|
</a> {#- -#}
|
||||||
<h2 class="location"></h2> {#- -#}
|
<h2></h2> {#- -#}
|
||||||
</nav> {#- -#}
|
</nav> {#- -#}
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
<nav class="sidebar"> {#- -#}
|
<nav class="sidebar"> {#- -#}
|
||||||
|
@ -12,7 +12,7 @@ assert-css: (".main-heading", {
|
|||||||
"flex-direction": "column"
|
"flex-direction": "column"
|
||||||
})
|
})
|
||||||
|
|
||||||
assert-property: (".mobile-topbar h2.location", {"offsetHeight": 36})
|
assert-property: (".mobile-topbar h2", {"offsetHeight": 36})
|
||||||
|
|
||||||
// Note: We can't use assert-text here because the 'Since' is set by CSS and
|
// Note: We can't use assert-text here because the 'Since' is set by CSS and
|
||||||
// is therefore not part of the DOM.
|
// is therefore not part of the DOM.
|
||||||
|
@ -23,6 +23,11 @@ assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
|
|||||||
click: ".sidebar-menu-toggle"
|
click: ".sidebar-menu-toggle"
|
||||||
assert-css: (".sidebar", {"left": "0px"})
|
assert-css: (".sidebar", {"left": "0px"})
|
||||||
|
|
||||||
|
// Make sure the "struct Foo" header is hidden, since the mobile topbar already does it.
|
||||||
|
assert-css: ("//nav[contains(@class, 'sidebar')]//h2/a[text()='Foo']/parent::h2", {"display": "none"})
|
||||||
|
// Make sure the global navigation is still here.
|
||||||
|
assert-css: ("//nav[contains(@class, 'sidebar')]//h2/a[text()='In test_docs']/parent::h2", {"display": "block"})
|
||||||
|
|
||||||
// Click elsewhere.
|
// Click elsewhere.
|
||||||
click: "body"
|
click: "body"
|
||||||
assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
|
assert-css: (".sidebar", {"display": "block", "left": "-1000px"})
|
||||||
@ -39,7 +44,7 @@ assert-position: ("#method\.must_use", {"y": 45})
|
|||||||
// Check that the bottom-most item on the sidebar menu can be scrolled fully into view.
|
// Check that the bottom-most item on the sidebar menu can be scrolled fully into view.
|
||||||
click: ".sidebar-menu-toggle"
|
click: ".sidebar-menu-toggle"
|
||||||
scroll-to: ".block.keyword li:nth-child(1)"
|
scroll-to: ".block.keyword li:nth-child(1)"
|
||||||
compare-elements-position-near: (".block.keyword li:nth-child(1)", ".mobile-topbar", {"y": 543})
|
compare-elements-position-near: (".block.keyword li:nth-child(1)", ".mobile-topbar", {"y": 543.19})
|
||||||
|
|
||||||
// Now checking the background color of the sidebar.
|
// Now checking the background color of the sidebar.
|
||||||
show-text: true
|
show-text: true
|
||||||
|
@ -9,6 +9,7 @@ reload:
|
|||||||
assert-text: (".sidebar > .location", "Crate test_docs")
|
assert-text: (".sidebar > .location", "Crate test_docs")
|
||||||
// In modules, we only have one "location" element.
|
// In modules, we only have one "location" element.
|
||||||
assert-count: (".sidebar .location", 1)
|
assert-count: (".sidebar .location", 1)
|
||||||
|
assert-count: (".sidebar h2", 1)
|
||||||
assert-text: ("#all-types", "All Items")
|
assert-text: ("#all-types", "All Items")
|
||||||
assert-css: ("#all-types", {"color": "rgb(53, 109, 164)"})
|
assert-css: ("#all-types", {"color": "rgb(53, 109, 164)"})
|
||||||
// We check that we have the crates list and that the "current" on is "test_docs".
|
// We check that we have the crates list and that the "current" on is "test_docs".
|
||||||
@ -28,7 +29,8 @@ assert-text: ("#structs + .item-table .item-left > a", "Foo")
|
|||||||
click: "#structs + .item-table .item-left > a"
|
click: "#structs + .item-table .item-left > a"
|
||||||
|
|
||||||
// PAGE: struct.Foo.html
|
// PAGE: struct.Foo.html
|
||||||
assert-count: (".sidebar .location", 2)
|
assert-count: (".sidebar .location", 1)
|
||||||
|
assert-count: (".sidebar h2", 2)
|
||||||
// We check that there is no crate listed outside of the top level.
|
// We check that there is no crate listed outside of the top level.
|
||||||
assert-false: ".sidebar-elems > .crate"
|
assert-false: ".sidebar-elems > .crate"
|
||||||
|
|
||||||
@ -60,10 +62,11 @@ assert-text: ("#functions + .item-table .item-left > a", "foobar")
|
|||||||
click: "#functions + .item-table .item-left > a"
|
click: "#functions + .item-table .item-left > a"
|
||||||
|
|
||||||
// PAGE: fn.foobar.html
|
// PAGE: fn.foobar.html
|
||||||
// In items containing no items (like functions or constants) and in modules, we have one
|
// In items containing no items (like functions or constants) and in modules, we have no
|
||||||
// "location" elements.
|
// "location" elements. Only the parent module h2.
|
||||||
assert-count: (".sidebar .location", 1)
|
assert-count: (".sidebar .location", 0)
|
||||||
assert-text: (".sidebar .sidebar-elems .location", "In lib2")
|
assert-count: (".sidebar h2", 1)
|
||||||
|
assert-text: (".sidebar .sidebar-elems h2", "In lib2")
|
||||||
// We check that we don't have the crate list.
|
// We check that we don't have the crate list.
|
||||||
assert-false: ".sidebar-elems > .crate"
|
assert-false: ".sidebar-elems > .crate"
|
||||||
|
|
||||||
|
@ -32,6 +32,6 @@ assert-property: (".item-decl pre", {"scrollWidth": "950"})
|
|||||||
size: (600, 600)
|
size: (600, 600)
|
||||||
goto: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
|
goto: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
|
||||||
// It shouldn't have an overflow in the topbar either.
|
// It shouldn't have an overflow in the topbar either.
|
||||||
store-property: (scrollWidth, ".mobile-topbar .location", "scrollWidth")
|
store-property: (scrollWidth, ".mobile-topbar h2", "scrollWidth")
|
||||||
assert-property: (".mobile-topbar .location", {"clientWidth": |scrollWidth|})
|
assert-property: (".mobile-topbar h2", {"clientWidth": |scrollWidth|})
|
||||||
assert-css: (".mobile-topbar .location", {"overflow-x": "hidden"})
|
assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"})
|
||||||
|
Loading…
Reference in New Issue
Block a user