FilterEditor: Fix css

library/Icinga/Web/Widget/FilterEditor.php

@@ -649,7 +649,7 @@ class FilterEditor extends AbstractWidget
 
     public function renderSearch()
     {
-        $html = ' <form method="post" class="inline dontprint" action="'
+        $html = ' <form method="post" class="search inline dontprint" action="'
               . $this->preservedUrl()
               . '"><input type="text" name="q" style="width: 8em" class="search" value="" placeholder="'
               . t('Search...')
@@ -678,20 +678,22 @@ class FilterEditor extends AbstractWidget
     public function render()
     {
         if (! $this->preservedUrl()->getParam('modifyFilter')) {
-            return $this->renderSearch() . $this->shorten($this->filter, 50);
+            return '<div class="filter">' . $this->renderSearch() . $this->shorten($this->filter, 50) . '</div>';
         }
-        return  $this->renderSearch()
-              . '<form action="'
-              . Url::fromRequest()
-              . '" class="filterEditor" method="POST">'
-              . '<ul class="tree widgetFilter"><li>'
-              . $this->renderFilter($this->filter)
-              . '</li></ul>'
-              . '<div style="float: right">'
-              . '<input type="submit" name="submit" value="Apply" />'
-              . '<input type="submit" name="cancel" value="Cancel" />'
-              . '</div>'
-              . '</form>';
+        return  '<div class="filter">'
+            . $this->renderSearch()
+            . '<form action="'
+            . Url::fromRequest()
+            . '" class="editor" method="POST">'
+            . '<ul class="tree"><li>'
+            . $this->renderFilter($this->filter)
+            . '</li></ul>'
+            . '<div class="buttons">'
+            . '<input type="submit" name="submit" value="Apply" />'
+            . '<input type="submit" name="cancel" value="Cancel" />'
+            . '</div>'
+            . '</form>'
+            . '</div>';
     }
 
     protected function shorten($string, $length)

public/css/icinga/widgets.less

@@ -48,8 +48,22 @@ table.multiselect tr[href] td {
   -ms-user-select: none;
 }
 
-#main form.filterEditor input[type=text], #main form.filterEditor select {
-    width: 12em;
+#main div.filter {
+  margin-top: 1em;
+
+  form.editor {
+    input[type=text], select {
+      width: 12em;
+    }
+
+    ul.tree li.active {
+      background-color: #eee;
+    }
+
+    div.buttons {
+      float: right;
+    }
+  }
 }
 
 ul.datafilter li {
@@ -281,10 +295,6 @@ li li .badge {
   background-color: @colorUnknown;
 }
 
-.widgetFilter li.active {
-    background-color: #eee;
-}
-
 .sparkline-box {
   position: relative;
   top: -3px;