updated filters

resources/views/app/mcp/appointments_filters.blade.php

@@ -6,7 +6,7 @@
 	#mcp-appointments-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container{
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
@@ -17,12 +17,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-appointments-filters" method="GET" action="{{ route('mcp.appointments') }}" class="filter-container" v-cloak>
 	   <!-- DATE -->
@@ -37,12 +31,12 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="filter-child-container mt-2">
+			<div v-show="filters.date_category" class="mt-2">
 				<div>
-					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
+					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm"/>
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
-					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="mt-2">
+					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm"/>
 				</div>
 			</div>
 		</div>
@@ -65,8 +59,8 @@
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.appointments')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.appointments')}}')" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/bills_filters.blade.php

@@ -6,7 +6,7 @@
 	#mcp-bills-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container {
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
@@ -17,12 +17,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-bills-filters" method="GET" action="{{ route('mcp.bills') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
@@ -37,12 +31,12 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="filter-child-container mt-2">
+			<div v-show="filters.date_category" class="mt-2">
 				<div>
-					<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
+					<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm"/>
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
-					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="mt-2">
+					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm"/>
 				</div>
 			</div>
 		</div>
@@ -63,8 +57,8 @@
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.bills')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.bills')}}')" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/client_messages_filters.blade.php

@@ -6,7 +6,7 @@
 	#mcp-client-messages-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container {
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
@@ -17,12 +17,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-client-messages-filters" method="GET" action="{{ route('mcp.client_messages') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
@@ -37,12 +31,12 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="filter-child-container mt-2">
+			<div v-show="filters.date_category" class="mt-2">
 				<div>
-					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
+					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm"/>
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
-					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="mt-2">
+					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm"/>
 				</div>
 			</div>
 		</div>
@@ -73,8 +67,8 @@
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a v-on:click.prevent="fastLoad('{{route('mcp.client_messages')}}')" href="#" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a v-on:click.prevent="fastLoad('{{route('mcp.client_messages')}}')" href="#" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/erx_and_orders_filters.blade.php

@@ -6,7 +6,7 @@
 	#mcp-erx-and-orders-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container {
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
@@ -17,12 +17,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-erx-and-orders-filters" method="GET" action="{{ route('mcp.notes') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
@@ -37,12 +31,12 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="filter-child-container mt-2">
+			<div v-show="filters.date_category" class="mt-2">
 				<div>
-					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
+					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm"/>
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
-					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="mt-2">
+					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm"/>
 				</div>
 			</div>
 		</div>
@@ -66,8 +60,8 @@
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.erx_and_orders')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.erx_and_orders')}}')" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/notes_filters.blade.php

@@ -6,7 +6,7 @@
 	#mcp-notes-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container{
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
@@ -17,12 +17,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-notes-filters" method="GET" action="{{ route('mcp.notes') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
@@ -39,10 +33,10 @@
 			</select>
 			<div v-show="filters.date_category" class="filter-child-container mt-2">
 				<div>
-					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
+					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm"/>
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
-					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="mt-2">
+					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm"/>
 				</div>
 			</div>
 		</div>
@@ -63,8 +57,8 @@
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit"  v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.notes')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="submit"  v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.notes')}}')" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/patients_filters.blade.php

@@ -6,7 +6,7 @@
 	#mcp-patients-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container{
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
@@ -17,12 +17,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-patients-filters" method="GET" action="{{ route('mcp.patients') }}" class="filter-container" v-cloak>
 	<div>
@@ -43,11 +37,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.age_category" class="filter-child-container mt-2">
+			<div v-show="filters.age_category" class="mt-2">
 				<div>
 					<input  name="age_value_1" v-model="filters.age_value_1" type="number" class="form-control input-sm" :placeholder="(filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN') ? 'From' : 'Age'" />
 				</div>
-				<div v-show="filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN'">
+				<div v-show="filters.age_category === 'BETWEEN' || filters.age_category === 'NOT_BETWEEN'" class="mt-2">
 					<input name="age_value_2" v-model="filters.age_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -76,11 +70,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.bmi_category" class="filter-child-container mt-2">
+			<div v-show="filters.bmi_category" class="mt-2">
 				<div>
 					<input  name="bmi_value_1" v-model="filters.bmi_value_1" type="number" class="form-control input-sm" :placeholder="(filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
 				</div>
-				<div v-show="filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN'">
+				<div v-show="filters.bmi_category === 'BETWEEN' || filters.bmi_category === 'NOT_BETWEEN'" class="mt-2">
 					<input name="bmi_value_2" v-model="filters.bmi_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -99,11 +93,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.last_visit_category" class="filter-child-container mt-2">
+			<div v-show="filters.last_visit_category" class="mt-2">
 				<div>
-					<input  name="last_visit_value_1" v-model="filters.last_visit_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
+					<input  name="last_visit_value_1" v-model="filters.last_visit_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN') ? 'From' : 'Last Visit'" />
 				</div>
-				<div v-show="filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN'">
+				<div v-show="filters.last_visit_category === 'BETWEEN' || filters.last_visit_category === 'NOT_BETWEEN'" class="mt-2">
 					<input name="last_visit_value_2" v-model="filters.last_visit_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -122,11 +116,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.next_appointment_category" class="filter-child-container mt-2">
+			<div v-show="filters.next_appointment_category" class="mt-2">
 				<div>
-					<input  name="next_appointment_value_1" v-model="filters.next_appointment_value_1" type="number" class="form-control input-sm" :placeholder="(filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
+					<input  name="next_appointment_value_1" v-model="filters.next_appointment_value_1" type="number" class="form-control input-sm" :placeholder="(filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN') ? 'From' : 'Next Appt.'" />
 				</div>
-				<div v-show="filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN'">
+				<div v-show="filters.next_appointment_category === 'BETWEEN' || filters.next_appointment_category === 'NOT_BETWEEN'" class="mt-2">
 					<input name="next_appointment_value_2" v-model="filters.next_appointment_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
@@ -147,7 +141,7 @@
 	</div>
 
 	<!-- LAST WEIGHED-IN -->
-	<div class="col-md-2 d-none">
+	<!-- <div class="col-md-2 d-none">
 		<div class="form-group">
 			<label>Last Weighed-In:</label>
 			<select name="last_weighed_in_category" class="form-control input-sm" v-model="filters.last_weighed_in_category">
@@ -158,19 +152,19 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.last_weighed_in_category" class="filter-child-container mt-2">
+			<div v-show="filters.last_weighed_in_category" class="mt-2">
 				<div>
-					<input  name="last_weighed_in_value_1" v-model="filters.last_weighed_in_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
+					<input  name="last_weighed_in_value_1" v-model="filters.last_weighed_in_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN') ? 'From' : 'Last Weighed'" />
 				</div>
-				<div v-show="filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN'">
+				<div v-show="filters.last_weighed_in_category === 'BETWEEN' || filters.last_weighed_in_category === 'NOT_BETWEEN'" class="mt-2">
 					<input name="last_weighed_in_value_2" v-model="filters.last_weighed_in_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
-	</div>
+	</div> -->
 
 	<!-- LAST BP -->
-	<div class="col-md-2 d-none">
+	<!-- <div class="col-md-2 d-none">
 		<div class="form-group">
 			<label>Last BP:</label>
 			<select name="last_bp_category" class="form-control input-sm" v-model="filters.last_bp_category">
@@ -181,23 +175,23 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.last_bp_category" class="filter-child-container mt-2">
+			<div v-show="filters.last_bp_category" class="mt-2">
 				<div>
-					<input  name="last_bp_value_1" v-model="filters.last_bp_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN') ? 'From' : 'BMI'" />
+					<input  name="last_bp_value_1" v-model="filters.last_bp_value_1" type="number" class="form-control input-sm" :placeholder="(filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN') ? 'From' : 'Last BP'" />
 				</div>
-				<div v-show="filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN'">
+				<div v-show="filters.last_bp_category === 'BETWEEN' || filters.last_bp_category === 'NOT_BETWEEN'" class="mt-2">
 					<input name="last_bp_value_2" v-model="filters.last_bp_value_2" type="number" class="form-control input-sm" placeholder="To" />
 				</div>
 			</div>
 		</div>
-	</div>
+	</div> -->
 
 	<div>
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class=" d-flex">
-				<button type="button" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.patients')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="button" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.patients')}}')" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/reports_filters.blade.php

