Skip to content

Commit 9b5d26a

Browse files
patmellonbrsoff
patmellon
authored and
brsoff
committed
[PYT-69] Update Get Started page (pytorch#28)
* [PYT-69] Update Get Started page -Update jumbotron height -Update menu items display -Embed local Get Started module * Align sub nav menu in Get Started with site .container
1 parent 74a70f6 commit 9b5d26a

15 files changed

+254
-50
lines changed

‎_includes/quick_start_locally_module.html

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<div class="container-fluid quick-start-module quick-starts">
2+
3+
<div class="row">
4+
<div class="col-md-12">
5+
6+
<h1>Start Locally</h1>
7+
8+
<p>Select your preferences and run the PyTorch install command. Please ensure that you are on the latest pip and numpy
9+
packages. Anaconda is our recommended package manager. You can also
10+
<a href="{{ site.external_urls.previous_pytorch_versions }}">view previous versions of PyTorch.</a>
11+
</p>
12+
13+
<div class="row">
14+
<div class="col-md-3 headings">
15+
<div class="col-md-12 title-block">
16+
<div class="option-text os-text">Your OS</div>
17+
</div>
18+
<div class="col-md-12 title-block">
19+
<div class="option-text">Package</div>
20+
</div>
21+
<div class="col-md-12 title-block">
22+
<div class="option-text">Python</div>
23+
</div>
24+
<div class="col-md-12 title-block">
25+
<div class="option-text">Cuda</div>
26+
</div>
27+
<div class="col-md-12 title-block command-block">
28+
<div class="option-text command-text">Run this Command:</div>
29+
</div>
30+
</div>
31+
32+
<div class="col-md-9">
33+
<div class="row os">
34+
<div class="col-md-12 title-block mobile-heading">
35+
<div class="option-text">Your OS</div>
36+
</div>
37+
<div class="col-md-4 option block selected" id="linux">
38+
<div class="option-text">Linux</div>
39+
</div>
40+
<div class="col-md-4 option block" id="macos">
41+
<div class="option-text">Mac</div>
42+
</div>
43+
<div class="col-md-4 option block" id="windows">
44+
<div class="option-text">Windows</div>
45+
</div>
46+
</div>
47+
<div class="row package">
48+
<div class="col-md-12 title-block mobile-heading">
49+
<div class="option-text">Package</div>
50+
</div>
51+
<div class="col-md-4 option block selected" id="conda">
52+
<div class="option-text">Conda</div>
53+
</div>
54+
<div class="col-md-4 option block" id="pip">
55+
<div class="option-text">Pip</div>
56+
</div>
57+
<div class="col-md-4 option block" id="source">
58+
<div class="option-text">Source</div>
59+
</div>
60+
</div>
61+
<div class="row python">
62+
<div class="col-md-12 title-block mobile-heading">
63+
<div class="option-text">Python</div>
64+
</div>
65+
<div class="col-md-3 option block version" id="python2.7">
66+
<div class="option-text">2.7</div>
67+
</div>
68+
<div class="col-md-3 option block version" id="python3.5">
69+
<div class="option-text">3.5</div>
70+
</div>
71+
<div class="col-md-3 option block version selected" id="python3.6">
72+
<div class="option-text">3.6</div>
73+
</div>
74+
<div class="col-md-3 option block" id="python3.7">
75+
<div class="option-text">3.7</div>
76+
</div>
77+
</div>
78+
<div class="row cuda">
79+
<div class="col-md-12 title-block mobile-heading">
80+
<div class="option-text">Cuda</div>
81+
</div>
82+
<div class="col-md-3 option block version" id="cuda8">
83+
<div class="option-text">8.0</div>
84+
</div>
85+
<div class="col-md-3 option block version selected" id="cuda9.0">
86+
<div class="option-text">9.0</div>
87+
</div>
88+
<div class="col-md-3 option block version" id="cuda9.2">
89+
<div class="option-text">9.2</div>
90+
</div>
91+
<div class="col-md-3 option block version" id="cudanone">
92+
<div class="option-text">None</div>
93+
</div>
94+
</div>
95+
<div class="row">
96+
<div class="col-md-12 title-block command-mobile-heading">
97+
<div class="option-text">Run this Command:</div>
98+
</div>
99+
<div class="col-md-12" id="command">conda install pytorch torchvision -c pytorch</div>
100+
</div>
101+
102+
</div>
103+
</div>
104+
105+
</div>
106+
107+
</div>
108+
109+
</div>

‎_includes/quick-start-module.html renamed to ‎_includes/quick_start_module.html

File renamed without changes.

‎_includes/similar-posts-module.html renamed to ‎_includes/similar_posts_module.html

File renamed without changes.

‎_layouts/blog.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ <h4>
9696
</div>
9797
</div>
9898

99-
{% include quick-start-module.html %}
99+
{% include quick_start_module.html %}
100100

101101
{% include footer.html %}
102102

‎_layouts/blog_detail.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h1>
4242
</div>
4343
</div>
4444

45-
{% include similar-posts-module.html %}
45+
{% include similar_posts_module.html %}
4646
{% include footer.html %}
4747

4848
</body>

‎_sass/ecosystem.scss

+1-7
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,4 @@
107107
list-style-type: disc;
108108
}
109109
}
110-
}
111-
112-
.ecosystem .quick-starts {
113-
@include desktop {
114-
background: linear-gradient(90deg, $white 50%, $very_light_grey 50%);
115-
}
116-
}
110+
}

