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
Prev Previous commit
rustdoc: show logo in source sub nav
  • Loading branch information
cynecx committed Oct 24, 2021
commit 58299ada009333e2d9c30bc4b7b4a148eec6e5f9
35 changes: 35 additions & 0 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,27 @@ nav.sub {
text-transform: uppercase;
}

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

.sub-logo-container {
display: none;
margin-right: 20px;
}

.source .sub-logo-container {
display: block;
}

.source .sub-logo-container > img {
height: 60px;
width: 60px;
object-fit: contain;
}

.sidebar {
width: 200px;
min-width: 200px;
Expand Down Expand Up @@ -728,6 +749,7 @@ nav.sub {
}

nav:not(.sidebar) {
flex-grow: 1;
border-bottom: 1px solid;
padding-bottom: 10px;
margin-bottom: 25px;
Expand Down Expand Up @@ -2019,4 +2041,17 @@ details.undocumented[open] > summary::before {
.docblock {
margin-left: 12px;
}

.sub-container {
flex-direction: column;
}

.sub-logo-container {
align-self: center;
}

.source .sub-logo-container > img {
height: 35px;
width: 35px;
}
}
2 changes: 1 addition & 1 deletion 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
2 changes: 1 addition & 1 deletion 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
2 changes: 1 addition & 1 deletion 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 Down
87 changes: 49 additions & 38 deletions src/librustdoc/html/templates/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,51 +56,62 @@
<div class="sidebar-menu" role="button">&#9776;</div> {#- -#}
<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> {#- -#}
<main> {#- -#}
<div class="main-inner"> {#- -#}
<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 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> {#- -#}
</nav> {#- -#}
<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> {#- -#}
<section id="main" class="content">{{- content | safe -}}</section> {#- -#}
<section id="search" class="content hidden"></section> {#- -#}
</div> {#- -#}
Expand Down