feat: Reorganize filter form fields

observations/templates/observations/index.html

@@ -34,36 +34,51 @@
 	</div>
 	<div id="legend"></div>
 </div>
-<form class="form-inline" method="get" action="">
-            <div class="form-group">
-                <input class="form-control" type="date" id="dateFrom" name="from" value="{{from|safe}}"/>
-            </div>
-            -
-            <div class="form-group">
-                <input class="form-control" type="date" id="dateTo" name="to" value="{{to|safe}}"/>
-            </div>
-            <div class="form-group">
-                    <select name="pestId" id="observationPestList" class="form-control chosen-select" data-placeholder="{% trans "Organism" %}">
-                    </select>
-            </div>
-            <div class="form-group">
-                    <select name="cropId" id="observationCropList" class="form-control chosen-select" data-placeholder="{% trans "Crop" %}">	
-                    </select>
-            </div>
-            <div class="form-group">
-                    <select name="cropCategoryId" id="cropCategoryList" style="min-width: 150px;" class="form-control chosen-select" data-placeholder="{% trans "Crop categories" %}">	
-                    </select>
-            </div>
+<form method="get" action="" class="">
+    <div class="row">
+        <!-- Date Range Fields -->
+        <div class="form-group col-sm-3">
+            <label for="dateFrom">{% trans "From" %}</label>
+            <input class="form-control" type="date" id="dateFrom" name="from" value="{{from|safe}}"/>
+        </div>
+        <div class="form-group col-sm-3">
+            <label for="dateTo">{% trans "To" %}</label>
+            <input class="form-control" type="date" id="dateTo" name="to" value="{{to|safe}}"/>
+        </div>
+        <div class="form-group col-sm-6">
             <div class="checkbox">
                 <label>
-                  <input type="checkbox" name="includeNegative"{% if include_negative  %}checked{% endif %} value="true"> {% trans "Include registrations without pest presence" %}
+                    <input type="checkbox" name="includeNegative"{% if include_negative %}checked{% endif %} value="true"> {% trans "Include registrations without pest presence" %}
                 </label>
-              </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="row mt-2">
+        <div class="form-group col-sm-3">
+            <label for="observationPestList">{% trans "Organism" %}</label>
+            <select name="pestId" id="observationPestList" class="form-control chosen-select" data-placeholder="{% trans "Organism" %}">
+            </select>
+        </div>
+        <div class="form-group col-sm-3">
+            <label for="observationCropList">{% trans "Crop" %}</label>
+            <select name="cropId" id="observationCropList" class="form-control chosen-select" data-placeholder="{% trans "Crop" %}">    
+            </select>
+        </div>
+        <div class="form-group col-sm-3">
+            <label for="cropCategoryList">{% trans "Crop categories" %}</label>
+            <select name="cropCategoryId" id="cropCategoryList" class="form-control chosen-select" style="min-width: 150px;" data-placeholder="{% trans "Crop categories" %}">
+            </select>
+        </div>
+        <div class="form-group col-sm-3">
             <button type="submit" class="btn btn-primary">{% trans "Filter" %}</button>
-        </form>
+            <a id="downloadLink" href="">{% trans "Download as Excel" %}</a>
+        </div>
+    </div>
+</form>
+
         <div style="padding: 10px 0px">
             <span id="emptyResult">{% trans "No observations found for specified search criteria" %}</span>
-            <a id="downloadLink" href="">{% trans "Download as Excel" %}</a>
         </div>
         <div class="table-responsive">
             <table class="table table-striped" id="observationTable">