From 20873ba66a39a337cb5cca45f3353199c909ed71 Mon Sep 17 00:00:00 2001 From: Jochen Topf Date: Sat, 8 Aug 2015 17:51:27 +0200 Subject: experiments using taginfo on mobile --- web/lib/javascript.rb | 2 +- web/public/css/slicknav.min.css | 5 ++++ web/public/css/taginfo.css | 55 ++++++++++++++++++++++++++++++++++-- web/public/js/jquery.slicknav.min.js | 6 ++++ web/public/js/taginfo.js | 2 ++ web/views/layout.erb | 17 +++++++---- 6 files changed, 79 insertions(+), 8 deletions(-) create mode 100644 web/public/css/slicknav.min.css create mode 100644 web/public/js/jquery.slicknav.min.js 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:"►",openedSymbol:"▼",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('
'),""!==o.brand){var r=e('
'+o.brand+"
");e(a).append(r)}i.btn=e(["<"+o.parentTag+' aria-haspopup="true" tabindex="0" class="'+l+"_btn "+l+'_collapsed">',''+o.label+"",'','','','',"",""].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('').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(''+(o.showChildren?o.openedSymbol:o.closedSymbol)+"");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 @@ <%= h(title) %> + + <% if @css %>