‎_sass/get-started.scss

+105
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,108 @@
1414
padding-left: 0;
1515
}
1616
}
17+
18+
.get-started .main-background {
19+
height: 275px;
20+
21+
@include desktop {
22+
height: 480px;
23+
}
24+
}
25+
26+
.get-started .main-content-wrapper {
27+
@include desktop {
28+
margin-top: 350px + $desktop_header_height;
29+
}
30+
}
31+
32+
.get-started .jumbotron {
33+
@include desktop {
34+
height: 360px;
35+
}
36+
}
37+
38+
.get-started .main-content .navbar {
39+
@media (min-width: 992px) {
40+
background-color: #f3f4f7;
41+
42+
padding-left: 0;
43+
padding-bottom: 0;
44+
padding-top: 0;
45+
46+
li:first-of-type {
47+
padding-left: rem(55px);
48+
}
49+
50+
.nav-item {
51+
padding: 2rem;
52+
cursor: pointer;
53+
}
54+
55+
.nav-link {
56+
position: relative;
57+
top: 10%;
58+
transform: translateY(-50%);
59+
}
60+
61+
.nav-select {
62+
background-color: $white;
63+
.nav-link {
64+
color: $red_orange;
65+
font-weight: 400;
66+
}
67+
}
68+
}
69+
70+
.nav-link {
71+
color: #8c8c8c;
72+
margin-left: rem(30px);
73+
}
74+
75+
.nav-item {
76+
padding-bottom: 0;
77+
}
78+
79+
.navbar-toggler {
80+
margin-left: rem(40px);
81+
}
82+
}
83+
84+
.get-started .main-content {
85+
padding-top: 0;
86+
@include desktop {
87+
padding-top: 2.53rem;
88+
}
89+
}
90+
91+
.get-started .quick-start-module {
92+
padding-bottom: 0;
93+
padding-top: 0;
94+
background-color: $white;
95+
96+
.option,
97+
#command {
98+
border: 2px solid $white;
99+
background: $light_grey;
100+
}
101+
102+
.title-block {
103+
border: 2px solid $white;
104+
}
105+
106+
.selected {
107+
background-color: $red_orange;
108+
}
109+
110+
h1 {
111+
font-size: rem(32px);
112+
letter-spacing: 1.78px;
113+
line-height: rem(40px);
114+
text-transform: uppercase;
115+
margin-bottom: rem(24px);
116+
}
117+
}
118+
119+
.get-started .nav-menu-wrapper {
120+
background-color: $light_grey;
121+
}

‎_tutorials/get-started-locally.md

+2-17
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,7 @@ category: [get-started]
66
date: 2018-07-31 00:00:01
77
---
88

9-
## Start Locally
10-
11-
<div class="row quick-start-guides">
12-
<div class="col-md-6">
13-
<p class="step-counter">1/4</p>
14-
<div class="select-instructions">Select Your OS</div>
15-
</div>
16-
17-
<div class="col-md-6">
18-
<ul>
19-
<li>Linux</li>
20-
<li class="selected">MacOS</li>
21-
<li>Windows</li>
22-
</ul>
23-
</div>
24-
</div>
9+
{% include quick_start_locally_module.html %}
2510

2611
---
2712

@@ -54,4 +39,4 @@ for i in range(0,len(fred)):
5439

5540
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
5641

