Skip to content

Commit

Permalink
Make impl section headers sticky
Browse files Browse the repository at this point in the history
  • Loading branch information
GuillaumeGomez committed Dec 1, 2024
1 parent 5e1440a commit 5f624c3
Showing 1 changed file with 40 additions and 12 deletions.
52 changes: 40 additions & 12 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ 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;
}

/* See FiraSans-LICENSE.txt for the Fira Sans license. */
Expand Down Expand Up @@ -746,7 +748,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.
Expand Down Expand Up @@ -2163,13 +2166,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
Expand All @@ -2181,6 +2184,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;
Expand Down Expand Up @@ -2272,14 +2295,15 @@ 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,
or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
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. */
Expand Down Expand Up @@ -2327,13 +2351,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;
}

Expand Down Expand Up @@ -2390,7 +2414,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;
Expand Down Expand Up @@ -2418,11 +2442,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,<svg xmlns="http://www.w3.org/2000/svg" \
Expand Down Expand Up @@ -2493,6 +2512,11 @@ in src-script.js and main.js
margin: 0 0 -25px 0;
padding: var(--nav-sub-mobile-padding);
}

h2.section-header + div > details.implementors-toggle > summary,
details.toggle.big-toggle > summary {
top: var(--mobile-top-navbar-height);
}
}


Expand Down Expand Up @@ -2552,6 +2576,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,
Expand Down

0 comments on commit 5f624c3

Please sign in to comment.