Responsive side navigation

JuliaDocs · Apr 17, 2017 · 1f7f090 · 1f7f090
1 parent 0d77e0a
commit 1f7f090
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 2 deletions.
diff --git a/assets/html/documenter.css b/assets/html/documenter.css
@@ -264,6 +264,10 @@ nav.toc li.current > .toctext {
     background-color: white;
 }
 
+div.topbar {
+    display: none;
+}
+
 article {
     margin-left: 20em;
     min-width: 20em;
@@ -428,3 +432,98 @@ article section.docstring a.source-link {
     background-color: transparent;
     padding: 0;
 }
+
+@media only screen and (max-width: 768px) {
+    div.topbar {
+        display: block; /* is mobile */
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        height: 2.5em;
+        overflow: hidden;
+        background-color: white;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+                    0 1px 5px 0 rgba(0,0,0,.12),
+                    0 3px 1px -2px rgba(0,0,0,.2);
+        z-index: 1;
+    }
+
+    div.topbar div.container {
+        height: 100%;
+        width: 100vw;
+    }
+
+    div.topbar ul {
+        font-weight: bold;
+        line-height: 2.5em;
+        list-style: none;
+    }
+
+    div.topbar ul.float-left {
+        float: left;
+        font-size: smaller;
+        width: 60%;
+        padding-left: 1em;
+        margin-top: 0.3em;
+    }
+
+    div.topbar ul.float-left li {
+        white-space: nowrap;
+        display: inline-block;
+    }
+
+    div.topbar ul.float-right {
+        float: right;
+        padding: 0 0 0 0;
+        margin-top: 0.1em;
+    }
+
+    div.topbar ul.float-right i.fa-bars {
+        width: 1em;
+        padding-left: 0.5em;
+        padding-right: 0.5em;
+        text-align: right;
+        font-size: x-large;
+        background-color: white;
+    }
+
+    div.main div.container {
+        margin-top: 1em;
+    }
+
+    nav.toc {
+        position: fixed;
+        overflow-y: scroll;
+        z-index: 2;
+        width: 80%;
+        -webkit-overflow-scrolling: touch;
+        -webkit-transition-property: left; /* Safari */
+        -webkit-transition-duration: 0.3s; /* Safari */
+        transition-property: left;
+        transition-duration: 0.3s;
+        left: -768px;
+        -webkit-transition-timing-function: ease-in; /* Safari */
+        transition-timing-function: ease-in;
+    }
+
+    nav.toc.show {
+        left: 0rem;
+        -webkit-transition-timing-function: ease-out; /* Safari */
+        transition-timing-function: ease-out;
+    }
+
+    article {
+        padding-top: -3em;
+        padding-left: 0.9em;
+        padding-right: 0.9em;
+        margin-left: 0;
+    }
+
+    article [id]:before {
+        display: inline-block;
+        content: "";
+        padding-top: 5em;
+        margin-top: -5em;
+    }
+}
diff --git a/assets/html/documenter.js b/assets/html/documenter.js
@@ -94,3 +94,21 @@ require(['jquery'], function($) {
     })
 
 })
+
+// mobile
+require(['jquery'], function($) {
+    $(document).ready(function() {
+        var navtoc = $("nav.toc");
+        var navtoc_current_top = $('nav.toc li.current').offset().top;
+        $("nav.toc li.current a.toctext").click(function(ev) {
+            navtoc.toggleClass('show');
+        });
+        $("div.topbar ul.float-right a.btn").click(function() {
+            navtoc.toggleClass('show');
+            if (navtoc.hasClass('show')) {
+                navtoc.animate({scrollTop: navtoc_current_top}, 0);
+            }
+        });
+    })
+
+})
diff --git a/src/Writers/HTMLWriter.jl b/src/Writers/HTMLWriter.jl
@@ -160,18 +160,19 @@ end
 Constructs and writes the page referred to by the `navnode` to `.build`.
 """
 function render_page(ctx, navnode)
-    @tags html body
+    @tags html body div
 
     page = getpage(ctx, navnode)
 
     head = render_head(ctx, navnode)
+    topbar = render_topbar(ctx, navnode)
     navmenu = render_navmenu(ctx, navnode)
     article = render_article(ctx, navnode)
 
     htmldoc = DOM.HTMLDocument(
         html[:lang=>"en"](
             head,
-            body(navmenu, article)
+            body(topbar, div[".main"](div[".container"](navmenu, article)))
         )
     )
     open(Formats.extension(:html, page.build), "w") do io
@@ -275,6 +276,20 @@ function render_search(ctx)
     end
 end
 
+
+# topbar for mobile
+# ------------------------------------------------------------------------------
+
+function render_topbar(ctx, navnode)
+    @tags div ul li span a i
+
+    page_title = string(mdflatten(pagetitle(ctx, navnode)))
+    topbarleft = ul[".float-left"](li(span(page_title)))
+    topbarright = ul[".float-right"](li(a[".btn", :href => "#"](i[".fa .fa-bars", Symbol("aria-hidden") => "true"])))
+    div[".topbar"](div[".container"](topbarleft, topbarright))
+end
+
+
 # Navigation menu
 # ------------------------------------------------------------------------------