Skip to content

rustdoc: clean up source sidebar hide button #119066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 31, 2023
Merged

rustdoc: clean up source sidebar hide button #119066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
859bbc5
rustdoc: clean up source sidebar hide button
notriddle Dec 18, 2023
bd14fb6
Add back the column
notriddle Dec 18, 2023
c3e29ea
Stop using the trigram of heaven as a hamburger button
notriddle Dec 18, 2023
66779ff
Add border bottom for source sidebar title area
notriddle Dec 18, 2023
34984a6
Use folder icon instead of hamburger and sidebar
notriddle Dec 19, 2023
9566db1
Fix corner cases when dealing with mobile mode
notriddle Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/librustdoc/html/static/css/noscript.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down
168 changes: 75 additions & 93 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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 */
Expand All @@ -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);
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}

Expand Down Expand Up @@ -1528,47 +1515,26 @@ 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);
}
#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 {
Expand All @@ -1577,8 +1543,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;
Expand All @@ -1588,6 +1556,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;
Expand Down Expand Up @@ -1820,6 +1795,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,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
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,<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="0 0 22 22" fill="none" stroke="black">\
<path d="M16,9v-4h-6v-1l-2,-2h-4l-2,2v16h13L21,9h-15L2,19" stroke-width="1.25"/>\
<path d="M15,7h-11v3" stroke-width="0.75"/>\
<path d="M3.75,10v1.25" stroke-width="0.375"/></svg>');
opacity: 0.75;
}

/* Media Queries */

/* Make sure all the buttons line wrap at the same time */
Expand All @@ -1843,10 +1842,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. */
Expand Down Expand Up @@ -1901,6 +1896,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,
Expand Down Expand Up @@ -1950,11 +1954,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 {
Expand All @@ -1974,31 +1975,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;
Expand All @@ -2014,6 +1990,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,
Expand All @@ -2040,9 +2022,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 {
Expand Down Expand Up @@ -2114,12 +2100,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,
Expand Down Expand Up @@ -2341,6 +2321,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%);
Expand Down Expand Up @@ -2445,6 +2426,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%);
Expand Down Expand Up @@ -2556,6 +2538,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%);
Expand Down Expand Up @@ -2647,8 +2630,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;
}

Expand Down
5 changes: 4 additions & 1 deletion src/librustdoc/html/static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1522,6 +1522,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();
});
}
Expand Down Expand Up @@ -1646,7 +1649,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) {
Expand Down
Loading