@@ -6,7 +6,7 @@
 	#mcp-reports-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container{
 		display: flex;
 		align-items: flex-start;
 		flex-wrap: wrap;
@@ -17,12 +17,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-reports-filters" method="GET" action="{{ route('mcp.reports') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
@@ -37,12 +31,12 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="filter-child-container mt-2">
+			<div v-show="filters.date_category" class="mt-2">
 				<div>
-					<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
+					<input name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm"/>
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
-					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="mt-2">
+					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm"/>
 				</div>
 			</div>
 		</div>
@@ -63,8 +57,8 @@
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.reports')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.reports')}}')" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>

resources/views/app/mcp/supply_orders_filters.blade.php

@@ -6,10 +6,9 @@
 	#mcp-supply-orders-filters .mw-100px {
 		min-width: 100px;
 	}
-	.filter-container, .filter-child-container {
+	.filter-container {
 		display: flex;
 		align-items: flex-start;
-		flex-wrap: wrap;
 	}
 	.filter-container >div {
 		width: 180px;
@@ -17,12 +16,6 @@
 	.filter-container >div:not(:last-child) {
 		margin-right: 20px;
 	}
-	.filter-child-container >div {
-		width: 85px;
-	}
-	.filter-child-container >div:not(:last-child) {
-		margin-right: 10px;
-	}
 </style>
 <form id="mcp-supply-orders-filters" method="GET" action="{{ route('mcp.supply_orders') }}" class="filter-container" v-cloak>
 	<!-- DATE	 -->
@@ -39,10 +32,10 @@
 			</select>
 			<div v-show="filters.date_category" class="filter-child-container mt-2">
 				<div>
-					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm" :placeholder="(filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN') ? 'From' : 'Date'" />
+					<input  name="date_value_1" v-model="filters.date_value_1" type="date" class="form-control input-sm"/>
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'">
-					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm" placeholder="To" />
+				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="mt-2">
+					<input name="date_value_2" v-model="filters.date_value_2" type="date" class="form-control input-sm"/>
 				</div>
 			</div>
 		</div>
@@ -76,8 +69,8 @@
 		<div class="form-group">
 			<label>&nbsp;</label>
 			<div class="d-flex">
-				<button type="submit" v-on:click.prevent="doSubmit()" class="w-50 btn btn-primary btn-sm mr-2">Apply</button>
-				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.supply_orders')}}')" class="w-50 btn btn-danger btn-sm text-white">Clear</a>
+				<button type="submit" v-on:click.prevent="doSubmit()" class="btn btn-primary btn-sm mr-2"><i class="fas fa-filter"></i></button>
+				<a href="#" v-on:click.prevent="fastLoad('{{route('mcp.supply_orders')}}')" class="btn btn-danger btn-sm text-white">Clear Filters</a>
 			</div>
 		</div>
 	</div>