Skip to content

Commit

Permalink
Auto merge of #119066 - notriddle:notriddle/sidebar-source-redesign, …
Browse files Browse the repository at this point in the history 
…r=GuillaumeGomez

rustdoc: clean up source sidebar hide button

This is a redesign of the feature, with parts pulled from #119049 but with a button that looks more like a button and matches the one used on other sidebar pages.

Preview:

* http://notriddle.com/rustdoc-html-demo-8/source-sidebar-resize/src/std/lib.rs.html
* http://notriddle.com/rustdoc-html-demo-8/source-sidebar-resize/std/index.html

| | Before | After |
|--|--|--|
| Closed | ![image](https://github.com/rust-lang/rust/assets/1593513/092bed75-79c3-412f-8e7b-557f30dfb1e3) | ![image](https://github.com/rust-lang/rust/assets/1593513/b68e1ee9-9aef-484d-a5b1-2fd29c9d72ea)
| Open | ![image](https://github.com/rust-lang/rust/assets/1593513/95cf9545-25b1-48ec-820b-02e1aec99839) | ![image](https://github.com/rust-lang/rust/assets/1593513/923532f6-59e0-4d7c-9976-21699c30d42e)
| Mobile Closed | ![image](https://github.com/rust-lang/rust/assets/1593513/9bc00cc5-937c-4120-94be-94c7cb6d5297) | ![image](https://github.com/rust-lang/rust/assets/1593513/76a744d8-aac2-46fe-abb9-3b34e2d3ccaa)
| Mobile Open | ![image](https://github.com/rust-lang/rust/assets/1593513/d19a94fe-47b1-462d-a280-44fc215b9b72) | ![image](https://github.com/rust-lang/rust/assets/1593513/2b2e3dec-b610-4b12-8a72-35b86359ba45)
  • Loading branch information
@bors
bors committed Dec 31, 2023
2 parents 1c20462 + 9566db1 commit 67b6975
Show file tree
Hide file tree
Showing 17 changed files with 152 additions and 242 deletions.
4 changes: 3 additions & 1 deletion src/librustdoc/html/static/css/noscript.css
View file
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
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 @@ -1531,47 +1518,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 @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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,<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 @@ -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. */
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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;
}

Expand Down
5 changes: 4 additions & 1 deletion src/librustdoc/html/static/js/main.js
View file
Expand Up @@ -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();
});
}
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit 67b6975

Please sign in to comment.