From 135281ed1525db15edd8ebd092aa10aa40df2386 Mon Sep 17 00:00:00 2001 From: cynecx Date: Thu, 30 Sep 2021 04:23:02 +0200 Subject: [PATCH] rustdoc: use flexbox to layout sidebar and main content --- src/librustdoc/html/static/css/rustdoc.css | 91 ++++++++++------------ src/librustdoc/html/static/js/main.js | 2 +- src/librustdoc/html/templates/page.html | 68 ++++++++-------- 3 files changed, 80 insertions(+), 81 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index fceb508bc4ff5..6135038a4044d 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -111,7 +111,6 @@ body { font: 16px/1.4 "Source Serif 4", NanumBarunGothic, serif; margin: 0; position: relative; - padding: 10px 15px 20px 15px; -webkit-font-feature-settings: "kern", "liga"; -moz-font-feature-settings: "kern", "liga"; @@ -248,6 +247,25 @@ textarea { /* end tweaks for normalize.css 8 */ +.rustdoc { + display: flex; + flex-direction: row; + flex-wrap: nowrap; +} + +main { + position: relative; + flex-grow: 1; + padding: 10px 15px 40px 45px; + height: 100vh; + overflow-y: auto; +} + +.main-inner { + max-width: 960px; + margin-right: auto; +} + details:not(.rustdoc-toggle) summary { margin-bottom: .6em; } @@ -298,15 +316,13 @@ nav.sub { .sidebar { width: 200px; - position: fixed; - left: 0; - top: 0; - bottom: 0; overflow-y: scroll; } .rustdoc.source .sidebar { overflow-y: auto; + min-width: 200px; + height: 100vh; } /* Improve the scrollbar display on firefox */ @@ -332,10 +348,6 @@ nav.sub { margin-right: -10px; } -.content, nav { - max-width: 960px; -} - /* Everything else */ .hidden { @@ -439,10 +451,6 @@ nav.sub { display: none; } -.content { - padding: 15px 0; -} - .source .content pre.rust { white-space: pre; overflow: auto; @@ -487,7 +495,6 @@ nav.sub { } #search { - margin-left: 230px; position: relative; } @@ -707,7 +714,7 @@ nav.sub { nav:not(.sidebar) { border-bottom: 1px solid; padding-bottom: 10px; - margin-bottom: 10px; + margin-bottom: 25px; } nav.main { padding: 20px 0; @@ -726,10 +733,6 @@ nav.main .separator { nav.sum { text-align: right; } nav.sub form { display: inline; } -nav.sub, .content { - margin-left: 230px; -} - a { text-decoration: none; background: transparent; @@ -1354,7 +1357,7 @@ pre.rust { .theme-picker { position: absolute; - left: 211px; + left: 11px; top: 19px; } @@ -1653,11 +1656,23 @@ details.rustdoc-toggle[open] > summary.hideme::after { padding-top: 0px; } + main { + height: auto; + padding-left: 15px; + padding-top: 0px; + overflow-y: visible; + } + + .rustdoc { + flex-direction: column; + } + .rustdoc > .sidebar { + width: 100%; height: 45px; min-height: 40px; + max-height: 45px; margin: 0; - margin-left: -15px; padding: 0 15px; position: static; z-index: 11; @@ -1748,20 +1763,17 @@ details.rustdoc-toggle[open] > summary.hideme::after { nav.sub { width: calc(100% - 32px); - float: right; + margin-left: 32px; + margin-bottom: 10px; } .content { margin-left: 0px; } - #main, #search { - margin-top: 45px; - padding: 0; - } - #search { margin-left: 0; + padding: 0; } .anchor { @@ -1770,7 +1782,7 @@ details.rustdoc-toggle[open] > summary.hideme::after { .theme-picker { left: 10px; - top: 54px; + top: 9px; z-index: 1; } @@ -1790,22 +1802,12 @@ details.rustdoc-toggle[open] > summary.hideme::after { } .sidebar.mobile { - position: fixed; + position: sticky; + top: 0; + left: 0; width: 100%; margin-left: 0; background-color: rgba(0,0,0,0); - height: 100%; - } - /* - This allows to prevent the version text to overflow the sidebar title on mobile mode when the - sidebar is displayed (after clicking on the "hamburger" button). - */ - .sidebar.mobile > div.version { - overflow: hidden; - max-height: 33px; - } - .sidebar { - width: calc(100% + 30px); } .show-it, .sidebar-elems:focus-within { @@ -1920,13 +1922,6 @@ details.rustdoc-toggle[open] > summary.hideme::after { height: 73px; } - /* This is to prevent the search bar from being underneath the
- * element following it. - */ - #main, #search { - margin-top: 100px; - } - #main > table:not(.table-display) td { word-break: break-word; width: 50%; diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 5661d4973342f..abf6126599b2c 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -1001,7 +1001,7 @@ function hideThemeButtonState() { container.appendChild(rustdoc_version); popup.appendChild(container); - insertAfter(popup, searchState.outputElement()); + insertAfter(popup, document.querySelector("main")); // So that it's only built once and then it'll do nothing when called! buildHelperPopup = function() {}; }; diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 2a783c6da57e4..fb4133eca4c41 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -81,39 +81,43 @@ {#- -#} {{- sidebar | safe -}} {#- -#} -
{#- -#} - {#- -#} - {#- -#} -
{#- -#} - {#- -#} -
{{- content | safe -}}
{#- -#} - {#- -#} + {#- -#} +
{{- content | safe -}}
{#- -#} + {#- -#} + {#- -#} + {#- -#} {{- layout.external_html.after_content | safe -}}