git.iko.soy/urbit.org
on master help sign in
Merge pull request #33 from urbit/docs-mobile-nav
57dfe17Morgan Sutherland
partials/doc-wrap.hoon+18−5
compare with master
unifiedsplit
@@ -12,20 +12,33 @@
12 ;+ (head "Urbit / Docs")
12 ;+ (head "Urbit / Docs")
13 ;body
13 ;body
14 ;+ menu
14 ;+ menu
15+ ;div#sidebar-mobile.bg-gray-light.sidebar-hide.overflow-y
16+ ;div.container
17+ ;div.col-sm-10
18+ ;+ sidebar
19+ ==
20+ ;div.col-sm-1.sidebar-toggle.fixed(style "top: 20px; right: 1em")
21+ ;img.w-8.h-8.dropdown-right@"/assets/dropdown.svg";
22+ ==
23+ ==
24+ ==
15 ;div.container.mt-10
25 ;div.container.mt-10
16− ;div.row.fixed.pb-30(style "height:100%")
26+ ;div.row.col-sm-2.col-md-3.fixed.pb-30.h-100-md
17− ;div.col-sm-3.col-md-12.menu-toggle
27+ ;div.col-sm-3.col-lg-6.menu-toggle
18 ;img.w-8.h-8@"/assets/menu-open.svg";
28 ;img.w-8.h-8@"/assets/menu-open.svg";
19 ==
29 ==
20−
30+ ;div.col-sm-12.mt-7.sidebar-toggle.md-hide
31+ ;img.w-8.h-8.dropdown-left@"/assets/dropdown.svg";
32+ ==
21− ;div.overflow-y.col-sm-8.col-lg-12.w-48.sm-hide(style "height:100%")
33+ ;div.overflow-y.col-sm-8.col-md-11.col-lg-7.w-48.sm-hide(style "height:100%")
22 ;+ sidebar
34 ;+ sidebar
23 ==
35 ==
24 ==
36 ==
25 ;div.row.pb-80
37 ;div.row.pb-80
26− ;div.col-sm-9.col-md-8.col-sm-offset-3.col-md-offset-3.docs
38+ ;div.col-sm-9.col-md-8.col-sm-offset-2.col-md-offset-3.docs
27 ;+ content
39 ;+ content
28 ==
40 ==
41+
29 ==
42 ==
30 ==
43 ==
31 ;footer.mb-36
44 ;footer.mb-36
partials/head.hoon−2
@@ -5,14 +5,12 @@
5 ;meta(name "viewport", content "width=device-width , initial-scale=1");
5 ;meta(name "viewport", content "width=device-width , initial-scale=1");
6 ;link/"/tilde.ico"(rel "icon");
6 ;link/"/tilde.ico"(rel "icon");
7 ;link/"/css/base.css"(rel "stylesheet");
7 ;link/"/css/base.css"(rel "stylesheet");
8− ;link/"/css/base.css"(rel "preload");
9 ;link/"/css/lists.css"(rel "stylesheet");
8 ;link/"/css/lists.css"(rel "stylesheet");
10 ;link/"/css/visibility.css"(rel "stylesheet");
9 ;link/"/css/visibility.css"(rel "stylesheet");
11 ;link/"/css/borders.css"(rel "stylesheet");
10 ;link/"/css/borders.css"(rel "stylesheet");
12 ;link/"/css/colors.css"(rel "stylesheet");
11 ;link/"/css/colors.css"(rel "stylesheet");
13 ;link/"/css/inputs.css"(rel "stylesheet");
12 ;link/"/css/inputs.css"(rel "stylesheet");
14 ;link/"/css/typography.css"(rel "stylesheet");
13 ;link/"/css/typography.css"(rel "stylesheet");
15− ;link/"/css/typography.css"(rel "preload");
16 ;link/"/css/menu.css"(rel "stylesheet");
14 ;link/"/css/menu.css"(rel "stylesheet");
17 ;link/"/css/images.css"(rel "stylesheet");
15 ;link/"/css/images.css"(rel "stylesheet");
18 ;link/"/css/flex.css"(rel "stylesheet");
16 ;link/"/css/flex.css"(rel "stylesheet");
static-site/assets/dropdown.svgnew file+1
@@ -0,0 +1 @@
1+<svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8.04705 10.7614 4.71405-4.71404h-9.42809z" fill="#000"/></svg>
static-site/css/colors.css+3
@@ -1,3 +1,6 @@
1+.bg-gray-light {
2+ background-color: #E6E6E6;
3+}
1.bg-gray-dark {
4.bg-gray-dark {
2 background-color: #7F7F7F ;
5 background-color: #7F7F7F ;
3}
6}
static-site/css/menu.css+15−3
@@ -1,4 +1,4 @@
1−.menu-show {
1+.menu-show, .sidebar-show {
2 position: fixed;
2 position: fixed;
3 top:0%;
3 top:0%;
4 bottom: 0%;
4 bottom: 0%;
@@ -8,11 +8,23 @@
8 opacity: 1;
8 opacity: 1;
9}
9}
10
10
11−.menu-hide {
11+.menu-hide, .sidebar-hide {
12 visibility: hidden;
12 visibility: hidden;
13 display: none;
13 display: none;
14}
14}
15
15
16−.menu-toggle {
16+.menu-toggle,.sidebar-toggle {
17 cursor: pointer;
17 cursor: pointer;
18}
18}
19+
20+.dropdown-left {
21+ transform: rotate(90deg);
22+}
23+.dropdown-right {
24+ transform: rotate(-90deg);
25+}
26+@media only screen and (min-width: 480px) {
27+ .h-100-md{
28+ height: 100%;
29+ }
30+}
static-site/css/visibility.css+6
@@ -9,3 +9,9 @@
9 display: none;
9 display: none;
10 }
10 }
11}
11}
12+
13+@media only screen and (min-width: 480px) {
14+.md-hide {
15+ display: none;
16+ }
17+}
static-site/js/main.js+7
@@ -4,3 +4,10 @@ $(function() {
4 $('body').toggleClass('overflow-hidden');
4 $('body').toggleClass('overflow-hidden');
5 })
5 })
6});
6});
7+
8+$(function() {
9+ $('.sidebar-toggle').on('click', function() {
10+ $('#sidebar-mobile').toggleClass('sidebar-hide sidebar-show');
11+ $('body').toggleClass('overflow-hidden');
12+ })
13+});