minor

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

@@ -6,8 +6,25 @@
 	#mcp-appointments-filters .mw-100px {
 		min-width: 100px;
 	}
+	.filter-container, .filter-child-container {
+		display: flex;
+		align-items: flex-start;
+		flex-wrap: wrap;
+	}
+	.filter-container >div {
+		width: 180px;
+	}
+	.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="row align-items-start" v-cloak>
+<form id="mcp-appointments-filters" method="GET" action="{{ route('mcp.appointments') }}" class="filter-container" v-cloak>
 	   <!-- DATE -->
 	<div class="">
 		<div class="form-group">
@@ -20,11 +37,11 @@
 				<option value="BETWEEN">Between</option>
 				<option value="NOT_BETWEEN">Not Between</option>
 			</select>
-			<div v-show="filters.date_category" class="row mt-2">
-				<div :class="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN' ? 'col-md-6' : 'col-md-12'">
+			<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'" />
 				</div>
-				<div v-show="filters.date_category === 'BETWEEN' || filters.date_category === 'NOT_BETWEEN'" class="col-md-6">
+				<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>
 			</div>