[#427] Fixed styles in filters widget.

css/multiview.css

@@ -160,6 +160,31 @@
   display: none;
 }
 
+.recline-filter-editor .filters {
+  margin: 20px 0px;
+}
+
+.recline-filter-editor h3 {
+  margin-top: 4px;
+}
+
+.recline-filter-editor .filter {
+  margin-top: 20px;
+}
+
+.recline-filter-editor .filter .form-group {
+  margin-bottom: 0px;
+}
+
+.recline-filter-editor .filter input,
+.recline-filter-editor .filter label {
+  margin: 0px;
+}
+
+.recline-filter-editor .js-edit button {
+  margin: 25px 0px 0px 0px;
+}
+
 .recline-filter-editor .filter-term a {
   font-size: 18px;
 }
@@ -170,8 +195,27 @@
   width: 175px;
 }
 
+.recline-filter-editor select {
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+}
+
 .recline-filter-editor input {
   margin-top: 0.5em;
+  margin-bottom: 10px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;  
+  border: 1px solid #cccccc;  
+}
+
+.recline-filter-editor label {
+  font-weight: normal;
+  display: block;
+}
+
+.recline-filter-editor legend {
+  margin-bottom: 5px;
 }
 
 .recline-filter-editor .add-filter {

src/widget.filtereditor.js

@@ -13,28 +13,30 @@ my.FilterEditor = Backbone.View.extend({
       <h3>Filters</h3> \
       <a href="#" class="js-add-filter">Add filter</a> \
       <form class="form-stacked js-add" style="display: none;"> \
-        <fieldset> \
+        <div class="form-group"> \
           <label>Field</label> \
           <select class="fields"> \
             {{#fields}} \
             <option value="{{id}}">{{label}}</option> \
             {{/fields}} \
           </select> \
+        </div> \
+        <div class="form-group"> \
           <label>Filter type</label> \
           <select class="filterType"> \
             <option value="term">Value</option> \
             <option value="range">Range</option> \
             <option value="geo_distance">Geo distance</option> \
           </select> \
-          <button type="submit" class="btn">Add</button> \
+        </div> \
-        </fieldset> \
+        <button type="submit" class="btn btn-default">Add</button> \
       </form> \
       <form class="form-stacked js-edit"> \
         {{#filters}} \
           {{{filterRender}}} \
         {{/filters}} \
         {{#filters.length}} \
-        <button type="submit" class="btn">Update</button> \
+        <button type="submit" class="btn btn-default">Update</button> \
         {{/filters.length}} \
       </form> \
     </div> \
@@ -47,7 +49,7 @@ my.FilterEditor = Backbone.View.extend({
             {{field}} <small>{{type}}</small> \
             <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
           </legend> \
-          <input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          <input class="input-sm" type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
         </fieldset> \
       </div> \
     ',
@@ -58,10 +60,14 @@ my.FilterEditor = Backbone.View.extend({
             {{field}} <small>{{type}}</small> \
             <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
           </legend> \
-          <label class="control-label" for="">From</label> \
+          <div class="form-group"> \
-          <input type="text" value="{{from}}" name="from" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+            <label class="control-label" for="">From</label> \
-          <label class="control-label" for="">To</label> \
+            <input class="input-sm" type="text" value="{{from}}" name="from" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-          <input type="text" value="{{to}}" name="to" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
+          <div class="form-group"> \
+            <label class="control-label" for="">To</label> \
+            <input class="input-sm" type="text" value="{{to}}" name="to" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
         </fieldset> \
       </div> \
     ',
@@ -72,12 +78,18 @@ my.FilterEditor = Backbone.View.extend({
             {{field}} <small>{{type}}</small> \
             <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
           </legend> \
-          <label class="control-label" for="">Longitude</label> \
+          <div class="form-group"> \
-          <input type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+            <label class="control-label" for="">Longitude</label> \
-          <label class="control-label" for="">Latitude</label> \
+            <input class="input-sm" type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
-          <input type="text" value="{{point.lat}}" name="lat" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
-          <label class="control-label" for="">Distance (km)</label> \
+          <div class="form-group"> \
-          <input type="text" value="{{distance}}" name="distance" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+            <label class="control-label" for="">Latitude</label> \
+            <input class="input-sm" type="text" value="{{point.lat}}" name="lat" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
+          <div class="form-group"> \
+            <label class="control-label" for="">Distance (km)</label> \
+            <input class="input-sm" type="text" value="{{distance}}" name="distance" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
+          </div> \
         </fieldset> \
       </div> \
     '