Skip to content

Commit 67b6975

Browse files
borsbors
committed
Auto merge of rust-lang#119066 - notriddle:notriddle/sidebar-source-redesign, r=GuillaumeGomez
rustdoc: clean up source sidebar hide button This is a redesign of the feature, with parts pulled from rust-lang#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)
2 parents 1c20462 + 9566db1 commit 67b6975

17 files changed

+152
-242
lines changed

‎src/librustdoc/html/static/css/noscript.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ rules.
1111

1212
#copy-path, #sidebar-button, .sidebar-resizer {
1313
/* It requires JS to work so no need to display it in this case. */
14-
display: none;
14+
display: none !important;
1515
}
1616

1717
nav.sub {
@@ -54,6 +54,7 @@ nav.sub {
5454
--code-attribute-color: #999;
5555
--toggles-color: #999;
5656
--toggle-filter: none;
57+
--mobile-sidebar-menu-filter: none;
5758
--search-input-focused-border-color: #66afe9;
5859
--copy-path-button-color: #999;
5960
--copy-path-img-filter: invert(50%);
@@ -159,6 +160,7 @@ nav.sub {
159160
--code-attribute-color: #999;
160161
--toggles-color: #999;
161162
--toggle-filter: invert(100%);
163+
--mobile-sidebar-menu-filter: invert(100%);
162164
--search-input-focused-border-color: #008dfd;
163165
--copy-path-button-color: #999;
164166
--copy-path-img-filter: invert(50%);

‎src/librustdoc/html/static/css/rustdoc.css

Lines changed: 75 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -366,22 +366,12 @@ img {
366366
max-width: 100%;
367367
}
368368

369-
.sub-logo-container, .logo-container {
369+
.logo-container {
370370
/* zero text boxes so that computed line height = image height exactly */
371371
line-height: 0;
372372
display: block;
373373
}
374374

375-
.sub-logo-container {
376-
margin-right: 32px;
377-
}
378-
379-
.sub-logo-container > img {
380-
height: 60px;
381-
width: 60px;
382-
object-fit: contain;
383-
}
384-
385375
.rust-logo {
386376
filter: var(--rust-logo-filter);
387377
}
@@ -401,6 +391,7 @@ img {
401391

402392
.rustdoc.src .sidebar {
403393
flex-basis: 50px;
394+
width: 50px;
404395
border-right: 1px solid;
405396
overflow-x: hidden;
406397
/* The sidebar is by default hidden */
@@ -424,12 +415,12 @@ img {
424415
}
425416

426417
.rustdoc.src .sidebar-resizer {
427-
/* when closed, place resizer glow on top of the normal src sidebar border (no need to worry
428-
about sidebar) */
418+
/* when closed, place resizer glow on top of the normal src sidebar border (no need to
419+
worry about sidebar) */
429420
left: 49px;
430421
}
431422

432-
.src-sidebar-expanded .rustdoc.src .sidebar-resizer {
423+
.src-sidebar-expanded .src .sidebar-resizer {
433424
/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer
434425
to right of it */
435426
left: var(--src-sidebar-width);
@@ -497,15 +488,11 @@ img {
497488
}
498489

499490
.sidebar, .mobile-topbar, .sidebar-menu-toggle,
500-
#src-sidebar-toggle, #src-sidebar {
491+
#src-sidebar {
501492
background-color: var(--sidebar-background-color);
502493
}
503494

504-
#src-sidebar-toggle > button:hover, #src-sidebar-toggle > button:focus {
505-
background-color: var(--sidebar-background-color-hover);
506-
}
507-
508-
.src .sidebar > *:not(#src-sidebar-toggle) {
495+
.src .sidebar > * {
509496
visibility: hidden;
510497
}
511498

@@ -515,7 +502,7 @@ img {
515502
width: var(--src-sidebar-width);
516503
}
517504

518-
.src-sidebar-expanded .src .sidebar > *:not(#src-sidebar-toggle) {
505+
.src-sidebar-expanded .src .sidebar > * {
519506
visibility: visible;
520507
}
521508

@@ -1531,47 +1518,26 @@ a.tooltip:hover::after {
15311518
font-weight: normal;
15321519
}
15331520

1534-
#src-sidebar-toggle {
1535-
position: sticky;
1536-
top: 0;
1537-
left: 0;
1538-
font-size: 1.25rem;
1539-
border-bottom: 1px solid;
1540-
display: flex;
1541-
height: 40px;
1542-
justify-content: stretch;
1543-
align-items: stretch;
1544-
z-index: 10;
1545-
}
15461521
#src-sidebar {
15471522
width: 100%;
15481523
overflow: auto;
15491524
}
1550-
#src-sidebar > .title {
1551-
font-size: 1.5rem;
1552-
text-align: center;
1553-
border-bottom: 1px solid var(--border-color);
1554-
margin-bottom: 6px;
1555-
}
15561525
#src-sidebar div.files > a:hover, details.dir-entry summary:hover,
15571526
#src-sidebar div.files > a:focus, details.dir-entry summary:focus {
15581527
background-color: var(--src-sidebar-background-hover);
15591528
}
15601529
#src-sidebar div.files > a.selected {
15611530
background-color: var(--src-sidebar-background-selected);
15621531
}
1563-
#src-sidebar-toggle > button {
1564-
font-size: inherit;
1565-
font-weight: bold;
1566-
background: none;
1567-
color: inherit;
1568-
text-align: center;
1569-
border: none;
1570-
outline: none;
1571-
flex: 1 1;
1572-
/* iOS button gradient: https://stackoverflow.com/q/5438567 */
1573-
-webkit-appearance: none;
1574-
opacity: 1;
1532+
1533+
.src-sidebar-title {
1534+
position: sticky;
1535+
top: 0;
1536+
display: flex;
1537+
padding: 8px 8px 0 48px;
1538+
margin-bottom: 7px;
1539+
background: var(--sidebar-background-color);
1540+
border-bottom: 1px solid var(--border-color);
15751541
}
15761542

15771543
#settings-menu, #help-button {
@@ -1580,8 +1546,10 @@ a.tooltip:hover::after {
15801546
}
15811547
#sidebar-button {
15821548
display: none;
1549+
line-height: 0;
15831550
}
1584-
.hide-sidebar #sidebar-button {
1551+
.hide-sidebar #sidebar-button,
1552+
.src #sidebar-button {
15851553
display: flex;
15861554
margin-right: 4px;
15871555
position: fixed;
@@ -1591,6 +1559,13 @@ a.tooltip:hover::after {
15911559
background-color: var(--main-background-color);
15921560
z-index: 1;
15931561
}
1562+
.src #sidebar-button {
1563+
left: 8px;
1564+
z-index: 101;
1565+
}
1566+
.hide-sidebar .src #sidebar-button {
1567+
position: static;
1568+
}
15941569
#settings-menu > a, #help-button > a, #sidebar-button > a {
15951570
display: flex;
15961571
align-items: center;
@@ -1823,6 +1798,30 @@ However, it's not needed with smaller screen width because the doc/code block is
18231798
margin-top: 16px;
18241799
}
18251800

