experiments using taginfo on mobile

6 files changed, 79 insertions, 8 deletions

diff --git a/web/lib/javascript.rb b/web/lib/javascript.rb
index ff9f178..e385d72 100644
--- a/web/lib/javascript.rb
+++ b/web/lib/javascript.rb
@@ -17,7 +17,7 @@ class Javascript
 
     @@js_files = {
 #        :common    => [ 'jquery-1.11.1.min', 'jquery-ui-1.9.2.custom.min', 'customSelect.jquery.min', 'jquery.tipsy-minified', 'jquery.cookie-minified' ],
-        :common    => [ 'common' ],
+        :common    => [ 'common', 'jquery.slicknav.min' ],
         :taginfo   => [ 'taginfo' ],
         :flexigrid => [ 'jquery-migrate-1.2.1.min', 'flexigrid-minified' ],
         :d3        => [ 'd3/d3.v3.min' ],
diff --git a/web/public/css/slicknav.min.css b/web/public/css/slicknav.min.css
new file mode 100644
index 0000000..4acfbec
--- /dev/null
+++ b/web/public/css/slicknav.min.css
@@ -0,0 +1,5 @@
+/*!
+ * SlickNav Responsive Mobile Menu v1.0.3
+ * (c) 2015 Josh Cope
+ * licensed under MIT
+ */.slicknav_menu:after,.slicknav_menu:before{display:table;content:" "}.slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu,.slicknav_menu *{box-sizing:border-box}.slicknav_nav,.slicknav_nav ul{padding:0;list-style:none;overflow:hidden}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em}.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_menu .slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_menu .slicknav_icon{float:left;margin:.188em 0 0 .438em}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu .slicknav_icon-bar{display:block;width:1.125em;height:.125em;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.slicknav_menu:after{clear:both}.slicknav_nav li,.slicknav_nav ul{display:block}.slicknav_nav .slicknav_arrow{font-size:.8em;margin:0 0 0 .4em}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{*zoom:1;font-size:16px;background:#4c4c4c;padding:5px}.slicknav_menu .slicknav_icon-bar{background-color:#fff}.slicknav_btn{margin:5px 5px 6px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#222}.slicknav_nav{clear:both;color:#fff;margin:0;font-size:.875em}.slicknav_nav ul{margin:0 0 0 20px}.slicknav_nav .slicknav_row,.slicknav_nav a{padding:5px 10px;margin:2px 5px}.slicknav_nav .slicknav_row:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#fff}.slicknav_nav a{text-decoration:none;color:#fff}.slicknav_nav a:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#222}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px}
\ No newline at end of file
diff --git a/web/public/css/taginfo.css b/web/public/css/taginfo.css
index 2cf231f..a925372 100644
--- a/web/public/css/taginfo.css
+++ b/web/public/css/taginfo.css
@@ -174,7 +174,14 @@ span.customSelect {
 /* ========== */
 
 div#header {
-    padding: 15px 20px 20px 20px;
+    padding: 15px 20px 10px 20px;
+}
+
+@media screen and (max-width: 40em) {
+    div#header {
+        position: absolute;
+        top: 20px;
+    }
 }
 
 div#header_date {
@@ -200,7 +207,6 @@ div#header div#header_forms form {
 select#locale, select#lang {
     font-size: 90%;
     background-color: #ffffff;
-    width: 98px;
     border: none;
 }
 
@@ -226,6 +232,51 @@ input:focus {
 
 /* ========== */
 
+
+ul#menu {
+    margin: 0px 20px 10px 20px;
+    padding: 0;
+    border-bottom: 1px solid #a0a0a0;
+    text-transform: uppercase;
+    font-weight: normal;
+}
+
+ul#menu li {
+    margin: 0;
+    padding: 0;
+    text-indent: 0;
+    display: inline;
+}
+
+ul#menu li:after {
+    content: " \00b7 ";
+}
+
+ul#menu li:last-child:after {
+    content: "";
+}
+
+ul#menu a:hover {
+    text-decoration: none;
+    border-bottom: 3px solid #a0a0a0;
+}
+
+.slicknav_menu {
+    display:none;
+}
+
+@media screen and (max-width: 40em) {
+    #menu {
+        display:none;
+    }
+
+    .slicknav_menu {
+        display:block;
+    }
+}
+
+/* ========== */
+
 div#main {
     margin: 0 20px;
 }
