refactored search with free search term support (#1064)

assets/sass/app.scss

@@ -10,6 +10,7 @@
 @import 'error-page';
 @import 'print';
 @import 'content';
+@import 'content-header';
 @import 'toolbar';
 @import 'sidebar';
 @import 'footer';

assets/sass/content-header.scss

@@ -0,0 +1,52 @@
+/*
+ * This file is part of the Kimai time-tracking app.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+.content-header {
+    height: 50px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+    background-color: #fff !important;
+    padding: 10px 0 0 10px;
+
+    h1 {
+        padding-top: 3px;
+        float: left;
+        small {
+            display: none;
+        }
+    }
+}
+
+/* Page based action buttons in the upper right corner of the content area */
+.content-header>.breadcrumb {
+    position: absolute;
+    float: right;
+    background: transparent;
+    top: 0;
+    right: 0;
+    padding-left: 10px;
+}
+
+@media (max-width: $screen-md-min) {
+    .content-header>.breadcrumb {
+        margin-top: 0;
+    }
+}
+
+@media (min-width: $screen-sm-min) {
+    .content-header>.breadcrumb {
+        right: 10px;
+    }
+
+    .content-header {
+        h1 {
+            small {
+                display: inline-block;
+            }
+        }
+    }
+}

assets/sass/content.scss

@@ -8,43 +8,8 @@
 .content {
     padding: 15px 0;
 }
-.content-header {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
-    background-color: #fff !important;
-    padding: 15px 0 15px 10px;
-
-    h1 {
-        small {
-            display: none;
-        }
-    }
-}
-
-.content-header>.breadcrumb {
-    position: relative;
-    margin-top: 5px;
-    top: 0;
-    right: 0;
-    float: none;
-    background: #d2d6de;
-    padding-left: 10px;
-}
 
 @media (min-width: $screen-sm-min) {
-    .content-header>.breadcrumb {
-        right: 10px;
-    }
-}
-
-@media (min-width: $screen-sm-min) {
-    .content-header {
-        h1 {
-            small {
-                display: inline-block;
-            }
-        }
-    }
     .content {
         padding: 15px;
     }

assets/sass/toolbar.scss

@@ -5,13 +5,6 @@
  * file that was distributed with this source code.
  */
 
-/* Page based action buttons in the upper right corner of the content area */
-.content-header > .breadcrumb {
-    position: absolute;
-    float: right;
-    background: transparent;
-}
-
 .toolbar-pad {
     padding: 10px;
 }
@@ -19,6 +12,7 @@
 /* The filter form is available on most pages above the datatable */
 @media (min-width: $screen-sm-min) {
     .toolbar {
+        // @deprecated since 1.2 - using the toolbar is deprecated and will be removed with 2.0
         form.navbar-form {
             font-size: $font-size-base;
             .form-control {
@@ -39,3 +33,58 @@
     }
 }
 
+/* Search form with filter dropdown */
+.content-header {
+    form {
+        width: 200px;
+        float: left;
+        .container-fluid {
+            padding-left: 0;
+            padding-right: 0;
+        }
+        .form-group {
+            margin: 0 0 5px 0;
+        }
+        input.search-has-error {
+            color: $red;
+        }
+        .input-group-addon.has-error {
+            color: $red;
+            border-color: $red;
+        }
+        input.has-error {
+            border-color: $red;
+        }
+        ul.dropdown-menu {
+            max-height: 100vh;
+            overflow-y: auto;
+            padding-top: 10px;
+            width: 500px;
+            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+            max-width: 90vw;
+        }
+        a.search-cancel {
+            margin-top: 8px;
+        }
+    }
+}
+
+@media (max-width: $screen-xs-min) {
+    .content-header.search-open {
+        h1 {
+            display: none;
+        }
+        .breadcrumb {
+            display: none;
+        }
+        form.header-search {
+            padding: 0 10px 0 0;
+            float: none;
+            width: 100%;
+            ul.dropdown-menu {
+                width: 100%;
+                max-width: 100%;
+            }
+        }
+    }
+}