Handle tiny screen for main tab navigation

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();