Filter in hidden toolbar - improved mobile #151 (#155)

* improved toolbar: hide data table form in collapsible + filter button
* added collapsible area for toolbar form #151

assets/css/kimai.scss

@@ -81,14 +81,13 @@ li.open .ticktac i.running{
 
 /* ================================ TOOLBAR ================================ */
 
-@media (max-width: $screen-md-min) {
-    .content-header > .breadcrumb {
-        position: absolute;
-        float: right;
-        background: transparent;
-    }
+/* Page based action buttons in the upper right corner of the content area */
+.content-header > .breadcrumb {
+    position: absolute;
+    float: right;
+    background: transparent;
 }
-
+/* Right sidebar with additional tabs for personal settings and "About Kimai" section */
 .control-sidebar {
     select {
         color: #000;
@@ -99,30 +98,10 @@ li.open .ticktac i.running{
         }
     }
 }
-
-.data_table .box-header>.box-tools {
-    top: 3px;
+/* The filter form available on most pages above the datatable */
+.toolbar form {
+    font-size: $font-size-base;
 }
-
-.box-header .box-title.toolbar form {
-    font-size: 13px;
-}
-@media (min-width: $screen-sm-min) {
-    .toolbar form input,
-    .toolbar form select {
-        display: inline-block;
-        width: inherit;
-    }
-}
-
-.toolbar form .form-group {
-    display: inline;
-}
-
-.tools-left {
-    margin-right: 10px;
-}
-
 /* ================================ SIDEBAR ================================ */
 
 /* Used for the Sidebar UserPanel (which is deactivated right now) */

assets/css/vendor.scss

@@ -5,3 +5,4 @@ $fa-font-path: "~font-awesome/fonts";
 @import '~bootstrap-sass/assets/stylesheets/bootstrap';
 @import '~font-awesome/scss/font-awesome';
 @import '~daterangepicker/daterangepicker.css';
+@import '~bootstrap-select/dist/css/bootstrap-select.min.css';

assets/js/app.js

@@ -6,6 +6,11 @@ global.$ = global.jQuery = $;
 require('jquery-ui');
 require('bootstrap-sass');
 require('jquery-slimscroll');
+require('bootstrap-select');
+
+const Moment = require('moment');
+global.moment = Moment;
+require('daterangepicker');
 
 const Moment = require('moment');
 global.moment = Moment;

assets/js/toolbar.js

@@ -6,6 +6,8 @@
  */
 $(document).ready(function () {
 
+    //$('.navbar-form select').selectpicker({});
+
     // DateRange - TODO improve me, so users can type without reloading in between
     $('.toolbar form input').change(function (event) {
         $('.toolbar form').submit();