Fixes #4081 Bugfixes on dashboard menu and its LeftMenu style

6 files changed, 60 insertions, 46 deletions

diff --git a/plugins/CoreAdminHome/stylesheets/menu.less b/plugins/CoreAdminHome/stylesheets/menu.less
index 5611c91218..55ee392c1a 100644
--- a/plugins/CoreAdminHome/stylesheets/menu.less
+++ b/plugins/CoreAdminHome/stylesheets/menu.less
@@ -42,6 +42,7 @@
 
 .Menu--admin > .Menu-tabList > li > a,
 .Menu--admin > .Menu-tabList > li > span {
+    text-decoration: none;
     border-bottom: 1px dotted #778;
     display: block;
     padding: 5px 10px;
@@ -49,29 +50,29 @@
     color: #7E7363;
 }
 
-.Menu--admin > .Menu-tabList li a {
+.Menu--admin > .Menu-tabList li li a {
     text-decoration: none;
     padding: 0.6em 0.9em;
     font: 14px Arial, Helvetica, sans-serif;
     display: block;
 }
 
-.Menu--admin > .Menu-tabList li a:link,
-.Menu--admin > .Menu-tabList li a:visited {
+.Menu--admin > .Menu-tabList li li a:link,
+.Menu--admin > .Menu-tabList li li a:visited {
     color: #000;
 }
 
-.Menu--admin > .Menu-tabList li a:hover,
-.Menu--admin > .Menu-tabList li a.active {
+.Menu--admin > .Menu-tabList li li a:hover,
+.Menu--admin > .Menu-tabList li li a.active {
     color: #e87500;
     background: #f1f1f1;
     border-color: #000;
 }
 
-.Menu--admin > .Menu-tabList li a:hover {
+.Menu--admin > .Menu-tabList li li a:hover {
     text-decoration: underline;
 }
 
-.Menu--admin > .Menu-tabList li a.current {
+.Menu--admin > .Menu-tabList li li a.current {
     background: #defdbb;
 }
diff --git a/plugins/CoreHome/javascripts/menu.js b/plugins/CoreHome/javascripts/menu.js
index 77324d7634..168c27c995 100644
--- a/plugins/CoreHome/javascripts/menu.js
+++ b/plugins/CoreHome/javascripts/menu.js
@@ -44,9 +44,6 @@ menu.prototype =
     init: function () {
         this.menuNode = $('.Menu--dashboard');
 
-        //sub LI auto height
-        $('.Menu--dashboard li li a', this.menuNode).each(function () {$(this).css({width: $(this).width() + 30, paddingLeft: 0, paddingRight: 0});});
-
         this.menuNode.find("li:has(ul)").hover(this.overMainLI, this.outMainLI);
 
         // add id to all li menu to support menu identification.
diff --git a/plugins/CoreHome/stylesheets/menu.less b/plugins/CoreHome/stylesheets/menu.less
index abd112831f..f4a28a49a7 100644
--- a/plugins/CoreHome/stylesheets/menu.less
+++ b/plugins/CoreHome/stylesheets/menu.less
@@ -2,20 +2,20 @@
   position: relative;
 }
 
-.Menu-dashboard > .Menu-tabList {
+.Menu--dashboard > .Menu-tabList {
     line-height: 1;
     display: table;      // The nav has the height og his children
     margin-bottom: -1px; // Allow tabs to merge with the submenu
 }
 
-.Menu-dashboard > .Menu-tabList ul {
+.Menu--dashboard > .Menu-tabList ul {
     background: #fff; /*IE6 needs this*/
     float: left;
     position: relative;
 }
 
 /* LEVEL1 NORMAL */
-.Menu-dashboard > .Menu-tabList > li {
+.Menu--dashboard > .Menu-tabList > li {
     background: #f1f1f1;
     float: left;
     list-style: none;
@@ -26,7 +26,7 @@
     border-radius: 4px 4px 0 0;
 }
 
-.Menu-dashboard > .Menu-tabList a {
+.Menu--dashboard > .Menu-tabList a {
     color: #444;
     font-size: 18px;
     display: block;
@@ -38,28 +38,28 @@
 }
 
 /* LEVEL1 HOVER */
-.Menu-dashboard > .Menu-tabList > li:hover,
-.Menu-dashboard > .Menu-tabList > li.sfHover {
+.Menu--dashboard > .Menu-tabList > li:hover,
+.Menu--dashboard > .Menu-tabList > li.sfHover {
     background: #fff;
 }
 
-.Menu-dashboard > .Menu-tabList > li:hover > a,
-.Menu-dashboard > .Menu-tabList > li.sfHover > a,
-.Menu-dashboard > .Menu-tabList > li.sfActive > a,
-.Menu-dashboard > .Menu-tabList a:hover {
+.Menu--dashboard > .Menu-tabList > li:hover > a,
+.Menu--dashboard > .Menu-tabList > li.sfHover > a,
+.Menu--dashboard > .Menu-tabList > li.sfActive > a,
+.Menu--dashboard > .Menu-tabList a:hover {
     color: #e87500;
 }
 
-.Menu-dashboard > .Menu-tabList > li:hover > a {
+.Menu--dashboard > .Menu-tabList > li:hover > a {
     text-decoration: underline;
 }
 
-.Menu-dashboard > .Menu-tabList > li.sfHover > a {
+.Menu--dashboard > .Menu-tabList > li.sfHover > a {
     border-bottom: 1px solid #fff;
 }
 
 /* LEVEL2 NORMAL */
-.Menu-dashboard > .Menu-tabList > li > ul {
+.Menu--dashboard > .Menu-tabList > li > ul {
   padding: 9px 0 5px 0;
   left: 0;
   top: -999em;
@@ -69,14 +69,14 @@
   background: none;
 }
 
-.Menu-dashboard > .Menu-tabList > li li {
+.Menu--dashboard > .Menu-tabList > li li {
     float: left;
     background: none;
     border: 0;
     text-align: center;
 }
 
-.Menu-dashboard > .Menu-tabList > li li > a {
+.Menu--dashboard > .Menu-tabList > li li > a {
     padding: 5px 15px;
     font-size: 14px;
     border: 0;
@@ -89,8 +89,8 @@
 }
 
 /* LEVEL2 HOVER */
-.Menu-dashboard > .Menu-tabList > li.sfHover > ul,
-.Menu-dashboard > .Menu-tabList > li:hover > ul {
+.Menu--dashboard > .Menu-tabList > li.sfHover > ul,
+.Menu--dashboard > .Menu-tabList > li:hover > ul {
   z-index: 1;
   top: 100%;
   opacity: 1;
@@ -100,12 +100,12 @@
   transition: opacity 300ms ease-out 10ms;
 }
 
-.Menu-dashboard > .Menu-tabList > li li:hover > a,
-.Menu-dashboard > .Menu-tabList > li li.sfHover > a {
+.Menu--dashboard > .Menu-tabList > li li:hover > a,
+.Menu--dashboard > .Menu-tabList > li li.sfHover > a {
     color: #e87500;
 }
 
-.Menu-dashboard > .Menu-tabList > li li.sfHover > a {
+.Menu--dashboard > .Menu-tabList > li li.sfHover > a {
     font-weight: bold;
     text-decoration: none !important;
 }
@@ -117,15 +117,15 @@
 }
 
 @media all and (max-width: 749px) {
-  .Menu-dashboard > .Menu-tabList a {
+  .Menu--dashboard > .Menu-tabList a {
     padding-left: 8px;
     padding-right: 8px;
   }
 }
 
 @media all and (max-width: 549px) {
-  .Menu-dashboard > ul.Menu-tabList > li.sfHover > a,
-  .Menu-dashboard > ul.Menu-tabList > li.sfActive.sfHover > a {
+  .Menu--dashboard > ul.Menu-tabList > li.sfHover > a,
+  .Menu--dashboard > ul.Menu-tabList > li.sfActive.sfHover > a {
     border-bottom: 0;
   }
 }
diff --git a/plugins/Dashboard/javascripts/dashboard.js b/plugins/Dashboard/javascripts/dashboard.js
index e2a73be1d3..d56474f6f2 100644
--- a/plugins/Dashboard/javascripts/dashboard.js
+++ b/plugins/Dashboard/javascripts/dashboard.js
@@ -24,7 +24,6 @@ function initDashboard(dashboardId, dashboardLayout) {
     if (!$('#topBars').length) {
         $('#dashboardSettings').css({left: 0});
         $('#dashboardSettings').after($('#Dashboard'));
-        $('#Dashboard').find('> ul li a').each(function () {$(this).css({width: this.offestWidth + 30, paddingLeft: 0, paddingRight: 0});});
         $('#Dashboard_embeddedIndex_' + dashboardId).addClass('sfHover');
     }
 
diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index a91b9ad46a..9a54a0cd57 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -442,7 +442,6 @@
                         dashboardName = dashboards[i].name;
                     }
                 }
-                $('li a', dashboardMenuList).each(function () {$(this).css({width: $(this).width() + 30, paddingLeft: 0, paddingRight: 0});});
                 $('#Dashboard_embeddedIndex_' + dashboardId).addClass('sfHover');
             } else {
                 dashboardMenuList.hide();
diff --git a/plugins/LeftMenu/stylesheets/theme.less b/plugins/LeftMenu/stylesheets/theme.less
index 452610383a..9bee26e694 100644
--- a/plugins/LeftMenu/stylesheets/theme.less
+++ b/plugins/LeftMenu/stylesheets/theme.less
@@ -32,9 +32,13 @@
 }
 
 .Menu--dashboard > .Menu-tabList > li > ul {
+  min-height: 0;
   max-height: 0;
+  padding: 0;
   transition: max-height 1s;
   overflow: hidden;
+  position: static;
+  float: none;
 }
 
 .Menu--dashboard > .Menu-tabList > .sfActive > ul {
@@ -45,6 +49,14 @@
 .Menu--dashboard > .Menu-tabList li {
   list-style: none;
   margin: 0;
+  float: none;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.Menu--dashboard > .Menu-tabList li a:hover {
+  text-decoration: underline;
 }
 
 .Menu--dashboard > .Menu-tabList > li > span,
@@ -53,27 +65,37 @@
   display: block;
   padding: 5px 10px;
   font-size: 18px;
+  line-height: 24px;
   color: #7E7363;
+  text-decoration: none;
+  float: none;
 }
 
-.Menu--dashboard > .Menu-tabList li a {
+.Menu--dashboard > .Menu-tabList li li {
+  float: none;
+  text-align: left;
+}
+
+.Menu--dashboard > .Menu-tabList li li a {
   text-decoration: none;
   padding: 0.6em 0.9em;
   font: 14px Arial, Helvetica, sans-serif;
   display: block;
 }
 
-.Menu--dashboard > .Menu-tabList li a:link,
-.Menu--dashboard > .Menu-tabList li a:visited {
+.Menu--dashboard > .Menu-tabList li li a:link,
+.Menu--dashboard > .Menu-tabList li li a:visited {
   color: #000;
 }
 
-.Menu--dashboard > .Menu-tabList > .sfActive > a {
+.Menu--dashboard > .Menu-tabList > .sfActive > a,
+.Menu--dashboard > .Menu-tabList > li > a:hover {
   background: #f1f1f1;
+  border-bottom: 1px dotted #777788 !important;
 }
 
-.Menu--dashboard > .Menu-tabList li a:hover,
-.Menu--dashboard > .Menu-tabList li a.active {
+.Menu--dashboard > .Menu-tabList li li a:hover,
+.Menu--dashboard > .Menu-tabList li li a.active {
   color: #e87500;
 }
 
@@ -82,11 +104,7 @@
   font-weight: bold;
 }
 
-.Menu--dashboard > .Menu-tabList li a:hover {
-  text-decoration: underline;
-}
-
-.Menu--dashboard > .Menu-tabList li a.current {
+.Menu--dashboard > .Menu-tabList li li a.current {
   background: #defdbb;
 }