1801+
/* sidebar button opens modal
1802+
use hamburger button */
1803+
.src #sidebar-button > a:before, .sidebar-menu-toggle:before {
1804+
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
1805+
viewBox="0 0 22 22" fill="none" stroke="black">\
1806+
<path d="M3,5h16M3,11h16M3,17h16" stroke-width="2.75"/></svg>');
1807+
opacity: 0.75;
1808+
}
1809+
.sidebar-menu-toggle:hover:before,
1810+
.sidebar-menu-toggle:active:before,
1811+
.sidebar-menu-toggle:focus:before {
1812+
opacity: 1;
1813+
}
1814+
1815+
/* src sidebar button opens a folder view */
1816+
.src #sidebar-button > a:before {
1817+
content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
1818+
viewBox="0 0 22 22" fill="none" stroke="black">\
1819+
<path d="M16,9v-4h-6v-1l-2,-2h-4l-2,2v16h13L21,9h-15L2,19" stroke-width="1.25"/>\
1820+
<path d="M15,7h-11v3" stroke-width="0.75"/>\
1821+
<path d="M3.75,10v1.25" stroke-width="0.375"/></svg>');
1822+
opacity: 0.75;
1823+
}
1824+
18261825
/* Media Queries */
18271826

18281827
/* Make sure all the buttons line wrap at the same time */
@@ -1846,10 +1845,6 @@ in src-script.js and main.js
18461845
scroll-margin-top: 45px;
18471846
}
18481847

1849-
.hide-sidebar #sidebar-button {
1850-
position: static;
1851-
}
1852-
18531848
.rustdoc {
18541849
/* Sidebar should overlay main content, rather than pushing main content to the right.
18551850
Turn off `display: flex` on the body element. */
@@ -1904,6 +1899,15 @@ in src-script.js and main.js
19041899
height: 100vh;
19051900
border: 0;
19061901
}
1902+
.src .search-form {
1903+
margin-left: 40px;
1904+
}
1905+
.hide-sidebar .search-form {
1906+
margin-left: 32px;
1907+
}
1908+
.hide-sidebar .src .search-form {
1909+
margin-left: 0;
1910+
}
19071911

19081912
.sidebar.shown,
19091913
.src-sidebar-expanded .src .sidebar,
@@ -1953,11 +1957,8 @@ in src-script.js and main.js
19531957

19541958
.sidebar-menu-toggle {
19551959
width: 45px;
1956-
/* Rare exception to specifying font sizes in rem. Since this is acting
1957-
as an icon, it's okay to specify its sizes in pixels. */
1958-
font-size: 32px;
19591960
border: none;
1960-
color: var(--main-color);
1961+
line-height: 0;
19611962
}
19621963

19631964
.hide-sidebar .sidebar-menu-toggle {
@@ -1977,31 +1978,6 @@ in src-script.js and main.js
19771978
left: -11px;
19781979
}
19791980

