diff options
author | Thomas ZILLIOX <thomas@zilliox.me> | 2013-07-11 19:25:23 +0400 |
---|---|---|
committer | Thomas ZILLIOX <thomas@zilliox.me> | 2013-07-11 19:25:23 +0400 |
commit | 71463995a1aece407e49f66e161c1deab91db3f8 (patch) | |
tree | 62c9b117267dadbc6b161db8b3d8fb3654a1c761 /plugins | |
parent | a093e74e3253951928cbedc6b19b35ec30bb1e94 (diff) |
Handle tiny screen for main tab navigation
Diffstat (limited to 'plugins')
-rw-r--r-- | plugins/CoreHome/javascripts/datatable.js | 2 | ||||
-rw-r--r-- | plugins/CoreHome/javascripts/jqplot.js | 2 | ||||
-rw-r--r-- | plugins/CoreHome/javascripts/menu.js | 9 | ||||
-rw-r--r-- | plugins/CoreHome/stylesheets/menu.less | 58 | ||||
-rw-r--r-- | plugins/CoreHome/templates/_menu.twig | 40 | ||||
-rw-r--r-- | plugins/PleineLune/stylesheets/_menuDashboard.less | 26 | ||||
-rw-r--r-- | plugins/UserCountryMap/templates/realtimeMap.twig | 2 |
7 files changed, 80 insertions, 59 deletions
diff --git a/plugins/CoreHome/javascripts/datatable.js b/plugins/CoreHome/javascripts/datatable.js index a9e3e52d72..82b9ab5df6 100644 --- a/plugins/CoreHome/javascripts/datatable.js +++ b/plugins/CoreHome/javascripts/datatable.js @@ -1365,7 +1365,7 @@ dataTable.prototype = // if this url is also the url of a menu item, better to click that menu item instead of // doing AJAX request var menuItem = null; - $("#root").find(">ul.nav a").each(function () { + $("#root").find(">.nav a").each(function () { if ($(this).attr('href') == url) { menuItem = this; return false diff --git a/plugins/CoreHome/javascripts/jqplot.js b/plugins/CoreHome/javascripts/jqplot.js index a63a0d33c0..d77d7f582f 100644 --- a/plugins/CoreHome/javascripts/jqplot.js +++ b/plugins/CoreHome/javascripts/jqplot.js @@ -249,7 +249,7 @@ JQPlot.prototype = { if (typeof $.jqplot.visiblePlots == 'undefined') { $.jqplot.visiblePlots = []; - $('ul.nav').on('piwikSwitchPage', function () { + $('.nav').on('piwikSwitchPage', function () { for (var i = 0; i < $.jqplot.visiblePlots.length; i++) { if ($.jqplot.visiblePlots[i] == null) { continue; diff --git a/plugins/CoreHome/javascripts/menu.js b/plugins/CoreHome/javascripts/menu.js index b2010152be..375f08ca58 100644 --- a/plugins/CoreHome/javascripts/menu.js +++ b/plugins/CoreHome/javascripts/menu.js @@ -14,8 +14,11 @@ menu.prototype = resetTimer: null, overMainLI: function () { - $(this).siblings().removeClass('sfHover'); - $(this).addClass('sfHover'); + var $this = $(this); + $this.siblings().removeClass('sfHover'); + $this.addClass('sfHover'); + var subNavHeight = $this.find('> ul').outerHeight(); + $('.nav_sep').height(subNavHeight); clearTimeout(menu.prototype.resetTimer); }, @@ -28,7 +31,7 @@ menu.prototype = }, onItemClick: function (item) { - $('ul.nav').trigger('piwikSwitchPage', item); + $('.nav').trigger('piwikSwitchPage', item); broadcast.propagateAjax( $(item).attr('href').substr(1) ); return false; }, diff --git a/plugins/CoreHome/stylesheets/menu.less b/plugins/CoreHome/stylesheets/menu.less index 7e6e4284b7..444d5437b6 100644 --- a/plugins/CoreHome/stylesheets/menu.less +++ b/plugins/CoreHome/stylesheets/menu.less @@ -1,18 +1,21 @@ .nav { + position: relative; +} + +.nav_tab { line-height: 1; - position: relative; display: table; // The nav has the height og his children margin-bottom: -1px; // Allow tabs to merge with the submenu } -.nav ul { +.nav_tab ul { background: #fff; /*IE6 needs this*/ float: left; position: relative; } /* LEVEL1 NORMAL */ -.nav > li { +.nav_tab > li { background: #f1f1f1; float: left; list-style: none; @@ -23,7 +26,7 @@ border-radius: 4px 4px 0 0; } -.nav a { +.nav_tab a { color: #444; font-size: 18px; display: block; @@ -35,45 +38,45 @@ } /* LEVEL1 HOVER */ -.nav > li:hover, -.nav > li.sfHover { +.nav_tab > li:hover, +.nav_tab > li.sfHover { background: #fff; } -.nav > li:hover > a, -.nav > li.sfHover > a, -.nav > li.sfActive a, -.nav a:hover { +.nav_tab > li:hover > a, +.nav_tab > li.sfHover > a, +.nav_tab > li.sfActive a, +.nav_tab a:hover { color: #e87500; } -.nav > li:hover > a { +.nav_tab > li:hover > a { text-decoration: underline; } -.nav > li.sfActive.sfHover > a { +.nav_tab > li.sfActive.sfHover > a { border-bottom: 1px solid #fff; } /* LEVEL2 NORMAL */ -.nav > li > ul { +.nav_tab > li > ul { padding: 9px 0 5px 0; left: 0; top: -999em; position: absolute; - height: 25px; + min-height: 25px; width: 100%; background: none; } -.nav > li li { +.nav_tab > li li { float: left; background: none; border: 0; text-align: center; } -.nav > li li > a { +.nav_tab > li li > a { padding: 5px 15px; font-size: 14px; border: 0; @@ -86,8 +89,8 @@ } /* LEVEL2 HOVER */ -.nav > li.sfHover > ul, -.nav > li:hover > ul { +.nav_tab > li.sfHover > ul, +.nav_tab > li:hover > ul { z-index: 50; top: 100%; opacity: 1; @@ -97,12 +100,25 @@ transition: opacity 300ms ease-out 10ms; } -.nav > li li:hover > a, -.nav > li li.sfHover > a { +.nav_tab > li li:hover > a, +.nav_tab > li li.sfHover > a { color: #e87500; } -.nav > li li.sfHover > a { +.nav_tab > li li.sfHover > a { font-weight: bold; text-decoration: none !important; } + +@media all and (max-width: 949px) { + .nav { + clear: right; + } +} + +@media all and (max-width: 749px) { + .nav_tab a { + padding-left: 8px; + padding-right: 8px; + } +}
\ No newline at end of file diff --git a/plugins/CoreHome/templates/_menu.twig b/plugins/CoreHome/templates/_menu.twig index 60b7c3bb80..0d2b61eddc 100644 --- a/plugins/CoreHome/templates/_menu.twig +++ b/plugins/CoreHome/templates/_menu.twig @@ -1,21 +1,23 @@ -<ul class="nav"> - {% for level1,level2 in menu %} - <li id="{{ level2._url|urlRewriteWithParameters }}"> - <a href="#{{ level2._url|urlRewriteWithParameters|slice(1) }}" - onclick="return piwikMenu.onItemClick(this);">{{ level1|translate }}</a> - <ul> - {% for name,urlParameters in level2 %} - {% if name|slice(0,1) != '_' %} - <li> - <a href='#{{ urlParameters._url|urlRewriteWithParameters|slice(1) }}' - onclick='return piwikMenu.onItemClick(this);'> - {{ name|translate }} - </a> - </li> - {% endif %} +<div class="nav"> + <ul class="nav_tab"> + {% for level1,level2 in menu %} + <li id="{{ level2._url|urlRewriteWithParameters }}"> + <a href="#{{ level2._url|urlRewriteWithParameters|slice(1) }}" + onclick="return piwikMenu.onItemClick(this);">{{ level1|translate }}</a> + <ul> + {% for name,urlParameters in level2 %} + {% if name|slice(0,1) != '_' %} + <li> + <a href='#{{ urlParameters._url|urlRewriteWithParameters|slice(1) }}' + onclick='return piwikMenu.onItemClick(this);'> + {{ name|translate }} + </a> + </li> + {% endif %} + {% endfor %} + </ul> + </li> {% endfor %} - </ul> - </li> - {% endfor %} -</ul> + </ul> +</div> <div class="nav_sep"></div> diff --git a/plugins/PleineLune/stylesheets/_menuDashboard.less b/plugins/PleineLune/stylesheets/_menuDashboard.less index a4d61df26c..47b0aeb955 100644 --- a/plugins/PleineLune/stylesheets/_menuDashboard.less +++ b/plugins/PleineLune/stylesheets/_menuDashboard.less @@ -1,28 +1,28 @@ /* FIRST LEVEL */ -.nav > li { +.nav_tab> li { background: transparent; border-color: @theme-color-box-border; margin-right: 5px; } -.nav > li:hover, -.nav > li.sfHover{ +.nav_tab> li:hover, +.nav_tab> li.sfHover{ background-color: @theme-color-box-active; } -.nav > li.sfHover > a, -.nav > li.sfActive.sfHover > a { +.nav_tab> li.sfHover > a, +.nav_tab> li.sfActive.sfHover > a { border-bottom: 1px solid @theme-color-box-active; } -.nav > li > a, -.nav > li.sfActive > a { +.nav_tab> li > a, +.nav_tab> li.sfActive > a { color: @theme-color-text-base; } -.nav > li.sfHover > a, -.nav > li.sfActive.sfHover > a { +.nav_tab> li.sfHover > a, +.nav_tab> li.sfActive.sfHover > a { color: @theme-color-text-active; } @@ -32,13 +32,13 @@ background: @theme-color-box-active; } -.nav > li li > a { +.nav_tab> li li > a { color: @theme-color-text-base; } -.nav > li li:hover > a, -.nav > li li:focus > a, -.nav > li li:active > a { +.nav_tab> li li:hover > a, +.nav_tab> li li:focus > a, +.nav_tab> li li:active > a { color: @theme-color-text-focus; } diff --git a/plugins/UserCountryMap/templates/realtimeMap.twig b/plugins/UserCountryMap/templates/realtimeMap.twig index 17933eca58..7642f8e05c 100644 --- a/plugins/UserCountryMap/templates/realtimeMap.twig +++ b/plugins/UserCountryMap/templates/realtimeMap.twig @@ -26,7 +26,7 @@ {% if mapIsStandaloneNotWidget %} function initStandaloneMap() { $('.top_controls').hide(); - $('ul.nav').on('piwikSwitchPage', function (event, item) { + $('.nav').on('piwikSwitchPage', function (event, item) { var clickedMenuIsNotMap = ($(item).text() != "{{ 'UserCountryMap_RealTimeMap'|translate|e('js') }}"); if (clickedMenuIsNotMap) { $('.top_controls').show(); |