diff --git a/web/public/js/jquery.slicknav.min.js b/web/public/js/jquery.slicknav.min.js
new file mode 100644
index 0000000..2890b5d
--- /dev/null
+++ b/web/public/js/jquery.slicknav.min.js
@@ -0,0 +1,6 @@
+/*!
+ * SlickNav Responsive Mobile Menu v1.0.4
+ * (c) 2015 Josh Cope
+ * licensed under MIT
+ */
+!function(e,n,t){function a(n,t){this.element=n,this.settings=e.extend({},i,t),this._defaults=i,this._name=s,this.init()}var i={label:"MENU",duplicate:!0,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"&#9658;",openedSymbol:"&#9660;",prependTo:"body",parentTag:"a",closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!1,removeClasses:!1,brand:"",init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s="slicknav",l="slicknav";a.prototype.init=function(){var t,a,i=this,s=e(this.element),o=this.settings;if(o.duplicate?(i.mobileNav=s.clone(),i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("id")})):(i.mobileNav=s,i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("id")})),o.removeClasses&&(i.mobileNav.removeAttr("class"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("class")})),t=l+"_icon",""===o.label&&(t+=" "+l+"_no-text"),"a"==o.parentTag&&(o.parentTag='a href="#"'),i.mobileNav.attr("class",l+"_nav"),a=e('<div class="'+l+'_menu"></div>'),""!==o.brand){var r=e('<div class="'+l+'_brand">'+o.brand+"</div>");e(a).append(r)}i.btn=e(["<"+o.parentTag+' aria-haspopup="true" tabindex="0" class="'+l+"_btn "+l+'_collapsed">','<span class="'+l+'_menutxt">'+o.label+"</span>",'<span class="'+t+'">','<span class="'+l+'_icon-bar"></span>','<span class="'+l+'_icon-bar"></span>','<span class="'+l+'_icon-bar"></span>',"</span>","</"+o.parentTag+">"].join("")),e(a).append(i.btn),e(o.prependTo).prepend(a),a.append(i.mobileNav);var d=i.mobileNav.find("li");e(d).each(function(){var n=e(this),t={};if(t.children=n.children("ul").attr("role","menu"),n.data("menu",t),t.children.length>0){var a=n.contents(),s=!1,r=[];e(a).each(function(){return e(this).is("ul")?!1:(r.push(this),void(e(this).is("a")&&(s=!0)))});var d=e("<"+o.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+l+'_item"/>');if(o.allowParentLinks&&!o.nestedParentLinks&&s)e(r).wrapAll('<span class="'+l+"_parent-link "+l+'_row"/>').parent();else{var c=e(r).wrapAll(d).parent();c.addClass(l+"_row")}n.addClass(o.showChildren?l+"_open":l+"_collapsed"),n.addClass(l+"_parent");var p=e('<span class="'+l+'_arrow">'+(o.showChildren?o.openedSymbol:o.closedSymbol)+"</span>");o.allowParentLinks&&!o.nestedParentLinks&&s&&(p=p.wrap(d).parent()),e(r).last().after(p)}else 0===n.children().length&&n.addClass(l+"_txtnode");n.children("a").attr("role","menuitem").click(function(n){o.closeOnClick&&!e(n.target).parent().closest("li").hasClass(l+"_parent")&&e(i.btn).click()}),o.closeOnClick&&o.allowParentLinks&&(n.children("a").children("a").click(function(n){e(i.btn).click()}),n.find("."+l+"_parent-link a:not(."+l+"_item)").click(function(n){e(i.btn).click()}))}),e(d).each(function(){var n=e(this).data("menu");o.showChildren||i._visibilityToggle(n.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,"init",!0),i.mobileNav.attr("role","menu"),e(n).mousedown(function(){i._outlines(!1)}),e(n).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on("click","."+l+"_item",function(n){n.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(e){var n=e||event;13==n.keyCode&&(e.preventDefault(),i._menuToggle())}),i.mobileNav.on("keydown","."+l+"_item",function(n){var t=n||event;13==t.keyCode&&(n.preventDefault(),i._itemClick(e(n.target)))}),o.allowParentLinks&&o.nestedParentLinks&&e("."+l+"_item a").click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var n=this,t=n.btn,a=n.mobileNav;t.hasClass(l+"_collapsed")?(t.removeClass(l+"_collapsed"),t.addClass(l+"_open")):(t.removeClass(l+"_open"),t.addClass(l+"_collapsed")),t.addClass(l+"_animating"),n._visibilityToggle(a,t.parent(),!0,t)},a.prototype._itemClick=function(e){var n=this,t=n.settings,a=e.data("menu");a||(a={},a.arrow=e.children("."+l+"_arrow"),a.ul=e.next("ul"),a.parent=e.parent(),a.parent.hasClass(l+"_parent-link")&&(a.parent=e.parent().parent(),a.ul=e.parent().next("ul")),e.data("menu",a)),a.parent.hasClass(l+"_collapsed")?(a.arrow.html(t.openedSymbol),a.parent.removeClass(l+"_collapsed"),a.parent.addClass(l+"_open"),a.parent.addClass(l+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(t.closedSymbol),a.parent.addClass(l+"_collapsed"),a.parent.removeClass(l+"_open"),a.parent.addClass(l+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(n,t,a,i,s){var o=this,r=o.settings,d=o._getActionItems(n),c=0;a&&(c=r.duration),n.hasClass(l+"_hidden")?(n.removeClass(l+"_hidden"),s||r.beforeOpen(i),n.slideDown(c,r.easingOpen,function(){e(i).removeClass(l+"_animating"),e(t).removeClass(l+"_animating"),s||r.afterOpen(i)}),n.attr("aria-hidden","false"),d.attr("tabindex","0"),o._setVisAttr(n,!1)):(n.addClass(l+"_hidden"),s||r.beforeClose(i),n.slideUp(c,this.settings.easingClose,function(){n.attr("aria-hidden","true"),d.attr("tabindex","-1"),o._setVisAttr(n,!0),n.hide(),e(i).removeClass(l+"_animating"),e(t).removeClass(l+"_animating"),s?"init"==i&&r.init():r.afterClose(i)}))},a.prototype._setVisAttr=function(n,t){var a=this,i=n.children("li").children("ul").not("."+l+"_hidden");i.each(t?function(){var n=e(this);n.attr("aria-hidden","true");var i=a._getActionItems(n);i.attr("tabindex","-1"),a._setVisAttr(n,t)}:function(){var n=e(this);n.attr("aria-hidden","false");var i=a._getActionItems(n);i.attr("tabindex","0"),a._setVisAttr(n,t)})},a.prototype._getActionItems=function(e){var n=e.data("menu");if(!n){n={};var t=e.children("li"),a=t.find("a");n.links=a.add(t.find("."+l+"_item")),e.data("menu",n)}return n.links},a.prototype._outlines=function(n){n?e("."+l+"_item, ."+l+"_btn").css("outline",""):e("."+l+"_item, ."+l+"_btn").css("outline","none")},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(l+"_collapsed")&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(l+"_open")&&e._menuToggle()},e.fn[s]=function(n){var t=arguments;if(void 0===n||"object"==typeof n)return this.each(function(){e.data(this,"plugin_"+s)||e.data(this,"plugin_"+s,new a(this,n))});if("string"==typeof n&&"_"!==n[0]&&"init"!==n){var i;return this.each(function(){var l=e.data(this,"plugin_"+s);l instanceof a&&"function"==typeof l[n]&&(i=l[n].apply(l,Array.prototype.slice.call(t,1)))}),void 0!==i?i:this}}}(jQuery,document,window);
\ No newline at end of file
diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index d3f9225..67e1941 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -885,6 +885,8 @@ jQuery(document).ready(function() {
         return jQuery('input#search').val() != '';
     });
 
+    jQuery('#menu').slicknav({ prependTo: 'body' });
+
     jQuery(window).resize(function() {
         resize_box();
         resize_grid(current_grid);
diff --git a/web/views/layout.erb b/web/views/layout.erb
index 3320c15..f09f543 100644
--- a/web/views/layout.erb
+++ b/web/views/layout.erb
@@ -4,9 +4,11 @@
     <title><%= h(title) %></title>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <meta name="content-language" content="<%= r18n.locale.code %>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link rel="stylesheet" type="text/css" href="/css/taginfo.css" />
     <link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.8.10.custom-minified.css" />
     <link rel="stylesheet" type="text/css" href="/css/flexigrid/flexigrid-minified.css" />
+    <link rel="stylesheet" type="text/css" href="/css/slicknav.min.css" />
     <link rel="search" type="application/opensearchdescription+xml" href="/search/opensearch.xml" title="<%= TaginfoConfig.get('opensearch.shortname') %>" />
 <% if @css %>
     <style type="text/css"><!--
@@ -41,6 +43,16 @@
 <% end %>
         </div>
     </div>
+<% unless @nosearch %>
+    <ul id="menu">
+        <li><a href="/keys"><%= h(t.osm.keys) %></a></li>
+        <li><a href="/tags"><%= h(t.osm.tags) %></a></li>
+        <li><a href="/relations"><%= h(t.osm.relations) %></a></li>
+        <li><a href="/projects"><%= h(t.taginfo.projects) %></a></li>
+        <li><a href="/reports"><%= h(t.taginfo.reports) %></a></li>
+        <li><a href="/about"><%= h(t.taginfo.about) %></a></li>
+    </ul>
+<% end %>
     <div id="main">
 <%= yield %>
     </div>
@@ -48,12 +60,7 @@
         <div id="footer_left"><a class="extlink" href="//www.openstreetmap.org/"><b>OpenStreetMap</b></a> &middot;
             <a href="//www.openstreetmap.org/copyright">Data &copy; OSM contributors (ODbL)</a></div>
         <div id="footer_right">
-            <a href="/keys"><%= h(t.osm.keys) %></a> &middot;
-            <a href="/tags"><%= h(t.osm.tags) %></a> &middot;
-            <a href="/relations"><%= h(t.osm.relations) %></a> &middot;
-            <a href="/reports"><%= h(t.taginfo.reports) %></a> &middot;
             <a href="/sources"><%= h(t.taginfo.sources) %></a> &middot;
-            <a href="/projects"><%= h(t.taginfo.projects) %></a> &middot;
             <a href="/download"><%= h(t.taginfo.download) %></a> &middot;
             <a href="/taginfo/apidoc">API</a> &middot;
             <a href="/about"><%= h(t.taginfo.about) %></a> &middot;