1980-
#src-sidebar-toggle {
1981-
position: fixed;
1982-
left: 1px;
1983-
top: 100px;
1984-
width: 30px;
1985-
font-size: 1.5rem;
1986-
padding: 0;
1987-
z-index: 10;
1988-
border-top-right-radius: 3px;
1989-
border-bottom-right-radius: 3px;
1990-
border: 1px solid;
1991-
border-left: 0;
1992-
}
1993-
1994-
.src-sidebar-expanded #src-sidebar-toggle {
1995-
left: unset;
1996-
top: unset;
1997-
width: unset;
1998-
border-top-right-radius: unset;
1999-
border-bottom-right-radius: unset;
2000-
position: sticky;
2001-
border: 0;
2002-
border-bottom: 1px solid;
2003-
}
2004-
20051981
/* We don't display these buttons on mobile devices. */
20061982
#copy-path, #help-button {
20071983
display: none;
@@ -2017,6 +1993,12 @@ in src-script.js and main.js
20171993
width: 22px;
20181994
height: 22px;
20191995
}
1996+
.sidebar-menu-toggle:before {
1997+
filter: var(--mobile-sidebar-menu-filter);
1998+
}
1999+
.sidebar-menu-toggle:hover {
2000+
background: var(--main-background-color);
2001+
}
20202002

20212003
/* Display an alternating layout on tablets and phones */
20222004
.item-table, .item-row, .item-table > li, .item-table > li > div,
@@ -2043,9 +2025,13 @@ in src-script.js and main.js
20432025
}
20442026

20452027
.src-sidebar-expanded .src .sidebar {
2028+
position: fixed;
20462029
max-width: 100vw;
20472030
width: 100vw;
20482031
}
2032+
.src .src-sidebar-title {
2033+
padding-top: 0;
2034+
}
20492035

20502036
/* Position of the "[-]" element. */
20512037
details.toggle:not(.top-doc) > summary {
@@ -2117,12 +2103,6 @@ in src-script.js and main.js
21172103
.search-form {
21182104
align-self: stretch;
21192105
}
2120-
2121-
.sub-logo-container > img {
2122-
height: 35px;
2123-
width: 35px;
2124-
margin-bottom: var(--nav-sub-mobile-padding);
2125-
}
21262106
}
21272107

21282108
.variant,
@@ -2344,6 +2324,7 @@ in src-script.js and main.js
23442324
--code-attribute-color: #999;
23452325
--toggles-color: #999;
23462326
--toggle-filter: none;
2327+
--mobile-sidebar-menu-filter: none;
23472328
--search-input-focused-border-color: #66afe9;
23482329
--copy-path-button-color: #999;
23492330
--copy-path-img-filter: invert(50%);
@@ -2448,6 +2429,7 @@ in src-script.js and main.js
24482429
--code-attribute-color: #999;
24492430
--toggles-color: #999;
24502431
--toggle-filter: invert(100%);
2432+
--mobile-sidebar-menu-filter: invert(100%);
24512433
--search-input-focused-border-color: #008dfd;
24522434
--copy-path-button-color: #999;
24532435
--copy-path-img-filter: invert(50%);
@@ -2559,6 +2541,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
25592541
--code-attribute-color: #999;
25602542
--toggles-color: #999;
25612543
--toggle-filter: invert(100%);
2544+
--mobile-sidebar-menu-filter: invert(100%);
25622545
--search-input-focused-border-color: #5c6773; /* Same as `--border-color`. */
25632546
--copy-path-button-color: #fff;
25642547
--copy-path-img-filter: invert(70%);
@@ -2650,8 +2633,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
26502633
:root[data-theme="ayu"] h4,
26512634
:where(:root[data-theme="ayu"]) h1 a,
26522635
:root[data-theme="ayu"] .sidebar h2 a,
2653-
:root[data-theme="ayu"] .sidebar h3 a,
2654-
:root[data-theme="ayu"] #source-sidebar > .title {
2636+
:root[data-theme="ayu"] .sidebar h3 a {
26552637
color: #fff;
26562638
}
26572639

‎src/librustdoc/html/static/js/main.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1523,6 +1523,9 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
15231523
sidebarButton.addEventListener("click", e => {
15241524
removeClass(document.documentElement, "hide-sidebar");
15251525
updateLocalStorage("hide-sidebar", "false");
1526+
if (document.querySelector(".rustdoc.src")) {
1527+
window.rustdocToggleSrcSidebar();
1528+
}
15261529
e.preventDefault();
15271530
});
15281531
}
@@ -1647,7 +1650,7 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
16471650
return;
16481651
}
16491652
e.preventDefault();
1650-
const pos = e.clientX - sidebar.offsetLeft - 3;
1653+
const pos = e.clientX - 3;
16511654
if (pos < SIDEBAR_VANISH_THRESHOLD) {
16521655
hideSidebar();
16531656
} else if (pos >= SIDEBAR_MIN) {

0 commit comments

Comments
 (0)