nitdoc: topmenu responsive design for small resolutions
authorAlexandre Terrasa <alexandre@moz-code.org>
Tue, 17 Jun 2014 15:55:37 +0000 (11:55 -0400)
committerAlexandre Terrasa <alexandre@moz-code.org>
Thu, 26 Jun 2014 18:59:39 +0000 (14:59 -0400)
Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

Makefile
share/nitdoc/css/nitdoc.css
share/nitdoc/js/plugins/quicksearch.js
src/doc/doc_pages.nit
src/doc/doc_templates.nit

index a88d277..a6b4849 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -36,7 +36,7 @@ doc/stdlib/index.html: bin/nitdoc bin/nitls
        @echo '***************************************************************'
        bin/nitdoc $$(bin/nitls lib -r --path) -d doc/stdlib \
                --custom-title "Nit Standard Library" \
-               --custom-menu-items "<li><a href=\"http://nitlanguage.org/\">Nitlanguage.org</a></li>" \
+               --custom-brand "<a href=\"http://nitlanguage.org/\">Nitlanguage.org</a>" \
                --custom-overview-text "<p>Documentation for the standard library of Nit<br/>Version $$(git describe)<br/>Date: $$(git show --format="%cd" | head -1)</p>" \
                --custom-footer-text "Nit standard library. Version $$(git describe)." \
                --github-upstream "privat:nit:master" \
@@ -44,13 +44,14 @@ doc/stdlib/index.html: bin/nitdoc bin/nitls
                --github-gitdir "." \
                --source "https://github.com/privat/nit/blob/$$(git rev-parse HEAD)/%f#L%l-%L" \
                --piwik-tracker "pratchett.info.uqam.ca/piwik/" \
-               --piwik-site-id "2"
+               --piwik-site-id "2" \
+               --shareurl "../../share/nitdoc"
 
 doc/nitc/index.html: bin/nitdoc
        bin/nitdoc src/nit*.nit src/test_*.nit -d doc/nitc \
                --private \
                --custom-title "Nit Compilers and Tools" \
-               --custom-menu-items "<li><a href=\"http://nitlanguage.org/\">Nitlanguage.org</a></li>" \
+               --custom-brand "<a href=\"http://nitlanguage.org/\">Nitlanguage.org</a>" \
                --custom-overview-text "<p>Documentation for the Nit tools<br/>Version $$(git describe)<br/>Date: $$(git show --format="%cd" | head -1)</p>" \
                --custom-footer-text "Nit tools. Version $$(git describe)." \
                --github-upstream "privat:nit:master" \
index dc7c855..de3cd83 100644 (file)
@@ -19,6 +19,11 @@ ul li .label {
        font-family: monospace;
 }
 
+.navbar-default .navbar-toggle {
+       margin-top: 2px;
+       padding: 5px 10px;
+}
+
 /*
  * Sidebar
  */
index 12c124a..13f500c 100644 (file)
@@ -366,7 +366,7 @@ define([
                placeholder: "Search..."
        })
 
