From 2f41b0354e473e72f68e34fd8bc3e6622535db4c Mon Sep 17 00:00:00 2001 From: cynecx Date: Thu, 30 Sep 2021 04:23:02 +0200 Subject: [PATCH 01/10] 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 | 70 +++++++++-------- 3 files changed, 81 insertions(+), 82 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 5d33681847a41..1bfbed9adfcae 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -110,7 +110,6 @@ body { font: 16px/1.4 "Source Serif 4", "Noto Sans KR", serif; margin: 0; position: relative; - padding: 10px 15px 20px 15px; -webkit-font-feature-settings: "kern", "liga"; -moz-font-feature-settings: "kern", "liga"; @@ -236,6 +235,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; } @@ -283,10 +301,8 @@ nav.sub { .sidebar { width: 200px; - position: fixed; - left: 0; - top: 0; - bottom: 0; + min-width: 200px; + height: 100vh; overflow: auto; } @@ -313,10 +329,6 @@ nav.sub { margin-right: -10px; } -.content, nav { - max-width: 960px; -} - /* Everything else */ .hidden { @@ -420,10 +432,6 @@ nav.sub { display: none; } -.content { - padding: 15px 0; -} - .source .content pre.rust { white-space: pre; overflow: auto; @@ -463,7 +471,6 @@ nav.sub { } #search { - margin-left: 230px; position: relative; } @@ -691,7 +698,7 @@ nav.sub { nav:not(.sidebar) { border-bottom: 1px solid; padding-bottom: 10px; - margin-bottom: 10px; + margin-bottom: 25px; } nav.main { padding: 20px 0; @@ -710,10 +717,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; @@ -1340,7 +1343,7 @@ pre.rust { .theme-picker { position: absolute; - left: 211px; + left: 11px; top: 19px; } @@ -1657,11 +1660,23 @@ details.undocumented[open] > summary::before { 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; @@ -1752,20 +1767,17 @@ details.undocumented[open] > summary::before { 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 { @@ -1774,7 +1786,7 @@ details.undocumented[open] > summary::before { .theme-picker { left: 10px; - top: 54px; + top: 9px; z-index: 1; } @@ -1794,22 +1806,12 @@ details.undocumented[open] > summary::before { } .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 { @@ -1924,13 +1926,6 @@ details.undocumented[open] > summary::before { 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 e396fd9d288db..8691a7de39037 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -971,7 +971,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 38dc3b30e72ac..269147ce319c2 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -67,40 +67,44 @@ {#- -#} {{- sidebar | safe -}} {#- -#} -
{#- -#} - {#- -#} - {#- -#} -
{#- -#} - {#- -#} -
{{- content | safe -}}
{#- -#} - {#- -#} + {#- -#} +
{{- content | safe -}}
{#- -#} + {#- -#} + {#- -#} + {#- -#} {{- layout.external_html.after_content | safe -}}
Date: Sun, 10 Oct 2021 00:52:14 +0200 Subject: [PATCH 02/10] rustdoc: fix source view --- src/librustdoc/html/static/css/rustdoc.css | 47 ++++++++++++++++++++-- src/librustdoc/html/templates/page.html | 25 ++++++++---- 2 files changed, 61 insertions(+), 11 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 1bfbed9adfcae..ad759456e7d85 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -249,11 +249,19 @@ main { overflow-y: auto; } +.source main { + padding: 15px; +} + .main-inner { max-width: 960px; margin-right: auto; } +.source .main-inner { + max-width: unset; +} + details:not(.rustdoc-toggle) summary { margin-bottom: .6em; } @@ -295,6 +303,7 @@ li { } nav.sub { + position: relative; font-size: 16px; text-transform: uppercase; } @@ -306,6 +315,10 @@ nav.sub { overflow: auto; } +.source .sidebar { + display: none; +} + /* Improve the scrollbar display on firefox */ * { scrollbar-width: initial; @@ -335,6 +348,18 @@ nav.sub { display: none !important; } +.logo-source { + display: none; +} + +.source .logo-source { + display: block; + position: absolute; + top: 0; + left: 0; + width: 200px; +} + .logo-container { height: 100px; width: 100px; @@ -700,6 +725,9 @@ nav:not(.sidebar) { padding-bottom: 10px; margin-bottom: 25px; } +.source nav:not(.sidebar).sub { + margin-left: 230px; +} nav.main { padding: 20px 0; text-align: center; @@ -791,6 +819,7 @@ h2.small-section-header > .anchor { .search-container { position: relative; + max-width: 960px; } .search-container > div { display: inline-flex; @@ -1343,8 +1372,8 @@ pre.rust { .theme-picker { position: absolute; - left: 11px; - top: 19px; + left: -34px; + top: 9px; } .theme-picker button { @@ -1771,10 +1800,18 @@ details.undocumented[open] > summary::before { margin-bottom: 10px; } + .source nav:not(.sidebar).sub { + margin-left: 32px; + } + .content { margin-left: 0px; } + .source .content { + margin-top: 10px; + } + #search { margin-left: 0; padding: 0; @@ -1785,8 +1822,6 @@ details.undocumented[open] > summary::before { } .theme-picker { - left: 10px; - top: 9px; z-index: 1; } @@ -1913,6 +1948,10 @@ details.undocumented[open] > summary::before { .search-results div.desc, .search-results .result-description, .item-right { padding-left: 2em; } + + .source .logo-source { + display: none; + } } @media print { diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 269147ce319c2..6dc80b0cb7280 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -69,14 +69,25 @@ {#- -#}
{#- -#}
{#- -#} -
{#- -#} - {#- -#} - {#- -#} -
{#- -#} + {#- -#} + {#- -#} + {#- -#}