Skip to content

Commit 65a0db5

Browse files
andresruizfacebookandresruizfacebook
authored
Merge pull request pytorch#480 from shiftlab/main-nav-updates
Updating Visual change son the main Navigation
2 parents 2db137f + 02741f9 commit 65a0db5

File tree

10 files changed

+156
-47
lines changed

10 files changed

+156
-47
lines changed

‎_includes/footer_scripts.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
var top = $(this).scrollTop();
2525
var fullPosition = $(".main-background").height() - $(".header-holder").height();
2626

27-
if (top === 0) {
28-
$(".header-holder").css({"backgroundColor": "transparent"});
27+
if (top <= 40) {
28+
$(".header-holder").css({"backgroundColor": "rgba(0, 0, 0, 0.165)"});
2929
} else if (top >= fullPosition) {
3030
$(".header-holder").css({"backgroundColor": "#000000"});
3131
} else {

‎_includes/main_menu.html

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,12 @@
44
<a href="{{ site.baseurl }}/get-started">Get Started</a>
55
</li>
66

7-
<li class="main-menu-item {% if current[1] == 'ecosystem' or current[1] == 'hub' %}active{% endif %}">
7+
<li class="main-menu-item {% if current[1] == 'ecosystem' %}active{% endif %}">
88

9-
<div class="ecosystem-dropdown">
10-
<a id="dropdownMenuButton" data-toggle="ecosystem-dropdown">
9+
<div id="dropdownMenuButton" data-toggle="ecosystem-dropdown" class="ecosystem-dropdown">
10+
<a class="ecosystem-option" href="{{ site.baseurl }}/ecosystem">
1111
Ecosystem
1212
</a>
13-
<div class="ecosystem-dropdown-menu">
14-
<a class="nav-dropdown-item" href="{{ site.baseurl }}/hub">
15-
<span class=dropdown-title>Models (Beta)</span>
16-
<p>Discover, publish, and reuse pre-trained models</p>
17-
</a>
18-
<a class="nav-dropdown-item" href="{{ site.baseurl }}/ecosystem">
19-
<span class=dropdown-title>Tools & Libraries</span>
20-
<p>Explore the ecosystem of tools and libraries</p>
21-
</a>
22-
</div>
2313
</div>
2414
</li>
2515

@@ -39,10 +29,12 @@
3929
<a href="{{ site.baseurl }}/docs">Docs</a>
4030
</li>
4131

42-
<li class="main-menu-item {% if current[1] == 'resources' or current[1] == 'features' %}active{% endif %}">
32+
{% assign resources = "resources, features, hub" | split: ", " %}
33+
34+
<li class="main-menu-item {% if resources contains current[1] %}active{% endif %}">
4335

44-
<div class="resources-dropdown">
45-
<a id="resourcesDropdownButton" data-toggle="resources-dropdown">
36+
<div id="resourcesDropdownButton" data-toggle="resources-dropdown" class="resources-dropdown">
37+
<a class="resource-option {% if current[1] == {{ site.baseurl }} %}with-down-white-arrow{% else %}with-down-arrow{% endif %}">
4638
Resources
4739
</a>
4840
<div class="resources-dropdown-menu">
@@ -54,6 +46,18 @@
5446
<span class=dropdown-title>About</span>
5547
<p>Learn about PyTorch’s features and capabilities</p>
5648
</a>
49+
<a class="nav-dropdown-item" href="{{ site.baseurl }}/hub">
50+
<span class=dropdown-title>Models (Beta)</span>
51+
<p>Discover, publish, and reuse pre-trained models</p>
52+
</a>
53+
<a class="nav-dropdown-item" href="{{ site.baseurl }}/#community-module">
54+
<span class=dropdown-title>Community</span>
55+
<p>Join the PyTorch developer community to contribute, learn, and get your questions answered.</p>
56+
</a>
57+
<a class="nav-dropdown-item" href="{{ site.external_urls.discuss }}" target="_blank">
58+
<span class=dropdown-title>Forums</span>
59+
<p>A place to discuss PyTorch code, issues, install, research</p>
60+
</a>
5761
</div>
5862
</div>
5963
</li>

‎_includes/mobile_menu.html

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@
2727
<a href="{{ site.baseurl }}/get-started">Get Started</a>
2828
</li>
2929

30-
<li class="{% if current[1] == 'features' %}active{% endif %}">
31-
<a href="{{ site.baseurl }}/features">Features</a>
32-
</li>
33-
3430
<li class="{% if current[1] == 'ecosystem' %}active{% endif %}">
3531
<a href="{{ site.baseurl }}/ecosystem">Ecosystem</a>
3632
</li>
@@ -39,10 +35,6 @@
3935
<a href="{{ site.baseurl }}/mobile">Mobile</a>
4036
</li>
4137

42-
<li class="{% if current[1] == 'hub' %}active{% endif %}">
43-
<a href="{{ site.baseurl }}/hub">PyTorch Hub</a>
44-
</li>
45-
4638
<li class="{% if current[1] == 'blog' %}active{% endif %}">
4739
<a href="{{ site.baseurl }}/blog">Blog</a>
4840
</li>
@@ -55,10 +47,32 @@
5547
<a href="{{ site.baseurl }}/docs">Docs</a>
5648
</li>
5749

58-
<li class="{% if current[1] == 'resources' %}active{% endif %}">
59-
<a href="{{ site.baseurl }}/resources">Resources</a>
50+
<li class="resources-mobile-menu-title">
51+
Resources
6052
</li>
6153

54+
<ul class="resources-mobile-menu-items">
55+
<li class="{% if current[1] == 'resources' %}active{% endif %}">
56+
<a href="{{ site.baseurl }}/resources">Developer Resources</a>
57+
</li>
58+
59+
<li class="{% if current[1] == 'features' %}active{% endif %}">
60+
<a href="{{ site.baseurl }}/features">About</a>
61+
</li>
62+
63+
<li class="{% if current[1] == 'hub' %}active{% endif %}">
64+
<a href="{{ site.baseurl }}/hub">Models (Beta)</a>
65+
</li>
66+
67+
<li>
68+
<a href="{{ site.baseurl }}/#community-module">Community</a>
69+
</li>
70+
71+
<li>
72+
<a href="{{ site.external_urls.discuss }}">Forum</a>
73+
</li>
74+
</ul>
75+
6276
<li id="github-mobile-menu-link">
6377
<a href="{{ site.external_urls.github }}">GitHub</a>
6478
</li>

‎_sass/homepage.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@
5353
background-color: $light_grey;
5454
}
5555
}
56+
57+
.homepage-header {
58+
background-color: rgba(0, 0, 0, 0.165);
59+
}
5660
}
5761

