knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#427] Fixed styles in filters widget.

Browse Source
This commit is contained in:
Sol Villar 2015-03-05 03:31:37 -03:00
parent b1655fcc71
commit ec421103ec
2 changed files with 71 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
css/multiview.css
View File

@ -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 {

42
src/widget.filtereditor.js
View File

@ -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> \
</fieldset> \
</div> \
<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> \
<input type="text" value="{{from}}" name="from" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
<label class="control-label" for="">To</label> \
<input type="text" value="{{to}}" name="to" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
<div class="form-group"> \
<label class="control-label" for="">From</label> \
<input class="input-sm" type="text" value="{{from}}" name="from" 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> \
<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="">Latitude</label> \
<input type="text" value="{{point.lat}}" name="lat" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
<label class="control-label" for="">Distance (km)</label> \
<input type="text" value="{{distance}}" name="distance" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
<div class="form-group"> \
<label class="control-label" for="">Longitude</label> \
<input class="input-sm" type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
</div> \
<div class="form-group"> \
<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> \
'