UI responsiveness updates and adjustments

resources/assets/js/components/search/SearchFilter.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="sm:flex w-1/3">
+	<div class="flex w-full">
 		<div class="flex w-full rounded-md">
 			<simple-typeahead
 				ref="keyInput"
@@ -19,10 +19,10 @@
 				<option value="lte">{{ $t( 'is lte' ) }}</option>
 			</select>
 			<input type="text" v-model="filter.value" class="h-10 text-gray-700 border-none p-2 text-xs block w-1/2 rounded-l-none rounded-r-md ml-0 focus:border-gray-300 focus:ring-gray-300" placeholder="Value" @keydown.enter="$emit( 'applyFilter', this.filter )" />
+			<a @click="$emit( 'removeFilter' )" class="float-right block ml-2" v-tooltip="$t( 'Remove Filter' )">
+				<fa-icon class="text-red-600 h-9 text-xs" icon="circle-xmark" fixed-width />
+			</a>
 		</div>
-		<a @click="$emit( 'removeFilter' )" class="float-right block ml-2" v-tooltip="$t( 'Remove Filter' )">
-			<fa-icon class="text-red-600 h-9 text-xs" icon="circle-xmark" fixed-width />
-		</a>
 	</div>
 </template>
 <script>

resources/assets/js/components/search/SearchForm.vue

@@ -27,9 +27,11 @@
 			</h4>
 			<search-params :searchFilters="searchParams" @apply-filter="updateParams" @apply-term="updateTerms"></search-params>
 			<div ref="active-filters" class="search-filters mt-2">
-				<div class="w-full relative">
+				<div class="w-full grid grid-cols-1 xl:grid-cols-2">
 					<SearchFilter v-for="( filter, index ) in availableTerms" :key="index" :filter="searchParams.terms[index]" :indexFields="indexFields" @removeFilter="removeFilter( index )"/>
 				</div>
+			</div>
+			<div class="mt-4 w-full">
 				<button class="bg-cyan-500 hover:bg-cyan-600 text-white text-xs font-bold py-1 px-3 rounded float-right" @click="$emit( 'onSearchUpdate', searchParams )">{{ $t( "Apply Filters" ) }}</button>
 			</div>
 		</div>

resources/assets/js/components/search/SearchParams.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="entry-search-filters grid grid-cols-4">
+	<div class="entry-search-filters grid xl:grid-cols-4 md:grid-cols-2 sm:grid-cols-1">
 		<div class="my-1">
 			<div class="px-3 py-2">
 				<label class="text-gray-400 text-xs uppercase leading-5">{{ $t( "Date Range" ) }}:</label>
@@ -10,7 +10,7 @@
 			</div>
 		</div>
 
-		<div class="my-1 pl-5">
+		<div class="my-1">
 			<div class="px-3 py-2">
 				<label class="text-gray-400 text-xs uppercase leading-5">{{ $t( "Application" ) }}:</label>
 				<select
@@ -26,7 +26,7 @@
 			</div>
 		</div>
 
-		<div class="my-1 pl-5">
+		<div class="my-1">
 			<div class="px-3 py-2">
 				<label class="text-gray-400 text-xs uppercase leading-5">{{ $t( "Environment" ) }}:</label>
 				<select
@@ -42,7 +42,7 @@
 			</div>
 		</div>
 
-		<div class="my-1 pl-5" >
+		<div class="my-1" >
 			<div class="px-3 py-2">
 				<label class="text-gray-400 text-xs uppercase leading-5">{{ $t( "Log Level" ) }}:</label>
 				<select

resources/assets/js/layouts/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<Header v-on:toggle-sidebar="sidebarIsOpen = !sidebarIsOpen" />
+		<Header v-on:toggle-sidebar="sidebarIsOpen = !sidebarIsOpen" :sidebarOpen="sidebarIsOpen" />
 		<div class="flex h-screen bg-gray-200 font-roboto">
 			<Sidebar :isOpen="sidebarIsOpen" />
 
@@ -17,8 +17,8 @@
 	</div>
 </template>
 <script>
-import Sidebar from "./inc/Sidebar.vue";
 import Header from "./inc/Header.vue";
+import Sidebar from "./inc/Sidebar.vue";
 
 export default {
 	components: {

resources/assets/js/layouts/inc/Header.vue

@@ -1,12 +1,12 @@
 <template>
   <header
-    class="flex justify-between items-center py-5 px-6 bg-gray-100 border-b-2 border-gray-800"
+    class="flex justify-between items-start py-5 px-6 bg-gray-100 border-b-2 border-gray-800"
   >
 	<div class="flex items-center">
-		<div class="flex items-center justify-center bg-gray-100">
-			<div class="flex items-center">
+		<div class="flex items-start justify-center bg-gray-100">
+			<div class="flex items-start">
 				<router-link :to="{ name : 'Dashboard'}" class="hover:cursor-pointer">
-					<img :src="`${baseHref}/includes/images/stachebox-logo-h.png`" style="width:200px"/>
+					<img :src="sidebarOpen ? `${baseHref}/includes/images/stachebox-logo-h.png` : `${baseHref}/includes/images/stachebox-logo.png`" :style="sidebarOpen ? `width:200px` : `width: 75px`"/>
 				</router-link>
 			</div>
 		</div>
@@ -20,11 +20,11 @@
 			</button>
 		</div>
 	</div>
-    <div class="flex items-center w-2/3">
+    <div class="flex items-start w-2/3">
 		<search-form :initialParams="searchFilters" @onSearchUpdate="sendToSearchPage" />
     </div>
 
-    <div class="flex items-center" v-if="internalSecurityEnabled">
+    <div class="flex items-start" v-if="internalSecurityEnabled">
 
       <div class="relative" v-if="user">
         <button
@@ -77,6 +77,12 @@ export default {
 	components : {
 		SearchForm
 	},
+	props: {
+		sidebarOpen : {
+			type : Boolean,
+			default : false
+		}
+	},
 	data(){
 		return {
 			dropdownOpen : false,

resources/assets/js/layouts/inc/Sidebar.vue

@@ -4,7 +4,7 @@
       :class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
       class="fixed z-30 inset-y-0 left-0 transition duration-300 transform bg-gray-800 overflow-y-auto overflow-x-auto lg:translate-x-0 lg:static lg:inset-0"
     >
-      <nav class="mt-10">
+      <nav class="mt-10 text-sm">
 		<h2
 			class="flex items-center duration-200 mt-2 py-2 px-4 border-l-4"
 			:class="[$route.name === 'Dashboard' ? activeClass : inactiveClass]"

resources/assets/js/views/Dashboard.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mt-4" v-if="aggregations">
+    <div class="mt-4 sm:hidden" v-if="aggregations">
       <div class="flex flex-wrap -mx-6">
         <div class="w-full px-6 sm:w-1/2 xl:w-1/3">
           <div
@@ -76,8 +76,8 @@
 </template>
 
 <script>
-import ApplicationSnapshot from "./ApplicationSnapshot";
 import { mapGetters, mapState } from "vuex";
+import ApplicationSnapshot from "./ApplicationSnapshot";
 export default {
   components : {
 	  ApplicationSnapshot