5862
.homepage-feature-module {
@@ -368,7 +372,7 @@
368372
&:hover {
369373
color: $orange;
370374
}
371-
}
375+
}
372376
}
373377

374378
.no-banner {

‎_sass/navigation.scss

Lines changed: 67 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,10 @@
109109
a {
110110
color: $orange;
111111
}
112+
113+
.with-down-arrow {
114+
background-image: url($baseurl + "/assets/images/chevron-down-orange.svg");
115+
}
112116
}
113117

114118
&:last-of-type {
@@ -118,7 +122,7 @@
118122

119123
ul li a {
120124
color: $white;
121-
font-size: rem(18px);
125+
font-size: 1.3rem;
122126
letter-spacing: 0;
123127
line-height: rem(34px);
124128
text-align: center;
@@ -164,7 +168,7 @@
164168
padding: 0;
165169
}
166170

167-
ul li a {
171+
ul li a, .resources-mobile-menu-title {
168172
font-size: rem(32px);
169173
color: $white;
170174
letter-spacing: 0;
@@ -199,14 +203,14 @@
199203
height: 100%;
200204
min-height: 100%;
201205
margin-top: -$mobile_header_height;
202-
padding-top: 25%;
206+
padding-top: 50%;
207+
overflow-y: scroll;
203208
@media only screen and (max-width: 320px) {
204-
padding-top: 50%;
205-
overflow-y: scroll;
209+
padding-top: 75%;
206210
}
207211

208212
@include small-desktop {
209-
padding-top: 0;
213+
padding-top: 25%;
210214
}
211215

212216
.navSearchWrapper {
@@ -237,11 +241,56 @@
237241
}
238242
}
239243

244+
.resources, .features, .hub {
245+
.main-menu ul li{
246+
&.active {
247+
&:after {
248+
display: none;
249+
}
250+
}
251+
}
252+
}
253+
240254
.main-menu ul li {
241255
.ecosystem-dropdown, .resources-dropdown a {
242256
cursor: pointer;
243257
}
244258

259+
.ecosystem-dropdown, .resources-dropdown {
260+
.with-down-orange-arrow {
261+
padding-right: rem(32px);
262+
position: relative;
263+
background-image: url($baseurl + "/assets/images/chevron-down-orange.svg");
264+
background-size: 14px 18px;
265+
background-position: top 7px right 10px;
266+
background-repeat: no-repeat;
267+
}
268+
269+
.with-down-white-arrow {
270+
padding-right: rem(32px);
271+
position: relative;
272+
background-image: url($baseurl + "/assets/images/chevron-down-white.svg");
273+
background-size: 14px 18px;
274+
background-position: top 7px right 10px;
275+
background-repeat: no-repeat;
276+
&:hover {
277+
background-image: url($baseurl + "/assets/images/chevron-down-orange.svg");
278+
}
279+
}
280+
281+
.with-down-arrow {
282+
padding-right: rem(32px);
283+
position: relative;
284+
background-image: url($baseurl + "/assets/images/chevron-down-black.svg");
285+
background-size: 14px 18px;
286+
background-position: top 7px right 10px;
287+
background-repeat: no-repeat;
288+
&:hover {
289+
background-image: url($baseurl + "/assets/images/chevron-down-orange.svg");
290+
}
291+
}
292+
}
293+
245294
.dropdown-menu {
246295
border-radius: 0;
247296
padding: 0;
@@ -279,13 +328,11 @@
279328
width: 226px;
280329
display: none;
281330
position: absolute;
282-
top: rem(50px);
283331
z-index: 1000;
284332
display: none;
285333
float: left;
286334
min-width: 10rem;
287335
padding: 0.5rem 0;
288-
margin: 0.125rem 0 0;
289336
font-size: 1rem;
290337
color: #212529;
291338
text-align: left;
@@ -296,8 +343,10 @@
296343
border-radius: 0.25rem;
297344
}
298345

299-
.ecosystem-dropdown-menu.show-menu, .resources-dropdown-menu.show-menu {
300-
display: block;
346+
.ecosystem-dropdown:hover, .resources-dropdown:hover {
347+
.ecosystem-dropdown-menu, .resources-dropdown-menu {
348+
display: block;
349+
}
301350
}
302351

303352
.main-menu ul li {
@@ -347,3 +396,11 @@
347396
background-color: $orange;
348397
color: white;
349398
}
399+
400+
.mobile-main-menu-links-container {
401+
ul.resources-mobile-menu-items {
402+
li {
403+
padding-left: 15px;
404+
}
405+
}
406+
}

‎_sass/search.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -321,9 +321,9 @@ input::placeholder {
321321
color: transparent;
322322
width: 25px;
323323
height: 25px;
324-
background-size: 12px 15px;
324+
background-size: 14px 16px;
325325
background-repeat: no-repeat;
326-
background-position: 7px 5px;
326+
background-position: 6px 5px;
327327
border-radius: 25px;
328328
cursor: pointer;
329329
&:hover {

‎assets/images/chevron-down-black.svg

Lines changed: 17 additions & 0 deletions
Loading

‎assets/images/chevron-down-white.svg

Lines changed: 17 additions & 0 deletions
Loading

‎assets/main-menu-dropdown.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
$("[data-toggle='ecosystem-dropdown']").on("click", function() {
2-
toggleDropdown($(this).attr("data-toggle"));
3-
});
4-
5-
$("[data-toggle='resources-dropdown']").on("click", function() {
1+
$("[data-toggle='resources-dropdown']").hover(function() {
62
toggleDropdown($(this).attr("data-toggle"));
73
});
84

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ <h4>{{ item.title }}</h4>
9898
{% endfor %}
9999
</div>
100100

101-
<div class="row">
101+
<div id="community-module" class="row">
102102
<div class="col-md-12 community-heading">
103103
<h2>Community</h2>
104104

0 commit comments

Comments
 (0)