diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css index 390e812772a70..f425f3ec95c31 100644 --- a/src/librustdoc/html/static/css/noscript.css +++ b/src/librustdoc/html/static/css/noscript.css @@ -11,7 +11,7 @@ rules. #copy-path, #sidebar-button, .sidebar-resizer { /* It requires JS to work so no need to display it in this case. */ - display: none; + display: none !important; } nav.sub { @@ -54,6 +54,7 @@ nav.sub { --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: none; + --mobile-sidebar-menu-filter: none; --search-input-focused-border-color: #66afe9; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -159,6 +160,7 @@ nav.sub { --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: invert(100%); + --mobile-sidebar-menu-filter: invert(100%); --search-input-focused-border-color: #008dfd; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 665bb5d42bcc4..995fd5d054d53 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -366,22 +366,12 @@ img { max-width: 100%; } -.sub-logo-container, .logo-container { +.logo-container { /* zero text boxes so that computed line height = image height exactly */ line-height: 0; display: block; } -.sub-logo-container { - margin-right: 32px; -} - -.sub-logo-container > img { - height: 60px; - width: 60px; - object-fit: contain; -} - .rust-logo { filter: var(--rust-logo-filter); } @@ -401,6 +391,7 @@ img { .rustdoc.src .sidebar { flex-basis: 50px; + width: 50px; border-right: 1px solid; overflow-x: hidden; /* The sidebar is by default hidden */ @@ -424,12 +415,12 @@ img { } .rustdoc.src .sidebar-resizer { - /* when closed, place resizer glow on top of the normal src sidebar border (no need to worry - about sidebar) */ + /* when closed, place resizer glow on top of the normal src sidebar border (no need to + worry about sidebar) */ left: 49px; } -.src-sidebar-expanded .rustdoc.src .sidebar-resizer { +.src-sidebar-expanded .src .sidebar-resizer { /* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer to right of it */ left: var(--src-sidebar-width); @@ -497,15 +488,11 @@ img { } .sidebar, .mobile-topbar, .sidebar-menu-toggle, -#src-sidebar-toggle, #src-sidebar { +#src-sidebar { background-color: var(--sidebar-background-color); } -#src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus { - background-color: var(--sidebar-background-color-hover); -} - -.src .sidebar > *:not(#src-sidebar-toggle) { +.src .sidebar > * { visibility: hidden; } @@ -515,7 +502,7 @@ img { width: var(--src-sidebar-width); } -.src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) { +.src-sidebar-expanded .src .sidebar > * { visibility: visible; } @@ -1531,28 +1518,10 @@ a.tooltip:hover::after { font-weight: normal; } -#src-sidebar-toggle { - position: sticky; - top: 0; - left: 0; - font-size: 1.25rem; - border-bottom: 1px solid; - display: flex; - height: 40px; - justify-content: stretch; - align-items: stretch; - z-index: 10; -} #src-sidebar { width: 100%; overflow: auto; } -#src-sidebar > .title { - font-size: 1.5rem; - text-align: center; - border-bottom: 1px solid var(--border-color); - margin-bottom: 6px; -} #src-sidebar div.files > a:hover, details.dir-entry summary:hover, #src-sidebar div.files > a:focus, details.dir-entry summary:focus { background-color: var(--src-sidebar-background-hover); @@ -1560,18 +1529,15 @@ a.tooltip:hover::after { #src-sidebar div.files > a.selected { background-color: var(--src-sidebar-background-selected); } -#src-sidebar-toggle > button { - font-size: inherit; - font-weight: bold; - background: none; - color: inherit; - text-align: center; - border: none; - outline: none; - flex: 1 1; - /* iOS button gradient: https://stackoverflow.com/q/5438567 */ - -webkit-appearance: none; - opacity: 1; + +.src-sidebar-title { + position: sticky; + top: 0; + display: flex; + padding: 8px 8px 0 48px; + margin-bottom: 7px; + background: var(--sidebar-background-color); + border-bottom: 1px solid var(--border-color); } #settings-menu, #help-button { @@ -1580,8 +1546,10 @@ a.tooltip:hover::after { } #sidebar-button { display: none; + line-height: 0; } -.hide-sidebar #sidebar-button { +.hide-sidebar #sidebar-button, +.src #sidebar-button { display: flex; margin-right: 4px; position: fixed; @@ -1591,6 +1559,13 @@ a.tooltip:hover::after { background-color: var(--main-background-color); z-index: 1; } +.src #sidebar-button { + left: 8px; + z-index: 101; +} +.hide-sidebar .src #sidebar-button { + position: static; +} #settings-menu > a, #help-button > a, #sidebar-button > a { display: flex; align-items: center; @@ -1823,6 +1798,30 @@ However, it's not needed with smaller screen width because the doc/code block is margin-top: 16px; } +/* sidebar button opens modal + use hamburger button */ +.src #sidebar-button > a:before, .sidebar-menu-toggle:before { + content: url('data:image/svg+xml,\ + '); + opacity: 0.75; +} +.sidebar-menu-toggle:hover:before, +.sidebar-menu-toggle:active:before, +.sidebar-menu-toggle:focus:before { + opacity: 1; +} + +/* src sidebar button opens a folder view */ +.src #sidebar-button > a:before { + content: url('data:image/svg+xml,\ + \ + \ + '); + opacity: 0.75; +} + /* Media Queries */ /* Make sure all the buttons line wrap at the same time */ @@ -1846,10 +1845,6 @@ in src-script.js and main.js scroll-margin-top: 45px; } - .hide-sidebar #sidebar-button { - position: static; - } - .rustdoc { /* Sidebar should overlay main content, rather than pushing main content to the right. Turn off `display: flex` on the body element. */ @@ -1904,6 +1899,15 @@ in src-script.js and main.js height: 100vh; border: 0; } + .src .search-form { + margin-left: 40px; + } + .hide-sidebar .search-form { + margin-left: 32px; + } + .hide-sidebar .src .search-form { + margin-left: 0; + } .sidebar.shown, .src-sidebar-expanded .src .sidebar, @@ -1953,11 +1957,8 @@ in src-script.js and main.js .sidebar-menu-toggle { width: 45px; - /* Rare exception to specifying font sizes in rem. Since this is acting - as an icon, it's okay to specify its sizes in pixels. */ - font-size: 32px; border: none; - color: var(--main-color); + line-height: 0; } .hide-sidebar .sidebar-menu-toggle { @@ -1977,31 +1978,6 @@ in src-script.js and main.js left: -11px; } - #src-sidebar-toggle { - position: fixed; - left: 1px; - top: 100px; - width: 30px; - font-size: 1.5rem; - padding: 0; - z-index: 10; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - border: 1px solid; - border-left: 0; - } - - .src-sidebar-expanded #src-sidebar-toggle { - left: unset; - top: unset; - width: unset; - border-top-right-radius: unset; - border-bottom-right-radius: unset; - position: sticky; - border: 0; - border-bottom: 1px solid; - } - /* We don't display these buttons on mobile devices. */ #copy-path, #help-button { display: none; @@ -2017,6 +1993,12 @@ in src-script.js and main.js width: 22px; height: 22px; } + .sidebar-menu-toggle:before { + filter: var(--mobile-sidebar-menu-filter); + } + .sidebar-menu-toggle:hover { + background: var(--main-background-color); + } /* Display an alternating layout on tablets and phones */ .item-table, .item-row, .item-table > li, .item-table > li > div, @@ -2043,9 +2025,13 @@ in src-script.js and main.js } .src-sidebar-expanded .src .sidebar { + position: fixed; max-width: 100vw; width: 100vw; } + .src .src-sidebar-title { + padding-top: 0; + } /* Position of the "[-]" element. */ details.toggle:not(.top-doc) > summary { @@ -2117,12 +2103,6 @@ in src-script.js and main.js .search-form { align-self: stretch; } - - .sub-logo-container > img { - height: 35px; - width: 35px; - margin-bottom: var(--nav-sub-mobile-padding); - } } .variant, @@ -2344,6 +2324,7 @@ in src-script.js and main.js --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: none; + --mobile-sidebar-menu-filter: none; --search-input-focused-border-color: #66afe9; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -2448,6 +2429,7 @@ in src-script.js and main.js --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: invert(100%); + --mobile-sidebar-menu-filter: invert(100%); --search-input-focused-border-color: #008dfd; --copy-path-button-color: #999; --copy-path-img-filter: invert(50%); @@ -2559,6 +2541,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) --code-attribute-color: #999; --toggles-color: #999; --toggle-filter: invert(100%); + --mobile-sidebar-menu-filter: invert(100%); --search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */ --copy-path-button-color: #fff; --copy-path-img-filter: invert(70%); @@ -2650,8 +2633,7 @@ Original by Dempfi (https://github.com/dempfi/ayu) :root[data-theme="ayu"] h4, :where(:root[data-theme="ayu"]) h1 a, :root[data-theme="ayu"] .sidebar h2 a, -:root[data-theme="ayu"] .sidebar h3 a, -:root[data-theme="ayu"] #source-sidebar > .title { +:root[data-theme="ayu"] .sidebar h3 a { color: #fff; } diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index e205ba46dbf89..88901191cda25 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -1523,6 +1523,9 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm sidebarButton.addEventListener("click", e => { removeClass(document.documentElement, "hide-sidebar"); updateLocalStorage("hide-sidebar", "false"); + if (document.querySelector(".rustdoc.src")) { + window.rustdocToggleSrcSidebar(); + } e.preventDefault(); }); } @@ -1647,7 +1650,7 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm return; } e.preventDefault(); - const pos = e.clientX - sidebar.offsetLeft - 3; + const pos = e.clientX - 3; if (pos < SIDEBAR_VANISH_THRESHOLD) { hideSidebar(); } else if (pos >= SIDEBAR_MIN) { diff --git a/src/librustdoc/html/static/js/src-script.js b/src/librustdoc/html/static/js/src-script.js index fc1d2d37845eb..3003f4c150338 100644 --- a/src/librustdoc/html/static/js/src-script.js +++ b/src/librustdoc/html/static/js/src-script.js @@ -2,7 +2,7 @@ /* global srcIndex */ // Local js definitions: -/* global addClass, getCurrentValue, onEachLazy, removeClass, browserSupportsHistoryApi */ +/* global addClass, onEachLazy, removeClass, browserSupportsHistoryApi */ /* global updateLocalStorage, getVar */ "use strict"; @@ -71,68 +71,34 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) { return hasFoundFile; } -let toggleLabel; - -function getToggleLabel() { - toggleLabel = toggleLabel || document.querySelector("#src-sidebar-toggle button"); - return toggleLabel; -} - window.rustdocCloseSourceSidebar = () => { removeClass(document.documentElement, "src-sidebar-expanded"); - getToggleLabel().innerText = ">"; updateLocalStorage("source-sidebar-show", "false"); }; window.rustdocShowSourceSidebar = () => { addClass(document.documentElement, "src-sidebar-expanded"); - getToggleLabel().innerText = "<"; updateLocalStorage("source-sidebar-show", "true"); }; -function toggleSidebar() { - const child = this.parentNode.children[0]; - if (child.innerText === ">") { - window.rustdocShowSourceSidebar(); - } else { +window.rustdocToggleSrcSidebar = () => { + if (document.documentElement.classList.contains("src-sidebar-expanded")) { window.rustdocCloseSourceSidebar(); - } -} - -function createSidebarToggle() { - const sidebarToggle = document.createElement("div"); - sidebarToggle.id = "src-sidebar-toggle"; - - const inner = document.createElement("button"); - - if (getCurrentValue("source-sidebar-show") === "true") { - inner.innerText = "<"; } else { - inner.innerText = ">"; + window.rustdocShowSourceSidebar(); } - inner.onclick = toggleSidebar; - - sidebarToggle.appendChild(inner); - return sidebarToggle; -} +}; // This function is called from "src-files.js", generated in `html/render/write_shared.rs`. // eslint-disable-next-line no-unused-vars function createSrcSidebar() { const container = document.querySelector("nav.sidebar"); - const sidebarToggle = createSidebarToggle(); - container.insertBefore(sidebarToggle, container.firstChild); - const sidebar = document.createElement("div"); sidebar.id = "src-sidebar"; let hasFoundFile = false; - const title = document.createElement("div"); - title.className = "title"; - title.innerText = "Files"; - sidebar.appendChild(title); for (const [key, source] of srcIndex) { source[NAME_OFFSET] = key; hasFoundFile = createDirEntry(source, sidebar, "", hasFoundFile); diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 60ca5660c0205..e5bb8e6d19cec 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -77,7 +77,7 @@ {{ layout.external_html.before_content|safe }} {% if page.css_class != "src" %} {# #} @@ -118,22 +122,11 @@

{# #}
{# #} {% if page.css_class != "src" %}
{% endif %}