Skip to content

rustdoc: use flexbox to layout sidebar and main content #89385

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

Closed
cynecx wants to merge 10 commits into from
Closed

rustdoc: use flexbox to layout sidebar and main content #89385

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2f41b03
rustdoc: use flexbox to layout sidebar and main content
cynecx Sep 30, 2021
c7ca9e9
rustdoc: fix source view
cynecx Oct 9, 2021
b87c5a9
rustdoc: merge source sidebar into main sidebar
cynecx Oct 10, 2021
7dfb708
rustdoc: fix theme colors
cynecx Oct 10, 2021
0909817
rustdoc: make source sidebar collapse by default
cynecx Oct 10, 2021
e9d08dc
rustdoc: fix source-code-page test
cynecx Oct 10, 2021
bf49b59
rustdoc: don't use overflow for main, instead make the sidebar sticky
cynecx Oct 24, 2021
b1104e2
rustdoc: fix tabs in css
cynecx Oct 24, 2021
96bf5cc
rustdoc: rework source sidebar
cynecx Oct 24, 2021
58299ad
rustdoc: show logo in source sub nav
cynecx Oct 24, 2021
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
157 changes: 95 additions & 62 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 @@ -110,7 +110,6 @@ body {
font: 16px/1.4 "Source Serif 4", "Noto Sans KR", serif;
margin: 0;
position: relative;
padding: 10px 15px 20px 15px;

-webkit-font-feature-settings: "kern", "liga";
-moz-font-feature-settings: "kern", "liga";
Expand Down Expand Up @@ -236,6 +235,33 @@ textarea {

/* end tweaks for normalize.css 8 */

.rustdoc {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

main {
Copy link
Member

@GuillaumeGomez GuillaumeGomez Oct 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't it be #main?

Copy link
Contributor Author

@cynecx cynecx Oct 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The thing is, we've got two "mains". The actual <main> which is the right main content side (that's new), and the <section id="main"> which contains the actual docs main content xD. I see there is confusion but I am open to other suggestions :)

Copy link
Member

@GuillaumeGomez GuillaumeGomez Oct 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wow, I see. Hum... Maybe rename the main ID into something else then to make the confusion smaller?

position: relative;
flex-grow: 1;
padding: 10px 15px 40px 45px;
height: 100vh;
overflow-y: auto;
}

.source main {
padding: 15px;
}

.main-inner {
max-width: 960px;
margin-right: auto;
}

.source .main-inner {
max-width: unset;
}

details:not(.rustdoc-toggle) summary {
margin-bottom: .6em;
}
Expand Down Expand Up @@ -270,26 +296,36 @@ li {
}

.source .content {
margin-top: 50px;
max-width: none;
overflow: visible;
margin-left: 0px;
}

nav.sub {
position: relative;
font-size: 16px;
text-transform: uppercase;
}

.sidebar {
width: 200px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
min-width: 200px;
height: 100vh;
overflow: auto;
}

.source .sidebar {
width: 0px;
min-width: 0px;
max-width: 300px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
border-right: 1px solid;
transition: width .5s;
overflow-x: hidden;
}

/* Improve the scrollbar display on firefox */
* {
scrollbar-width: initial;
Expand All @@ -313,10 +349,6 @@ nav.sub {
margin-right: -10px;
}

.content, nav {
max-width: 960px;
}

/* Everything else */

.hidden {
Expand Down Expand Up @@ -420,10 +452,6 @@ nav.sub {
display: none;
}

.content {
padding: 15px 0;
}

.source .content pre.rust {
white-space: pre;
overflow: auto;
Expand Down Expand Up @@ -463,7 +491,6 @@ nav.sub {
}

#search {
margin-left: 230px;
position: relative;
}

Expand Down Expand Up @@ -691,7 +718,10 @@ nav.sub {
nav:not(.sidebar) {
border-bottom: 1px solid;
padding-bottom: 10px;
margin-bottom: 10px;
margin-bottom: 25px;
}
.source nav:not(.sidebar).sub {
margin-left: 32px;
}
nav.main {
padding: 20px 0;
Expand All @@ -710,10 +740,6 @@ nav.main .separator {
nav.sum { text-align: right; }
nav.sub form { display: inline; }

nav.sub, .content {
margin-left: 230px;
}

a {
text-decoration: none;
background: transparent;
Expand Down Expand Up @@ -788,6 +814,7 @@ h2.small-section-header > .anchor {

.search-container {
position: relative;
max-width: 960px;
}
.search-container > div {
display: inline-flex;
Expand Down Expand Up @@ -1321,15 +1348,9 @@ pre.rust {
border-left: 0;
}
#source-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 300px;
z-index: 1;
overflow: auto;
transition: left .5s;
border-right: 1px solid;
}
#source-sidebar > .title {
font-size: 1.5em;
Expand All @@ -1340,8 +1361,8 @@ pre.rust {

.theme-picker {
position: absolute;
left: 211px;
top: 19px;
left: -34px;
top: 9px;
}

.theme-picker button {
Expand Down Expand Up @@ -1657,16 +1678,36 @@ details.undocumented[open] > summary::before {
padding-top: 0px;
}

.rustdoc > .sidebar {
main {
height: auto;
padding-left: 15px;
padding-top: 0px;
overflow-y: visible;
}

.rustdoc {
flex-direction: column;
}

.rustdoc:not(.source) > .sidebar {
width: 100%;
height: 45px;
min-height: 40px;
max-height: 45px;
margin: 0;
margin-left: -15px;
padding: 0 15px;
position: static;
z-index: 11;
}

.rustdoc.source > .sidebar {
position: fixed;
top: 0;
left: 0;
margin: 0;
z-index: 11;
}

.sidebar > .location {
float: right;
margin: 0px;
Expand All @@ -1682,13 +1723,19 @@ details.undocumented[open] > summary::before {
padding: 0;
}

.sidebar .logo-container {
.rustdoc.source .sidebar .logo-container {
width: 100%;
height: 45px;
margin: 0 auto;
}

.rustdoc:not(.source) .sidebar .logo-container {
width: 35px;
height: 35px;
margin-top: 5px;
margin-bottom: 5px;
float: left;
margin-left: 50px;
height: 35px;
margin-top: 5px;
margin-bottom: 5px;
float: left;
margin-left: 50px;
}

.sidebar .logo-container > img {
Expand Down Expand Up @@ -1752,29 +1799,32 @@ details.undocumented[open] > summary::before {

nav.sub {
width: calc(100% - 32px);
float: right;
margin-left: 32px;
margin-bottom: 10px;
}

.source nav:not(.sidebar).sub {
margin-left: 32px;
}

.content {
margin-left: 0px;
}

#main, #search {
margin-top: 45px;
padding: 0;
.source .content {
margin-top: 10px;
}

#search {
margin-left: 0;
padding: 0;
}

.anchor {
display: none !important;
}

.theme-picker {
left: 10px;
top: 54px;
z-index: 1;
}

Expand All @@ -1794,22 +1844,12 @@ details.undocumented[open] > summary::before {
}

.sidebar.mobile {
position: fixed;
position: sticky;
top: 0;
left: 0;
width: 100%;
margin-left: 0;
background-color: rgba(0,0,0,0);
height: 100%;
}
/*
This allows to prevent the version text to overflow the sidebar title on mobile mode when the
sidebar is displayed (after clicking on the "hamburger" button).
*/
.sidebar.mobile > div.version {
overflow: hidden;
max-height: 33px;
}
.sidebar {
width: calc(100% + 30px);
}

.show-it, .sidebar-elems:focus-within {
Expand Down Expand Up @@ -1924,13 +1964,6 @@ details.undocumented[open] > summary::before {
height: 73px;
}

/* This is to prevent the search bar from being underneath the <section>
* element following it.
*/
#main, #search {
margin-top: 100px;
}

#main > table:not(.table-display) td {
word-break: break-word;
width: 50%;
Expand Down
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/themes/ayu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ pre, .rustdoc.source .example-wrap {
}

.source .sidebar {
background-color: #0f1419;
background-color: #14191f;
}

.sidebar .location {
Expand Down
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/themes/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
}

.source .sidebar {
background-color: #353535;
background-color: #565656;
}

.sidebar .location {
Expand Down
2 changes: 1 addition & 1 deletion src/librustdoc/html/static/css/themes/light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
}

.source .sidebar {
background-color: #fff;
background-color: #f1f1f1;
}

.sidebar .location {
Expand Down
2 changes: 1 addition & 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 @@ -971,7 +971,7 @@ function hideThemeButtonState() {
container.appendChild(rustdoc_version);

popup.appendChild(container);
insertAfter(popup, searchState.outputElement());
insertAfter(popup, document.querySelector("main"));
// So that it's only built once and then it'll do nothing when called!
buildHelperPopup = function() {};
};
Expand Down
14 changes: 8 additions & 6 deletions src/librustdoc/html/static/js/source-script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,15 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
}

function toggleSidebar() {
var sidebar = document.getElementById("source-sidebar");
var sidebar = document.querySelector("nav.sidebar");
var child = this.children[0].children[0];
if (child.innerText === ">") {
sidebar.style.left = "";
sidebar.style.width = "300px";
this.style.left = "";
child.innerText = "<";
updateLocalStorage("rustdoc-source-sidebar-show", "true");
} else {
sidebar.style.left = "-300px";
sidebar.style.width = "0";
this.style.left = "0";
child.innerText = ">";
updateLocalStorage("rustdoc-source-sidebar-show", "false");
Expand Down Expand Up @@ -120,15 +120,17 @@ function createSourceSidebar() {
if (!window.rootPath.endsWith("/")) {
window.rootPath += "/";
}
var main = document.getElementById("main");
var main = document.querySelector("nav.sidebar");

var sidebarToggle = createSidebarToggle();
main.insertBefore(sidebarToggle, main.firstChild);

var sidebar = document.createElement("div");
sidebar.id = "source-sidebar";
if (getCurrentValue("rustdoc-source-sidebar-show") !== "true") {
sidebar.style.left = "-300px";
main.style.width = "0px";
} else {
main.style.width = "300px";
}

var currentFile = getCurrentFilePath();
Expand All @@ -144,7 +146,7 @@ function createSourceSidebar() {
currentFile, hasFoundFile);
});

main.insertBefore(sidebar, main.firstChild);
main.insertBefore(sidebar, document.querySelector(".sidebar-logo").nextSibling);
// Focus on the current file in the source files sidebar.
var selected_elem = sidebar.getElementsByClassName("selected")[0];
if (typeof selected_elem !== "undefined") {
Expand Down
Loading