diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 912754b64fa8e..7f44a16e31b72 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -34,6 +34,8 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
');
--button-left-margin: 4px;
--button-border-radius: 2px;
+ --width-limiter-width: 960px;
+ --desktop-grid-column-gap: 45px;
}
/* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -336,7 +338,7 @@ button#toggle-all-docs {
main {
position: relative;
flex-grow: 1;
- padding: 10px 15px 40px 45px;
+ padding: 10px 15px 40px var(--desktop-grid-column-gap);
min-width: 0; /* avoid growing beyond the size limit */
}
@@ -345,7 +347,7 @@ main {
}
.width-limiter {
- max-width: 960px;
+ max-width: var(--width-limiter-width);
margin-right: auto;
}
@@ -460,7 +462,7 @@ img {
.sidebar-resizing .sidebar {
position: fixed;
}
-.sidebar-resizing > body {
+.sidebar-resizing .rustdoc {
padding-left: var(--resizing-sidebar-width);
}
@@ -534,7 +536,7 @@ img {
scrollbar-width: initial;
scrollbar-color: var(--scrollbar-color);
}
-.sidebar {
+.sidebar, #TOC section, #ModNav section {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-color);
}
@@ -543,17 +545,24 @@ img {
::-webkit-scrollbar {
width: 12px;
}
-.sidebar::-webkit-scrollbar {
+.sidebar::-webkit-scrollbar,
+#TOC section::-webkit-scrollbar,
+#ModNav section::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0;
background-color: var(--scrollbar-track-background-color);
}
-.sidebar::-webkit-scrollbar-track {
+.sidebar::-webkit-scrollbar-track,
+#TOC section::-webkit-scrollbar-track,
+#ModNav section::-webkit-scrollbar-track {
background-color: var(--scrollbar-track-background-color);
}
-::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb,
+.sidebar::-webkit-scrollbar-thumb,
+#TOC section::-webkit-scrollbar-thumb,
+#ModNav section::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-background-color);
}
@@ -742,7 +751,7 @@ ul.block, .block li, .block ul {
overflow-wrap: break-word;
}
-.sidebar-crate + .version {
+.sidebar > .version {
margin-top: -1rem;
margin-bottom: 1rem;
}
@@ -2006,6 +2015,111 @@ However, it's not needed with smaller screen width because the doc/code block is
/* Media Queries */
+/* Very-large-screen mode. */
+@supports (display: grid) and (display: contents) {
+ @media (min-width: 1600px) and (min-height: 800px) {
+ .rustdoc:not(.src) {
+ display: grid;
+ grid-template-columns:
+ var(--desktop-sidebar-width)
+ var(--width-limiter-width)
+ minmax(0, 1fr);
+ grid-template-rows: min-content 1fr;
+ grid-template-areas:
+ "sidebar-title main sidebar-cratenav"
+ "sidebar-modnav main sidebar-toc";
+ grid-column-gap: var(--desktop-grid-column-gap);
+ }
+ .sidebar-resizing .rustdoc:not(.src) {
+ padding-left: 0;
+ }
+ .hide-sidebar .rustdoc:not(.src) {
+ grid-template-columns:
+ var(--width-limiter-width)
+ minmax(0, 1fr);
+ grid-template-rows: minmax(min-content, calc(64px + 0.75rem)) 1fr;
+ grid-template-areas:
+ "main sidebar-cratenav"
+ "main sidebar-toc";
+ padding-left: var(--desktop-grid-column-gap);
+ }
+ .rustdoc:not(.src) .sidebar,
+ .rustdoc:not(.src) main {
+ display: contents;
+ }
+ .width-limiter {
+ grid-area: main;
+ width: var(--width-limiter-width);
+ --desktop-sidebar-width: 0;
+ }
+ .rustdoc:not(.src) nav.sub {
+ padding-top: 10px;
+ }
+ .rustdoc:not(.src) .doc-sidebar-title {
+ grid-area: sidebar-title;
+ background: var(--sidebar-background-color);
+ position: sticky;
+ top: 0;
+ }
+ .rustdoc:not(.src) .sidebar-crate {
+ margin-bottom: 0.5rem;
+ }
+ .rustdoc:not(.src) #TOC,
+ .rustdoc:not(.src) #CrateNav {
+ grid-area: sidebar-toc;
+ background: var(--main-background-color);
+ padding-left: 0;
+ }
+ .rustdoc:not(.src) #CrateNav {
+ grid-area: sidebar-cratenav;
+ align-self: middle;
+ }
+ .rustdoc:not(.src) #ModNav {
+ grid-area: sidebar-modnav;
+ background: var(--sidebar-background-color);
+ padding-left: 0;
+ }
+ .rustdoc:not(.src) #ModNav .in-crate {
+ display: none;
+ }
+ .rustdoc:not(.src) #TOC section,
+ .rustdoc:not(.src) #ModNav section {
+ position: sticky;
+ top: 0;
+ bottom: 0;
+ overflow-y: scroll;
+ overscroll-behavior: contain;
+ max-height: 100vh;
+ padding-left: 24px;
+ }
+ .rustdoc:not(.src) #TOC .location,
+ .rustdoc:not(.src) #ModNav h2 {
+ margin-top: 0;
+ }
+ .rustdoc:not(.src) #ModNav section {
+ top: calc(64px + 0.75rem);
+ max-height: calc(100vh - 64px - 0.75rem);
+ background: var(--sidebar-background-color);
+ border-top: solid 1px var(--border-color);
+ }
+ .rustdoc:not(.src) #TOC section {
+ max-height: calc(100vh - 0.5rem);
+ top: 0.25rem;
+ margin: 0 var(--desktop-grid-column-gap) var(--desktop-grid-column-gap) 0;
+ border: solid 1px var(--border-color);
+ padding: 0.25rem;
+ }
+ .rustdoc:not(.src) #CrateNav .block:last-child,
+ .rustdoc:not(.src) #TOC .block:last-child {
+ margin-bottom: 0;
+ }
+ .rustdoc:not(.src) #CrateNav a:hover,
+ .rustdoc:not(.src) #TOC a:hover {
+ background-color: var(--sidebar-background-color);
+ }
+ }
+}
+
/* Make sure all the buttons line wrap at the same time */
@media (max-width: 850px) {
#search-tabs .count {
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index d17a0bbeb5206..f957c44dcfaf6 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -493,7 +493,7 @@ function preLoadCss(cssUrl) {
if (!window.SIDEBAR_ITEMS) {
return;
}
- const sidebar = document.getElementById("rustdoc-modnav");
+ const sidebar = document.querySelector("#rustdoc-modnav section");
/**
* Append to the sidebar a "block" of links - a heading along with a list (``) of items.
@@ -533,8 +533,9 @@ function preLoadCss(cssUrl) {
const li = document.createElement("li");
// Don't "optimize" this to just use `path`.
// We want the browser to normalize this into an absolute URL.
- if (link.href === current_page) {
- li.classList.add("current");
+ if (link.href.toString() === current_page) {
+ link.className = "current";
+ li.className = "current";
}
li.appendChild(link);
ul.appendChild(li);
@@ -880,7 +881,7 @@ function preLoadCss(cssUrl) {
if (!window.ALL_CRATES) {
return;
}
- const sidebarElems = document.getElementById("rustdoc-modnav");
+ const sidebarElems = document.querySelector("#rustdoc-modnav section");
if (!sidebarElems) {
return;
}
@@ -1546,6 +1547,15 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
// At half-way past the minimum size, vanish the sidebar entirely
const SIDEBAR_VANISH_THRESHOLD = SIDEBAR_MIN / 2;
+ // When running in grid layout mode, we have to change sizes
+ // on the parent element. Otherwise, we can resize the sidebar
+ // independently.
+ //
+ // This is less bad than it otherwise would be, since if you are in grid
+ // mode, resizing the sidebar will resize the floating TOC, not the huge
+ // content area.
+ let gridMode = window.getComputedStyle(document.querySelector(".rustdoc")).display === "grid";
+
// Toolbar button to show the sidebar.
//
// On small, "mobile-sized" viewports, it's not persistent and it
@@ -1666,6 +1676,9 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
updateLocalStorage("desktop-sidebar-width", size);
sidebar.style.setProperty("--desktop-sidebar-width", size + "px");
resizer.style.setProperty("--desktop-sidebar-width", size + "px");
+ if (gridMode) {
+ document.documentElement.style.setProperty("--desktop-sidebar-width", size + "px");
+ }
}
}
@@ -1717,6 +1730,7 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
if (window.innerWidth < RUSTDOC_MOBILE_BREAKPOINT) {
return;
}
+ gridMode = window.getComputedStyle(document.querySelector(".rustdoc")).display === "grid";
stopResize();
if (desiredSidebarSize >= (window.innerWidth - BODY_MIN)) {
changeSidebarSize(window.innerWidth - BODY_MIN);
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index 65c4304e20207..9388b24849fa0 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -87,22 +87,24 @@
{% endif %}