From ba777138172f3c96faba9a3f58f0f76ab6ead643 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Thu, 8 Feb 2024 15:00:29 -0700 Subject: [PATCH] drustdoc: add three-column layout for large desktops This commit adds a floating TOC box to the right, leaving the sibling/module/crate navigation on the left. This kicks in at a size a little below 1920x1080, where desktops with very wide monitors are: it's also around the point where the content area can be full width while allowing two sidebars. It only kicks in if the browser supports grid layouts, but that should be most of them, and we can't get rid of the two-column layout anyway, since it's the layout you get on something like a portrait iPad. This design, where it can be used, is meant to clearly split up the table of contents and the site navigation, so the right side floating box has the same color as the page while the left sidebar does not. It also pushes it down further, so that it's not as high as the search bar, though that's a bit more subtle than the color. --- src/librustdoc/html/static/css/rustdoc.css | 114 ++++++++++++++++++++- src/librustdoc/html/static/js/main.js | 24 ++++- src/librustdoc/html/templates/page.html | 32 +++--- src/librustdoc/html/templates/sidebar.html | 21 ++-- tests/rustdoc-gui/sidebar.goml | 16 +-- 5 files changed, 166 insertions(+), 41 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 2a129f86dc518..573c7f81d031a 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -15,6 +15,8 @@ --desktop-sidebar-width: 200px; --src-sidebar-width: 300px; --desktop-sidebar-z-index: 100; + --width-limiter-width: 960px; + --desktop-grid-column-gap: 45px; } /* See FiraSans-LICENSE.txt for the Fira Sans license. */ @@ -317,7 +319,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 */ } @@ -326,7 +328,7 @@ main { } .width-limiter { - max-width: 960px; + max-width: var(--width-limiter-width); margin-right: auto; } @@ -441,7 +443,7 @@ img { .sidebar-resizing .sidebar { position: fixed; } -.sidebar-resizing > body { +.sidebar-resizing .rustdoc { padding-left: var(--resizing-sidebar-width); } @@ -675,7 +677,7 @@ ul.block, .block li, .block ul { overflow-wrap: break-word; } -.sidebar-crate + .version { +.sidebar > .version { margin-top: -1rem; margin-bottom: 1rem; } @@ -1853,6 +1855,110 @@ 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; + 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 3de40b6d595bb..65bb981c1e07c 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -460,7 +460,7 @@ function preLoadCss(cssUrl) { if (!window.SIDEBAR_ITEMS) { return; } - const sidebar = document.getElementById("ModNav"); + const sidebar = document.querySelector("#ModNav section"); /** * Append to the sidebar a "block" of links - a heading along with a list (`