Skip to content

Commit

Permalink
Fix top navbar style
Browse files Browse the repository at this point in the history
  • Loading branch information
@GuillaumeGomez
GuillaumeGomez committed Apr 11, 2022
1 parent 15560cc commit 0ae5807
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 84 deletions.
78 changes: 2 additions & 76 deletions templates/header/topbar_begin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
The only piece of context it can take is `search_query`, which should
be a string and will populate the search field if it exists
#}

{%- import "macros.html" as macros -%}

<div class="nav-container">
<div class="container">
<div class="pure-menu pure-menu-horizontal" role="navigation" aria-label="Main navigation">
Expand All @@ -14,82 +11,11 @@
class="landing-search-form-nav {%
if is_latest_version is defined and not is_latest_version %}not-latest{% endif
%} {% if metadata.yanked %}yanked{% endif %}">
{# The search bar #}
<div id="search-input-nav" class="pure-menu-right">
<label for="nav-search">
{{ "search" | fas }}
</label>

{# If there is a search query, put it in the search bar #}
{# The tabindex="-1" is used to prevent it to be the first input focused on the page when using the browser shortcut #}
<input id="nav-search" name="query" type="text" aria-label="Find crate by search query" tabindex="-1"
placeholder="Find crate" {%- if search_query %} value="{{ search_query }}" {%- endif %}>
</div>

{# The top-left logo and name #}
<a href="/" class="pure-menu-heading pure-menu-link" aria-label="Docs.rs">
<a href="/" class="pure-menu-heading pure-menu-link docsrs-logo" aria-label="Docs.rs">
<span title="Docs.rs">{{ "cubes" | fas }}</span>
<span class="title">Docs.rs</span>
</a>{#

#}<ul class="pure-menu-list pure-menu-right">
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt-children">
<a href="/releases" class="pure-menu-link">
<span title="Releases">{{ "leaf" | fas }}</span>
<span class="title">Releases</span>
</a>

<ul class="pure-menu-children">
{{ macros::menu_link(href="/releases/stars", text="Releases by Stars") }}
{{ macros::menu_link(href="/releases/recent-failures", text="Recent Build Failures") }}
{{ macros::menu_link(href="/releases/failures", text="Build Failures by Stars") }}
{{ macros::menu_link(href="/releases/activity", text="Release Activity") }}
</ul>
</li>{#

The Rust dropdown menu
#}<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt">
<a href="https://www.rust-lang.org/" target="_blank" class="pure-menu-link">
Rust
</a>

<ul class="pure-menu-children">
{{ macros::menu_link(
href="https://doc.rust-lang.org/book/",
text="The Book",
target="_blank"
) }}

{{ macros::menu_link(
href="https://doc.rust-lang.org/std/",
text="Standard Library API Reference",
target="_blank"
) }}

{{ macros::menu_link(
href="https://doc.rust-lang.org/rust-by-example/",
text="Rust by Example",
target="_blank"
) }}

{{ macros::menu_link(
href="https://rust-lang-nursery.github.io/rust-cookbook/",
text="Rust Cookbook",
target="_blank",
extra_classes="menu-item-divided"
) }}

{{ macros::menu_link(
href="https://crates.io",
text="Crates.io",
target="_blank"
) }}

{{ macros::menu_link(
href="http://doc.crates.io/guide.html",
text="The Cargo Guide",
target="_blank"
) }}
</ul>
</li>
</ul>
#}
75 changes: 75 additions & 0 deletions templates/header/topbar_end.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,81 @@
{%- import "macros.html" as macros -%}

<div class="spacer"></div>
{# The global alert, if there is one #}
{% include "header/global_alert.html" -%}

<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt-children">
<a href="/releases" class="pure-menu-link">
<span title="Releases">{{ "leaf" | fas }}</span>
<span class="title">Releases</span>
</a>

<ul class="pure-menu-children">
{{ macros::menu_link(href="/releases/stars", text="Releases by Stars") }}
{{ macros::menu_link(href="/releases/recent-failures", text="Recent Build Failures") }}
{{ macros::menu_link(href="/releases/failures", text="Build Failures by Stars") }}
{{ macros::menu_link(href="/releases/activity", text="Release Activity") }}
</ul>
</li>{#

The Rust dropdown menu
#}<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt">
<a href="https://www.rust-lang.org/" target="_blank" class="pure-menu-link">
Rust
</a>

<ul class="pure-menu-children">
{{ macros::menu_link(
href="https://doc.rust-lang.org/book/",
text="The Book",
target="_blank"
) }}

{{ macros::menu_link(
href="https://doc.rust-lang.org/std/",
text="Standard Library API Reference",
target="_blank"
) }}

{{ macros::menu_link(
href="https://doc.rust-lang.org/rust-by-example/",
text="Rust by Example",
target="_blank"
) }}

{{ macros::menu_link(
href="https://rust-lang-nursery.github.io/rust-cookbook/",
text="Rust Cookbook",
target="_blank",
extra_classes="menu-item-divided"
) }}

{{ macros::menu_link(
href="https://crates.io",
text="Crates.io",
target="_blank"
) }}

{{ macros::menu_link(
href="http://doc.crates.io/guide.html",
text="The Cargo Guide",
target="_blank"
) }}
</ul>
</li>
</ul>
{# The search bar #}
<div id="search-input-nav">
<label for="nav-search">
{{ "search" | fas }}
</label>

{# If there is a search query, put it in the search bar #}
{# The tabindex="-1" is used to prevent it to be the first input focused on the page when using the browser shortcut #}
<input id="nav-search" name="query" type="text" aria-label="Find crate by search query" tabindex="-1"
placeholder="Find crate" {%- if search_query %} value="{{ search_query }}" {%- endif %}>
</div>
</form>
</div>
</div>
Expand Down
35 changes: 27 additions & 8 deletions templates/style/_navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@ div.nav-container {
color: var(--color-navbar-standard);
/* The font size must be specified in pixels because the height is specified in pixels. */
font: 16px $font-family-sans;
position: relative;

.container, .pure-menu-horizontal {
position: relative;
height: 100%;
}

li {
border-left: 1px solid var(--color-border);
Expand Down Expand Up @@ -73,18 +79,18 @@ div.nav-container {
}
}

.pure-menu-right {
float: right;
}

form.landing-search-form-nav {
max-width: 1200px;
height: 100%;
display: flex;
flex-direction: row;

#search-input-nav {
float: right;
max-width: 150px;
display: none;
border-left: 1px solid var(--color-border);
height: 100%;
overflow-x: hidden;

@media #{$media-sm} {
display: block;
Expand All @@ -107,7 +113,7 @@ div.nav-container {
font-size: 0.8em;
box-shadow: none;
background-color: var(--color-background);
height: 31px;
height: 100%;
}
}

Expand All @@ -122,8 +128,21 @@ div.nav-container {
See https://github.com/rust-lang/docs.rs/issues/1669.
*/
.pure-menu-item a {
/* 0.5 em is the padding */
max-height: calc(#{$top-navbar-height} - 0.5em * 2);
max-height: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
}

.docsrs-logo, .pure-menu-item a {
padding: 8px 1em;
}

.pure-menu-item {
height: 100%;
}

.spacer {
flex-grow: 1;
}
}

Expand Down

0 comments on commit 0ae5807

Please sign in to comment.