-       $("#topmenu>.container-fluid").append(
+       $("#topmenu-collapse").append(
                $("<div>")
                .addClass("navbar-form navbar-right")
                .append(
index bb379e5..2d2c733 100644 (file)
@@ -27,7 +27,7 @@ class NitdocContext
        private var opt_private = new OptionBool("also generate private API", "--private")
 
        private var opt_custom_title = new OptionString("custom title for homepage", "--custom-title")
-       private var opt_custom_menu = new OptionString("custom items added in top menu (each item must be enclosed in 'li' tags)", "--custom-menu-items")
+       private var opt_custom_brand = new OptionString("custom link to external site", "--custom-brand")
        private var opt_custom_intro = new OptionString("custom intro text for homepage", "--custom-overview-text")
        private var opt_custom_footer = new OptionString("custom footer text", "--custom-footer-text")
 
@@ -47,7 +47,7 @@ class NitdocContext
        init do
                var opts = toolcontext.option_context
                opts.add_option(opt_dir, opt_source, opt_sharedir, opt_shareurl, opt_nodot, opt_private)
-               opts.add_option(opt_custom_title, opt_custom_footer, opt_custom_intro, opt_custom_menu)
+               opts.add_option(opt_custom_title, opt_custom_footer, opt_custom_intro, opt_custom_brand)
                opts.add_option(opt_github_upstream, opt_github_base_sha1, opt_github_gitdir)
                opts.add_option(opt_piwik_tracker, opt_piwik_site_id)
 
@@ -280,8 +280,14 @@ abstract class NitdocPage
        # Build top menu template
        fun tpl_topmenu: TplTopMenu do
                var topmenu = new TplTopMenu
-               var custom_elt = ctx.opt_custom_menu.value
-               if custom_elt != null then topmenu.add_raw(custom_elt)
+               var brand = ctx.opt_custom_brand.value
+               if brand != null then
+                       var tpl = new Template
+                       tpl.add "<span class='navbar-brand'>"
+                       tpl.add brand
+                       tpl.add "</span>"
+                       topmenu.brand = tpl
+               end
                return topmenu
        end
 
@@ -449,8 +455,8 @@ class NitdocOverview
 
        redef fun tpl_topmenu do
                var topmenu = super
-               topmenu.add_link("#", "Overview", true)
-               topmenu.add_link("search.html", "Index", false)
+               topmenu.add_item(new TplLink("#", "Overview"), true)
+               topmenu.add_item(new TplLink("search.html", "Index"), false)
                return topmenu
        end
 
@@ -496,8 +502,8 @@ class NitdocSearch
 
        redef fun tpl_topmenu do
                var topmenu = super
-               topmenu.add_link("index.html", "Overview", false)
-               topmenu.add_link("#", "Index", true)
+               topmenu.add_item(new TplLink("index.html", "Overview"), false)
+               topmenu.add_item(new TplLink("#", "Index"), true)
                return topmenu
        end
 
@@ -584,9 +590,9 @@ class NitdocModule
 
        redef fun tpl_topmenu do
                var topmenu = super
-               topmenu.add_link("index.html", "Overview", false)
-               topmenu.add_link("#", "{mmodule.nitdoc_name}", true)
-               topmenu.add_link("search.html", "Index", false)
+               topmenu.add_item(new TplLink("index.html", "Overview"), false)
+               topmenu.add_item(new TplLink("#", "{mmodule.nitdoc_name}"), true)
+               topmenu.add_item(new TplLink("search.html", "Index"), false)
                return topmenu
        end
 
@@ -781,10 +787,10 @@ class NitdocClass
                else
                        mmodule = mclass.public_owner.as(not null)
                end
-               topmenu.add_link("index.html", "Overview", false)
-               topmenu.add_link("{mmodule.nitdoc_url}", "{mmodule.nitdoc_name}", false)
-               topmenu.add_link("#", "{mclass.nitdoc_name}", true)
-               topmenu.add_link("search.html", "Index", false)
+               topmenu.add_item(new TplLink("index.html", "Overview"), false)
+               topmenu.add_item(new TplLink("{mmodule.nitdoc_url}", "{mmodule.nitdoc_name}"), false)
+               topmenu.add_item(new TplLink("#", "{mclass.nitdoc_name}"), true)
+               topmenu.add_item(new TplLink("search.html", "Index"), false)
                return topmenu
        end
 
index 788cb85..ce4949b 100644 (file)
@@ -149,18 +149,22 @@ end
 class TplTopMenu
        super Template
 
+       # Brand link to display in first position of the top menu
+       private var brand: nullable Streamable writable
        # Elements of the topmenu
        private var elts = new Array[Streamable]
 
-       # Add a new link to the menu
-       fun add_link(href, name: String, is_active: Bool) do
+       init do end
+
+       # Add a content between `<li>` tags
+       fun add_item(content: Streamable, is_active: Bool) do
                var tpl = new Template
                tpl.add "<li"
                if is_active then
                        tpl.add " class='active'"
                end
                tpl.add ">"
-               tpl.add new TplLink(href, name)
+               tpl.add content
                tpl.add "</li>"
                add_raw(tpl)
        end
@@ -171,13 +175,26 @@ class TplTopMenu
        end
 
        redef fun rendering do
+               if brand == null and elts.is_empty then return
                add "<nav id='topmenu' class='navbar navbar-default navbar-fixed-top' role='navigation'>"
                add " <div class='container-fluid'>"
+               add "  <div class='navbar-header'>"
+               add "   <button type='button' class='navbar-toggle' "
+               add "       data-toggle='collapse' data-target='#topmenu-collapse'>"
+               add "    <span class='sr-only'>Toggle menu</span>"
+               add "    <span class='icon-bar'></span>"
+               add "    <span class='icon-bar'></span>"
+               add "    <span class='icon-bar'></span>"
+               add "   </button>"
+               if brand != null then add brand.as(not null)
+               add "  </div>"
+               add "  <div class='collapse navbar-collapse' id='topmenu-collapse'>"
                if not elts.is_empty then
                        add "<ul class='nav navbar-nav'>"
-                       for elt in elts do add(elt)
+                       for elt in elts do add elt
                        add "</ul>"
                end
+               add "  </div>"
                add " </div>"
                add "</nav>"
        end