Skip to content
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.

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

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

Closed
wants to merge 10 commits into from
259 changes: 172 additions & 87 deletions src/librustdoc/html/static/css/rustdoc.css

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/librustdoc/html/static/css/themes/ayu.css
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ pre, .rustdoc.source .example-wrap {
background-color: #14191f;
}

.logo-container.rust-logo > img {
.rust-logo > img {
filter: drop-shadow(1px 0 0px #fff)
drop-shadow(0 1px 0 #fff)
drop-shadow(-1px 0 0 #fff)
Expand Down Expand Up @@ -97,7 +97,7 @@ pre, .rustdoc.source .example-wrap {
}

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

.sidebar .location {
Expand Down
4 changes: 2 additions & 2 deletions src/librustdoc/html/static/css/themes/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ pre, .rustdoc.source .example-wrap {
background-color: #505050;
}

.logo-container.rust-logo > img {
.rust-logo > img {
filter: drop-shadow(1px 0 0px #fff)
drop-shadow(0 1px 0 #fff)
drop-shadow(-1px 0 0 #fff)
Expand Down Expand Up @@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
}

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

.sidebar .location {
Expand Down
4 changes: 2 additions & 2 deletions src/librustdoc/html/static/css/themes/light.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ pre, .rustdoc.source .example-wrap {
scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
}

.logo-container.rust-logo > img {
.rust-logo > img {
/* No need for a border in here! */
}

Expand All @@ -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
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
31 changes: 13 additions & 18 deletions src/librustdoc/html/static/js/source-script.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,14 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
}

function toggleSidebar() {
var sidebar = document.getElementById("source-sidebar");
var child = this.children[0].children[0];
var sidebar = document.querySelector("nav.sidebar");
var child = this.children[0];
if (child.innerText === ">") {
sidebar.style.left = "";
this.style.left = "";
sidebar.classList.add("expanded");
child.innerText = "<";
updateLocalStorage("rustdoc-source-sidebar-show", "true");
} else {
sidebar.style.left = "-300px";
this.style.left = "0";
sidebar.classList.remove("expanded");
child.innerText = ">";
updateLocalStorage("rustdoc-source-sidebar-show", "false");
}
Expand All @@ -97,20 +95,15 @@ function createSidebarToggle() {
sidebarToggle.id = "sidebar-toggle";
sidebarToggle.onclick = toggleSidebar;

var inner1 = document.createElement("div");
inner1.style.position = "relative";
var inner = document.createElement("div");

var inner2 = document.createElement("div");
inner2.style.paddingTop = "3px";
if (getCurrentValue("rustdoc-source-sidebar-show") === "true") {
inner2.innerText = "<";
inner.innerText = "<";
} else {
inner2.innerText = ">";
sidebarToggle.style.left = "0";
inner.innerText = ">";
}

inner1.appendChild(inner2);
sidebarToggle.appendChild(inner1);
sidebarToggle.appendChild(inner);
return sidebarToggle;
}

Expand All @@ -120,15 +113,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.classList.remove("expanded");
} else {
main.classList.add("expanded");
}

var currentFile = getCurrentFilePath();
Expand All @@ -144,7 +139,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
95 changes: 55 additions & 40 deletions src/librustdoc/html/templates/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,53 +54,68 @@
{{- layout.external_html.before_content | safe -}}
<nav class="sidebar"> {#- -#}
<div class="sidebar-menu" role="button">&#9776;</div> {#- -#}
<a href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
<a class="sidebar-logo" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
<div class='logo-container rust-logo'> {#- -#}
<img src='
{%- if layout.logo -%}
{{layout.logo}}
{%- else -%}
{{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
{%- endif -%}
' alt='logo'> {#- -#}
<img src='
{%- if layout.logo -%}
{{layout.logo}}
{%- else -%}
{{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
{%- endif -%}
' alt='logo'> {#- -#}
</div> {#- -#}
</a> {#- -#}
{{- sidebar | safe -}}
</nav> {#- -#}
<div class="theme-picker"> {#- -#}
<button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
<img width="18" height="18" alt="Pick another theme!" {# -#}
src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
</button> {#- -#}
<div id="theme-choices" role="menu"></div> {#- -#}
</div> {#- -#}
<nav class="sub"> {#- -#}
<form class="search-form"> {#- -#}
<div class="search-container"> {#- -#}
<div>{%- if layout.generate_search_filter -%}
<select id="crate-search"> {#- -#}
<option value="All crates">All crates</option> {#- -#}
</select> {#- -#}
{%- endif -%}
<input {# -#}
class="search-input" {# -#}
name="search" {# -#}
disabled {# -#}
autocomplete="off" {# -#}
spellcheck="false" {# -#}
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
type="search"> {#- -#}
</div> {#- -#}
<button type="button" id="help-button" title="help">?</button> {#- -#}
<a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
<img width="18" height="18" alt="Change settings" {# -#}
src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
<main> {#- -#}
<div class="main-inner"> {#- -#}
<div class="sub-container"> {#- -#}
<a class="sub-logo-container rust-logo" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
<img src='
{%- if layout.logo -%}
{{layout.logo}}
{%- else -%}
{{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
{%- endif -%}
' alt='logo'> {#- -#}
</a> {#- -#}
<nav class="sub"> {#- -#}
<div class="theme-picker"> {#- -#}
<button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
<img width="18" height="18" alt="Pick another theme!" {# -#}
src="{{static_root_path | safe}}brush{{page.resource_suffix}}.svg"> {#- -#}
</button> {#- -#}
<div id="theme-choices" role="menu"></div> {#- -#}
</div> {#- -#}
<form class="search-form"> {#- -#}
<div class="search-container"> {#- -#}
<div>{%- if layout.generate_search_filter -%}
<select id="crate-search"> {#- -#}
<option value="All crates">All crates</option> {#- -#}
</select> {#- -#}
{%- endif -%}
<input {# -#}
class="search-input" {# -#}
name="search" {# -#}
disabled {# -#}
autocomplete="off" {# -#}
spellcheck="false" {# -#}
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
type="search"> {#- -#}
</div> {#- -#}
<button type="button" id="help-button" title="help">?</button> {#- -#}
<a id="settings-menu" href="{{page.root_path | safe}}settings.html" title="settings"> {#- -#}
<img width="18" height="18" alt="Change settings" {# -#}
src="{{static_root_path | safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
</a> {#- -#}
</div> {#- -#}
</form> {#- -#}
</nav> {#- -#}
</div> {#- -#}
</form> {#- -#}
</nav> {#- -#}
<section id="main" class="content">{{- content | safe -}}</section> {#- -#}
<section id="search" class="content hidden"></section> {#- -#}
<section id="main" class="content">{{- content | safe -}}</section> {#- -#}
<section id="search" class="content hidden"></section> {#- -#}
</div> {#- -#}
</main> {#- -#}
{{- layout.external_html.after_content | safe -}}
<div id="rustdoc-vars" {# -#}
data-root-path="{{page.root_path | safe}}" {# -#}
Expand Down
2 changes: 1 addition & 1 deletion src/test/rustdoc-gui/source-code-page.goml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
goto: file://|DOC_PATH|/src/test_docs/lib.rs.html
// Check that we can click on the line number.
click: (40, 224) // This is the position of the span for line 4.
click: (50, 196) // This is the position of the span for line 4.
// Unfortunately, "#4" isn't a valid query selector, so we have to go around that limitation
// by instead getting the nth span.
assert-attribute: (".line-numbers > span:nth-child(4)", {"class": "line-highlighted"})
Expand Down