Skip to content

Commit 757ab5e

Browse files
author
Pat Mellon
committed
wip - mobile page sidebar
1 parent 81c330e commit 757ab5e

File tree

6 files changed

+105
-6
lines changed

6 files changed

+105
-6
lines changed

‎_includes/mobile_page_side_nav.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="sticky-top mobile-page-sidebar">
2+
<p>Shortcuts</p>
3+
<ul id="mobile-page-sidebar-list"></ul>
4+
</div>
5+

‎_layouts/mobile.html

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,17 @@ <h1>PyTorch Mobile</h1>
3333
</div>
3434

3535
<div class="container">
36-
<div class="article-wrapper" data-id="{{ item.slug }}">
37-
<article class="pytorch-article">
38-
{{ content }}
39-
</article>
36+
<div class="row">
37+
<div class="col-md-3">
38+
{% include mobile_page_side_nav.html %}
39+
</div>
40+
<div class="col-md-8 offset-md-1">
41+
<div class="article-wrapper" data-id="{{ item.slug }}">
42+
<article class="pytorch-article">
43+
{{ content }}
44+
</article>
45+
</div>
46+
</div>
4047
</div>
4148
</div>
4249
</div>
@@ -45,3 +52,5 @@ <h1>PyTorch Mobile</h1>
4552
{% include footer.html %}
4653
</body>
4754
</html>
55+
56+
<script src="{{ site.baseurl }}/assets/mobile-page-sidebar.js"></script>

‎_mobile/android.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ order: 2
88
published: true
99
---
1010

11-
## Android
11+
# Android
1212

1313
{% highlight python %}
1414

‎_mobile/ios.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ order: 1
88
published: true
99
---
1010

11-
## iOS
11+
# iOS
1212

1313
{% highlight python %}
1414

@@ -17,4 +17,39 @@ published: true
1717

1818
{% endhighlight %}
1919

20+
## Lorem Ipsum
21+
22+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
23+
24+
Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
25+
26+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
27+
28+
## Binaries
29+
30+
Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
31+
32+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
33+
34+
## Build Scripts
35+
36+
Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
37+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
38+
39+
Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
41+
42+
## Objective C Walkthrough Cocopods Walkthrough Tutorials
43+
44+
Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
45+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
46+
47+
## How To
48+
49+
Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
50+
51+
## Dolor Sit Amet
52+
53+
Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
54+
2055
<script page-id="ios" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>

‎_sass/mobile.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,30 @@
103103
.mobile .navbar-nav {
104104
flex-direction: row;
105105
}
106+
107+
.mobile .mobile-page-sidebar {
108+
padding-top: rem(40px);
109+
padding-bottom: rem(40px);
110+
top: 15%;
111+
112+
@include desktop {
113+
padding-top: 0;
114+
}
115+
116+
ul {
117+
padding-left: 0;
118+
}
119+
120+
li {
121+
list-style-type: none;
122+
line-height: 36px;
123+
124+
a {
125+
color: #8c8c8c;
126+
&.active,
127+
&:hover {
128+
color: $orange;
129+
}
130+
}
131+
}
132+
}

‎assets/mobile-page-sidebar.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
$(".pytorch-article h2").each(function() {
2+
$("#mobile-page-sidebar-list").append(
3+
"<li><a href=#" + this.id + ">" + this.textContent + "</a></li>"
4+
);
5+
});
6+
7+
$(".mobile-page-sidebar li").on("click", function() {
8+
removeActiveClass();
9+
addActiveClass(this);
10+
});
11+
12+
13+
function removeActiveClass() {
14+
$(".mobile-page-sidebar li a").each(function() {
15+
$(this).removeClass("active");
16+
});
17+
}
18+
19+
function addActiveClass(element) {
20+
$(element)
21+
.find("a")
22+
.addClass("active");
23+
}

0 commit comments

Comments
 (0)