Skip to content

Commit 0ae5807

Browse files
GuillaumeGomezGuillaumeGomez
committed
Fix top navbar style
1 parent 15560cc commit 0ae5807

File tree

3 files changed

+104
-84
lines changed

3 files changed

+104
-84
lines changed

‎templates/header/topbar_begin.html

+2-76
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@
33
The only piece of context it can take is `search_query`, which should
44
be a string and will populate the search field if it exists
55
#}
6-
7-
{%- import "macros.html" as macros -%}
8-
96
<div class="nav-container">
107
<div class="container">
118
<div class="pure-menu pure-menu-horizontal" role="navigation" aria-label="Main navigation">
@@ -14,82 +11,11 @@
1411
class="landing-search-form-nav {%
1512
if is_latest_version is defined and not is_latest_version %}not-latest{% endif
1613
%} {% if metadata.yanked %}yanked{% endif %}">
17-
{# The search bar #}
18-
<div id="search-input-nav" class="pure-menu-right">
19-
<label for="nav-search">
20-
{{ "search" | fas }}
21-
</label>
22-
23-
{# If there is a search query, put it in the search bar #}
24-
{# The tabindex="-1" is used to prevent it to be the first input focused on the page when using the browser shortcut #}
25-
<input id="nav-search" name="query" type="text" aria-label="Find crate by search query" tabindex="-1"
26-
placeholder="Find crate" {%- if search_query %} value="{{ search_query }}" {%- endif %}>
27-
</div>
2814

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

35-
#}<ul class="pure-menu-list pure-menu-right">
36-
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt-children">
37-
<a href="/releases" class="pure-menu-link">
38-
<span title="Releases">{{ "leaf" | fas }}</span>
39-
<span class="title">Releases</span>
40-
</a>
41-
42-
<ul class="pure-menu-children">
43-
{{ macros::menu_link(href="/releases/stars", text="Releases by Stars") }}
44-
{{ macros::menu_link(href="/releases/recent-failures", text="Recent Build Failures") }}
45-
{{ macros::menu_link(href="/releases/failures", text="Build Failures by Stars") }}
46-
{{ macros::menu_link(href="/releases/activity", text="Release Activity") }}
47-
</ul>
48-
</li>{#
49-
50-
The Rust dropdown menu
51-
#}<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt">
52-
<a href="https://www.rust-lang.org/" target="_blank" class="pure-menu-link">
53-
Rust
54-
</a>
55-
56-
<ul class="pure-menu-children">
57-
{{ macros::menu_link(
58-
href="https://doc.rust-lang.org/book/",
59-
text="The Book",
60-
target="_blank"
61-
) }}
62-
63-
{{ macros::menu_link(
64-
href="https://doc.rust-lang.org/std/",
65-
text="Standard Library API Reference",
66-
target="_blank"
67-
) }}
68-
69-
{{ macros::menu_link(
70-
href="https://doc.rust-lang.org/rust-by-example/",
71-
text="Rust by Example",
72-
target="_blank"
73-
) }}
74-
75-
{{ macros::menu_link(
76-
href="https://rust-lang-nursery.github.io/rust-cookbook/",
77-
text="Rust Cookbook",
78-
target="_blank",
79-
extra_classes="menu-item-divided"
80-
) }}
81-
82-
{{ macros::menu_link(
83-
href="https://crates.io",
84-
text="Crates.io",
85-
target="_blank"
86-
) }}
87-
88-
{{ macros::menu_link(
89-
href="http://doc.crates.io/guide.html",
90-
text="The Cargo Guide",
91-
target="_blank"
92-
) }}
93-
</ul>
94-
</li>
95-
</ul>
21+
#}

‎templates/header/topbar_end.html

+75
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,81 @@
1+
{%- import "macros.html" as macros -%}
2+
3+
<div class="spacer"></div>
14
{# The global alert, if there is one #}
25
{% include "header/global_alert.html" -%}
36

7+
<ul class="pure-menu-list">
8+
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt-children">
9+
<a href="/releases" class="pure-menu-link">
10+
<span title="Releases">{{ "leaf" | fas }}</span>
11+
<span class="title">Releases</span>
12+
</a>
13+
14+
<ul class="pure-menu-children">
15+
{{ macros::menu_link(href="/releases/stars", text="Releases by Stars") }}
16+
{{ macros::menu_link(href="/releases/recent-failures", text="Recent Build Failures") }}
17+
{{ macros::menu_link(href="/releases/failures", text="Build Failures by Stars") }}
18+
{{ macros::menu_link(href="/releases/activity", text="Release Activity") }}
19+
</ul>
20+
</li>{#
21+
22+
The Rust dropdown menu
23+
#}<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover pure-menu-opt">
24+
<a href="https://www.rust-lang.org/" target="_blank" class="pure-menu-link">
25+
Rust
26+
</a>
27+
28+
<ul class="pure-menu-children">
29+
{{ macros::menu_link(
30+
href="https://doc.rust-lang.org/book/",
31+
text="The Book",
32+
target="_blank"
33+
) }}
34+
35+
{{ macros::menu_link(
36+
href="https://doc.rust-lang.org/std/",
37+
text="Standard Library API Reference",
38+
target="_blank"
39+
) }}
40+
41+
{{ macros::menu_link(
42+
href="https://doc.rust-lang.org/rust-by-example/",
43+
text="Rust by Example",
44+
target="_blank"
45+
) }}
46+
47+
{{ macros::menu_link(
48+
href="https://rust-lang-nursery.github.io/rust-cookbook/",
49+
text="Rust Cookbook",
50+
target="_blank",
51+
extra_classes="menu-item-divided"
52+
) }}
53+
54+
{{ macros::menu_link(
55+
href="https://crates.io",
56+
text="Crates.io",
57+
target="_blank"
58+
) }}
59+
60+
{{ macros::menu_link(
61+
href="http://doc.crates.io/guide.html",
62+
text="The Cargo Guide",
63+
target="_blank"
64+
) }}
65+
</ul>
66+
</li>
67+
</ul>
68+
{# The search bar #}
69+
<div id="search-input-nav">
70+
<label for="nav-search">
71+
{{ "search" | fas }}
72+
</label>
73+
74+
{# If there is a search query, put it in the search bar #}
75+
{# The tabindex="-1" is used to prevent it to be the first input focused on the page when using the browser shortcut #}
76+
<input id="nav-search" name="query" type="text" aria-label="Find crate by search query" tabindex="-1"
77+
placeholder="Find crate" {%- if search_query %} value="{{ search_query }}" {%- endif %}>
78+
</div>
479
</form>
580
</div>
681
</div>

‎templates/style/_navbar.scss

+27-8
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@ div.nav-container {
2828
color: var(--color-navbar-standard);
2929
/* The font size must be specified in pixels because the height is specified in pixels. */
3030
font: 16px $font-family-sans;
31+
position: relative;
32+
33+
.container, .pure-menu-horizontal {
34+
position: relative;
35+
height: 100%;
36+
}
3137

3238
li {
3339
border-left: 1px solid var(--color-border);
@@ -73,18 +79,18 @@ div.nav-container {
7379
}
7480
}
7581

76-
.pure-menu-right {
77-
float: right;
78-
}
79-
8082
form.landing-search-form-nav {
8183
max-width: 1200px;
84+
height: 100%;
85+
display: flex;
86+
flex-direction: row;
8287

8388
#search-input-nav {
84-
float: right;
8589
max-width: 150px;
8690
display: none;
8791
border-left: 1px solid var(--color-border);
92+
height: 100%;
93+
overflow-x: hidden;
8894

8995
@media #{$media-sm} {
9096
display: block;
@@ -107,7 +113,7 @@ div.nav-container {
107113
font-size: 0.8em;
108114
box-shadow: none;
109115
background-color: var(--color-background);
110-
height: 31px;
116+
height: 100%;
111117
}
112118
}
113119

@@ -122,8 +128,21 @@ div.nav-container {
122128
See https://github.com/rust-lang/docs.rs/issues/1669.
123129
*/
124130
.pure-menu-item a {
125-
/* 0.5 em is the padding */
126-
max-height: calc(#{$top-navbar-height} - 0.5em * 2);
131+
max-height: 100%;
132+
overflow-x: hidden;
133+
text-overflow: ellipsis;
134+
}
135+
136+
.docsrs-logo, .pure-menu-item a {
137+
padding: 8px 1em;
138+
}
139+
140+
.pure-menu-item {
141+
height: 100%;
142+
}
143+
144+
.spacer {
145+
flex-grow: 1;
127146
}
128147
}
129148

0 commit comments

Comments
 (0)