diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 90aa5904dafe8..0d54692e8c5a9 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -38,6 +38,11 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\ --code-block-border-radius: 6px; --impl-items-indent: 0.3em; --docblock-indent: 24px; + --mobile-top-navbar-height: 45px; + --collapse-toggle-left: -24px; + --main-top-padding: 10px; + --search-top-margin: 4px; + --sidebar-button-size: 34px; } /* See FiraSans-LICENSE.txt for the Fira Sans license. */ @@ -365,7 +370,7 @@ button#toggle-all-docs { main { position: relative; flex-grow: 1; - padding: 10px 15px 40px 45px; + padding: var(--main-top-padding) 15px 40px 45px; min-width: 0; /* avoid growing beyond the size limit */ } @@ -746,7 +751,8 @@ ul.block, .block li, .block ul { /* extend click target to far edge of screen (mile wide bar) */ border-left: solid var(--sidebar-elems-left-padding) transparent; background-clip: border-box; - margin: 0 calc(-24px + 0.25rem) 0 calc(-0.2rem - var(--sidebar-elems-left-padding)); + margin: 0 calc(var(--collapse-toggle-left) + 0.25rem) 0 + calc(-0.2rem - var(--sidebar-elems-left-padding)); /* Align the sidebar crate link with the search bar, which have different font sizes. @@ -1002,7 +1008,7 @@ div.where { nav.sub { flex-grow: 1; flex-flow: row nowrap; - margin: 4px 0 0 0; + margin: var(--search-top-margin) 0 0 0; display: flex; align-items: center; } @@ -1869,13 +1875,22 @@ a.tooltip:hover::after { display: flex; margin-right: 4px; position: fixed; - left: 6px; - height: 34px; - width: 34px; background-color: var(--main-background-color); z-index: 1; } +.hide-sidebar #sidebar-button { + left: 0; + /* We need to do all this so this button is positioned correctly but also to hide everything + going under beneath it. */ + height: calc(var(--sidebar-button-size) + var(--main-top-padding) + var(--search-top-margin)); + /* 6px is the left padding */ + width: calc(var(--sidebar-button-size) + 6px); + padding-left: 6px; + padding-top: calc(var(--main-top-padding) + var(--search-top-margin)); +} .src #sidebar-button { + height: var(--sidebar-button-size); + width: var(--sidebar-button-size); left: 8px; z-index: calc(var(--desktop-sidebar-z-index) + 1); } @@ -2163,13 +2178,13 @@ details.toggle > summary.hideme::before { details.toggle > summary:not(.hideme)::before { position: absolute; - left: -24px; + left: var(--collapse-toggle-left); top: 4px; } .impl-items > details.toggle > summary:not(.hideme)::before { position: absolute; - left: -24px; + left: var(--collapse-toggle-left); } /* We indent items of an impl block to have a visual marker that these items are part @@ -2181,6 +2196,26 @@ details.toggle > summary:not(.hideme)::before { margin-left: var(--impl-items-indent); } +h2.section-header + div > details.implementors-toggle > summary, +details.toggle.big-toggle > summary { + position: sticky; + top: 0; + background: var(--main-background-color); + z-index: 1; + padding-left: calc(var(--collapse-toggle-left) * -1); + margin-left: var(--collapse-toggle-left); +} +h2.section-header + div > details.implementors-toggle > summary:not(.hideme)::before, +details.toggle.big-toggle > summary:not(.hideme)::before { + left: -4px; +} +h2.section-header + div > details.implementors-toggle > summary .anchor { + left: calc(-0.5rem - var(--collapse-toggle-left)); +} +details.toggle.big-toggle > summary .anchor { + left: -0.8rem; +} + details.big-toggle > summary:not(.hideme)::before { left: -34px; top: 9px; @@ -2272,6 +2307,7 @@ in src-script.js and main.js @media (max-width: 700px) { :root { --impl-items-indent: 0.7em; + --collapse-toggle-left: -11px; } /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar, @@ -2279,7 +2315,7 @@ in src-script.js and main.js by the topbar. Anything with an `id` gets scroll-margin-top equal to .mobile-topbar's size. */ *[id] { - scroll-margin-top: 45px; + scroll-margin-top: var(--mobile-top-navbar-height); } /* We don't display this button on mobile devices. */ @@ -2327,13 +2363,13 @@ in src-script.js and main.js .sidebar { position: fixed; - top: 45px; + top: var(--mobile-top-navbar-height); /* Hide the sidebar offscreen while not in use. Doing this instead of display: none means the sidebar stays visible for screen readers, which is useful for navigation. */ left: -1000px; z-index: 11; /* Reduce height slightly to account for mobile topbar. */ - height: calc(100vh - 45px); + height: calc(100vh - var(--mobile-top-navbar-height)); width: 200px; } @@ -2390,7 +2426,7 @@ in src-script.js and main.js position: sticky; z-index: 10; font-size: 2rem; - height: 45px; + height: var(--mobile-top-navbar-height); width: 100%; left: 0; top: 0; @@ -2418,11 +2454,6 @@ in src-script.js and main.js display: none !important; } - #main-content > details.toggle > summary::before, - #main-content > div > details.toggle > summary::before { - left: -11px; - } - /* sidebar button becomes topbar button */ #sidebar-button > a:before { content: url('data:image/svg+xml, details.implementors-toggle > summary, + details.toggle.big-toggle > summary { + top: var(--mobile-top-navbar-height); + } } @@ -2552,6 +2588,10 @@ in src-script.js and main.js .search-form { align-self: stretch; } + + #main-content > details.toggle > summary::before { + left: var(--collapse-toggle-left); + } } .variant, diff --git a/tests/rustdoc-gui/anchor-navigable.goml b/tests/rustdoc-gui/anchor-navigable.goml index 61d7c89d434ff..54df7128ebff1 100644 --- a/tests/rustdoc-gui/anchor-navigable.goml +++ b/tests/rustdoc-gui/anchor-navigable.goml @@ -8,4 +8,4 @@ go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html" // We check that ".item-info" is bigger than its content. move-cursor-to: ".impl" assert-property: (".impl > a.anchor", {"offsetWidth": "8"}) -assert-css: (".impl > a.anchor", {"left": "-8px"}) +assert-css: (".impl > a.anchor", {"left": "16px"}) diff --git a/tests/rustdoc-gui/deref-block.goml b/tests/rustdoc-gui/deref-block.goml index 97930b61ef4a5..f480a6ab3d83b 100644 --- a/tests/rustdoc-gui/deref-block.goml +++ b/tests/rustdoc-gui/deref-block.goml @@ -4,7 +4,7 @@ go-to: "file://" + |DOC_PATH| + "/lib2/struct.Derefer.html" assert-text: (".big-toggle summary", "Methods from Deref§") // We ensure it doesn't go over `§`. assert-css: (".big-toggle summary::before", { - "left": "-34px", + "left": "-4px", "top": "9px", }) // It should NOT have the same X or Y position as the other toggles. @@ -17,13 +17,13 @@ compare-elements-position-false: ( // We now check that if we're in mobile mode, it gets back to its original X position. set-window-size: (600, 600) assert-css: (".big-toggle summary::before", { - "left": "-11px", + "left": "-4px", "top": "9px", }) // It should have a slightly different X position as the other toggles. store-position: (".big-toggle summary::before", {"x": big_toggle}) store-position: (".method-toggle summary::before", {"x": small_toggle}) -assert: |big_toggle| < |small_toggle| +assert: |big_toggle| > |small_toggle| // Margin is 0.5em so around 8 px. assert: |small_toggle| - |big_toggle| < 10 // But still shouldn't have the same Y position. diff --git a/tests/rustdoc-gui/toggle-docs-mobile.goml b/tests/rustdoc-gui/toggle-docs-mobile.goml index be12e4c19b3bd..bd30bcdfa2a28 100644 --- a/tests/rustdoc-gui/toggle-docs-mobile.goml +++ b/tests/rustdoc-gui/toggle-docs-mobile.goml @@ -14,7 +14,7 @@ assert-attribute: (".top-doc", {"open": ""}) // Assert the position of the toggle on the top doc block. assert-position: (".top-doc summary::before", {"x": 4}) // Assert the position of the toggle on the impl block. -assert-position: ("#implementations-list > details > summary::before", {"x": 4}) +assert-position: ("#implementations-list > details > summary::before", {"x": 11}) // Assert the position of the toggle on a method. assert-position: ( "#trait-implementations-list .impl-items .method-toggle > summary::before", @@ -24,10 +24,10 @@ assert-position: ( // Now we do the same but with a little bigger width set-window-size: (600, 600) assert-attribute: (".top-doc", {"open": ""}) -click: (4, 270) // New Y position since all search elements are back on one line. +click: (30, 270) // New Y position since all search elements are back on one line. assert-attribute-false: (".top-doc", {"open": ""}) -click: (4, 270) +click: (30, 270) assert-attribute: (".top-doc", {"open": ""}) // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked. -click: (3, 270) +click: (31, 270) assert-attribute: (".top-doc", {"open": ""})