57-
Lorem ipsum dolor sit amet, ex mei graeco alienum imperdiet. Recusabo consequuntur mei ei, habeo iriure virtute eam cu, in erat placerat vis. Eu mea nostrum inimicus, cum id aeque utamur erroribus.
42+
Lorem ipsum dolor sit amet, ex mei graeco alienum imperdiet. Recusabo consequuntur mei ei, habeo iriure virtute eam cu, in erat placerat vis. Eu mea nostrum inimicus, cum id aeque utamur erroribus.

‎_tutorials/get-started-via-cloud-partners.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: default
33
title: Start Via Cloud Partners
44
slug: start-via-cloud-partners
55
category: [get-started]
6-
date: 2018-07-31 00:00:02
6+
date: 2018-08-02 00:00:01
77
---
88

99
## Start Via Cloud Partners

‎_tutorials/get-started-via-colab.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ layout: default
33
title: Try Now via CoLab
44
slug: try-now-via-colab
55
category: [get-started]
6-
date: 2018-07-31 00:00:03
6+
date: 2018-08-01 00:00:01
77
---
88

99
## Try Now via CoLab

‎ecosystem/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ <h4>{{ item.title }}</h4>
8181
</div>
8282
</div>
8383

84-
{% include quick-start-module.html %}
84+
{% include quick_start_module.html %}
8585

8686
<script type="text/javascript">
8787
var category = window.location.hash.replace(/^#/, '');;

‎features/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -166,4 +166,4 @@ <h3>Imperative CPP Front-End</h3>
166166
</div>
167167
</div>
168168

169-
{% include quick-start-module.html %}
169+
{% include quick_start_module.html %}

‎get-started/index.html

+29-18
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,36 @@
1010

1111
<div class="jumbotron jumbotron-fluid on-dark-background">
1212
<div class="container">
13-
<h1>Get<br />&nbsp;&nbsp;&nbsp;&nbsp;Started</h1>
13+
<h1>Get<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Started</h1>
1414

1515
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
1616
</div>
1717
</div>
1818

1919
<div class="main-content-wrapper">
2020
<div class="main-content">
21-
<div class="container">
22-
<nav class="navbar navbar-expand-lg navbar-light main-content-menu">
23-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#articleNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
24-
<span class="navbar-toggler-icon"></span>
25-
</button>
26-
27-
<div class="collapse navbar-collapse" id="articleNavDropdown">
28-
<ul class="navbar-nav">
29-
{% for item in items %}
30-
<li class="nav-item">
31-
<a class="nav-link" href="#{{ item.slug }}">{{ item.title }}</a>
32-
</li>
33-
{% endfor %}
34-
</ul>
21+
<div class="container-fluid nav-menu-wrapper">
22+
<div class="container">
23+
<nav class="navbar navbar-expand-lg navbar-light main-content-menu">
24+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#articleNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
25+
<span class="navbar-toggler-icon"></span>
26+
</button>
27+
28+
<div class="collapse navbar-collapse" id="articleNavDropdown">
29+
<ul class="navbar-nav">
30+
{% for item in items %}
31+
<li class="nav-item">
32+
<a class="nav-link" href="#{{ item.slug }}" data-id="{{ item.slug }}" >{{ item.title }}</a>
33+
</li>
34+
{% endfor %}
35+
</ul>
36+
</div>
37+
</nav>
3538
</div>
36-
</nav>
39+
</div>
40+
41+
<div class="container">
42+
3743

3844
<!-- START CONTENT -->
3945

@@ -102,16 +108,21 @@ <h5>Course Name</h5>
102108
showArticle(firstArticleSlug);
103109
}
104110

111+
$('.nav-link[data-id="' + pageHash + '"]').parent(".nav-item").addClass("nav-select");
112+
105113
// On article menu click update the hash of the page as per the displayed content
106-
$(".main-content-menu .nav-link").on('click', function(e) {
114+
$(".main-content-menu .nav-item").on('click', function(e) {
107115
e.preventDefault();
108-
var slug = $(this).attr('href').replace(/^#/, '');
116+
var slug = $(this).children(".nav-link").attr('href').replace(/^#/, '');
109117
window.location.hash = slug;
110118
showArticle(slug);
119+
$(".nav-item").removeClass("nav-select");
120+
$(this).addClass("nav-select");
111121
});
112122

113123
function showArticle(slug) {
114124
$(".article-wrapper").hide();
115125
$(".article-wrapper[data-slug='" + slug + "']").show();
116126
}
117127
</script>
128+
<script src="{{ site.baseurl }}/assets/quick-start-module.js"></script>

0 commit comments

Comments
 (0)