Fix navigation layout in firefox and chrome

Hover css still broken refs #7736
Icinga · Nov 19, 2014 · 48699ca · 48699ca
1 parent 42a8352
commit 48699ca
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/library/Icinga/Web/Menu/MonitoringMenuItemRenderer.php b/library/Icinga/Web/Menu/MonitoringMenuItemRenderer.php
@@ -81,20 +81,20 @@ public function render(Menu $menu)
         }
         if ($menu->getIcon() && strpos($menu->getIcon(), '.') === false) {
             return sprintf(
-                '<a href="%s" class="icon-%s">%s%s</a>',
+                '%s <a href="%s" class="icon-%s">%s</a>',
+                $badge,
                 $menu->getUrl() ?: '#',
                 $menu->getIcon(),
-                htmlspecialchars($menu->getTitle()),
-                $badge
+                htmlspecialchars($menu->getTitle())
             );
         }
 
         return sprintf(
-            '<a href="%s">%s%s%s</a>',
+            '%s<a href="%s">%s%s<span></span></a>',
+            $badge,
             $menu->getUrl() ?: '#',
             $menu->getIcon() ? '<img src="' . Url::fromPath($menu->getIcon()) . '" class="icon" /> ' : '',
-            htmlspecialchars($menu->getTitle()),
-            $badge
+            htmlspecialchars($menu->getTitle())
         );
     }
 }
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
@@ -204,17 +204,20 @@ li li .badge-container {
   margin-right: 0.75em;
 }
 
-#menu > ul > li.active > a > .badge-container {
+/*
+#layout.hoveredmenu .active > .badge-container {
   display: none;
 }
 
-#layout.hoveredmenu .hover > a > .badge-container {
-  margin-right: 14.15em;
+#layout.hoveredmenu .hover > .badge-container {
+  //margin-right: 14.15em;
+  display: none;
 }
+*/
 
 .badge {
   position: relative;
-  top: -0.1em;
+  top: 0.3em;
   display: inline-block;
   min-width: 1em;
   padding: 3px 7px;
@@ -228,6 +231,31 @@ li li .badge-container {
   background-color: @colorInvalid;
 }
 
+#menu > ul > li.active > .badge-container {
+  display: none;
+}
+
+#menu > ul > li.hover > .badge-container {
+  display: none;
+}
+
+#menu > ul > li.active > ul > li .badge-container {
+  position: relative;
+  top: -0.5em;
+}
+
+#menu > ul > li.hover > ul > li .badge-container {
+  display: inline-block;
+  float: right;
+  position: relative;
+  top: -0.5em;
+}
+
+#menu > ul > li.hover > ul > li  {
+  // prevent floating badges from resizing list items in webkit
+  //max-height: 2em;
+}
+
 li li .badge {
   font-size: 0.975em;
 }