Skip to content
Snippets Groups Projects
Commit cfa7480d authored by Ian Hallworth's avatar Ian Hallworth
Browse files

CSS for filters

parent 84d656e7
No related branches found
No related tags found
1 merge request!99CSS for filters
Pipeline #2994 failed
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 63 additions and 70 deletions
internewshid/hid/templates/hid/tabs/dynamic_filters.html
+ 1
− 1
View file @ cfa7480d
......@@ -9,7 +9,7 @@
<div class="filter-apply filter-clear form-group input-group ">
{% bootstrap_button 'Apply filters' name="button-apply" value="apply" button_class="btn btn-default btn-md" %}
{% bootstrap_button 'Clear filters' name="button-clear" value="clear" button_class="btn btn-default btn-md" %}
{% bootstrap_button 'Reset filters' name="button-clear" value="clear" button_class="btn btn-link" %}
</div>
</div>
</form>
internewshid/hid/templates/hid/tabs/filters/age.html
+ 2
− 4
View file @ cfa7480d
{% if age.items %}
{% load i18n %}
<div class="filter-age form-group input-group">
<div class="select-container">
<label class="col-sm-3 control-label" for="age-selector">{% trans "Age" %}</label>
<select style="width:80px;" id="age-selector" name="age" class="form-control">
<label class="control-label" for="age-selector">{% trans "Age" %}</label>
<select id="age-selector" name="age" class="form-control">
<option value="All Ages" selected="selected">All Ages</option>
{% for age in age.items %}
<option value="{{ age }}">{{ age | title }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
internewshid/hid/templates/hid/tabs/filters/category.html
+ 2
− 4
View file @ cfa7480d
{% if category_options %}
{% load i18n %}
<div class="filter-topic form-group input-group">
<div class="select-container">
<label class="col-sm-3 control-label" for="topic-selector">{% trans "Themes" %}</label>
<select style="width:100px;" id="category-selector" name="category" class="form-control">
<label class="control-label" for="topic-selector">{% trans "Themes" %}</label>
<select id="category-selector" name="category" class="form-control">
<option value=""{% if not request.GET.category %} selected="selected"{% endif %}>{% trans "All Themes" %}</option>
{% for cat in category_options %}
<option value="{{ cat.0 }}"{% if cat.0 == request.GET.category %} selected="selected"{% endif %}>{{ cat.1 | title }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
internewshid/hid/templates/hid/tabs/filters/ennumerator.html
+ 3
− 5
View file @ cfa7480d
{% if ennumerator.items %}
{% load i18n %}
<div class="filter-ennumerator form-group input-group">
<div class="select-container">
<label class="col-sm-3 control-label" for="ennumerator-selector">{% trans "Ennumerator" %}</label>
<select style="width:135px;" id="ennumerator-selector" name="ennumerator" class="form-control">
<option value="All Ennumerators" selected="selected">All Ennumerators</option>
<label class="control-label" for="ennumerator-selector">{% trans "Enumerator" %}</label>
<select id="ennumerator-selector" name="ennumerator" class="form-control">
<option value="All Ennumerators" selected="selected">All Enumerators</option>
{% for ennumerator in ennumerator.items %}
<option value="{{ ennumerator }}">{{ ennumerator | title }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
internewshid/hid/templates/hid/tabs/filters/gender.html
+ 2
− 4
View file @ cfa7480d
{% if gender.items %}
{% load i18n %}
<div class="filter-gender form-group input-group">
<div class="select-container">
<label class="col-sm-3 control-label" for="gender-selector">{% trans "Gender" %}</label>
<select style="width:100px;" id="gender-selector" name="gender" class="form-control">
<label class="control-label" for="gender-selector">{% trans "Gender" %}</label>
<select id="gender-selector" name="gender" class="form-control">
<option value="All Genders" selected="selected">All Genders</option>
{% for gender in gender.items %}
<option value="{{ gender }}">{{ gender | title }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
internewshid/hid/templates/hid/tabs/filters/location.html
+ 2
− 4
View file @ cfa7480d
{% if locations.items %}
{% load i18n %}
<div class="filter-location form-group input-group">
<div class="select-container">
<label class="col-sm-3 control-label" for="location-selector">{% trans "Location" %}</label>
<select style="width:110px;" id="location-selector" name="location" class="form-control">
<label class="control-label" for="location-selector">{% trans "Location" %}</label>
<select id="location-selector" name="location" class="form-control">
<option value="All Locations" selected="selected">All Locations</option>
{% for location in locations.items %}
<option value="{{ location }}">{{ location | title }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
internewshid/hid/templates/hid/tabs/filters/source.html
+ 7
− 9
View file @ cfa7480d
{% if source_filters.items %}
{% load i18n %}
<div class="filter-source form-group input-group">
<div class="select-container">
<label class="col-sm-3 control-label" for="source-selector">{% trans "Source" %}</label>
<select style="width:100px;" id="source-selector" name="source" class="form-control">
<option value="All Sources" selected="selected">All Sources</option>
{% for source in source_filters.items %}
<option value="{{ source }}">{{ source | title }}</option>
{% endfor %}
</select>
</div>
<label class="control-label" for="source-selector">{% trans "Source" %}</label>
<select id="source-selector" name="source" class="form-control">
<option value="All Sources" selected="selected">All Sources</option>
{% for source in source_filters.items %}
<option value="{{ source }}">{{ source | title }}</option>
{% endfor %}
</select>
</div>
{% endif %}
internewshid/hid/templates/hid/tabs/filters/tags.html
+ 2
− 4
View file @ cfa7480d
{% load i18n %}
<div class="filter-tags form-group input-group">
<div class="text-container">
<label class="col-sm-3 control-label" for="tags-selector">{% trans "Tags" %}</label>
<input style="width:100px;" type="text" placeholder="All Tags" name="tags">
</div>
<label class="control-label" for="tags-selector">{% trans "Tags" %}</label>
<input type="text" placeholder="All Tags" name="tags" class="form-control">
</div>
internewshid/hid/templates/hid/tabs/filters/time_range.html
+ 3
− 3
View file @ cfa7480d
{% load i18n %}
<div class="filter-dates form-group input-group input-daterange">
<label>Dates</label>
<input style="width:140px;" type="date" value="{{ filters.start_time }}" class="form-control" name="start_time">
<input style="width:140px;" type="date" value="{{ filters.end_time }}" class="form-control" name="end_time">
<label class="control-label">Dates</label>
<input type="date" value="{{ filters.start_time }}" class="form-control" name="start_time">
<input type="date" value="{{ filters.end_time }}" class="form-control" name="end_time">
</div>
internewshid/media/less/internews.less
+ 1
− 0
View file @ cfa7480d
......@@ -102,6 +102,7 @@ ul.nav.nav-pills:after{
font-size: @font-size-medium;
}
.dropdown-menu {
z-index: 10;
& > li > a:hover,
& > li > a:focus {
......
internewshid/media/less/view-edit.less
+ 38
− 32
View file @ cfa7480d
......@@ -5,14 +5,15 @@
background-color: #fff;
display: flex;
align-items: center;
padding: 1em 0 0 2%;
padding: .5rem 1rem 0;
[class^="filter-"]{
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-right: solid 1px @gray-lighter;
padding-right: 0.1%;
margin-right: 0.1%;
padding-right: 0.5%;
margin-right: 1%;
align-items: baseline;
......@@ -20,27 +21,41 @@
font-size: @font-size-small;
font-weight: bold;
text-transform: uppercase;
margin-right: 8%;
margin:0 1% 0 0;
padding: 0 0 .5rem 1rem;
}
// input & selects
.form-control{
border-radius: 8px!important;
border: solid 1px @gray-light;
float: none;
font-size: @font-size-small;
padding: .1rem 1rem;
padding: .1rem .5rem;
color: @brand-primary;
height: 3rem;
width: auto;
}
// add space between when two or more input boxes are adjacent
.form-control + .form-control{ margin-left: 0.5%; }
.form-control + .form-control{ margin-left: 1.5%; flex-wrap: nowrap}
// Apply and cancel buttons
&:last-child{
border-right: none;
flex-wrap: nowrap;
padding-right: 0;
margin: 0;
}
}
.filter-apply{
button{
.filter-dates {
label{flex-basis: 100%;}
> input[type=date] {
line-height:inherit;
flex-basis: 48%;
}
}
.filter-apply{
button[name="button-apply"]{
background-color: @brand-primary;
color: #fff;
line-height: 1.8;
......@@ -48,28 +63,14 @@
border-radius: @border-radius-large;
border: solid 1px @brand-primary;
white-space: nowrap;
}
button[name="button-clear"]{
font-size: smaller;
}
}
}
.filter-clear {
button {
margin-right: 10px;
}
}
.filter-location{
label{
margin-right: 20% !important;
}
}
.filter-dates {
> input[type=date] {
line-height:inherit;
}
}
@media(max-width:@screen-sm){
[class^="filter-"]{
......@@ -80,6 +81,7 @@
table,
.table {
table-layout: fixed;
background-color:white;
......@@ -104,9 +106,12 @@ table,
}
.table-no-border > thead > tr > th, .table > tbody > tr > th,
.table-no-border > tfoot > tr > th, .table > thead > tr > td,
.table-no-border > tbody > tr > td, .table > tfoot > tr > td {
.table-no-border > thead > tr > th,
.table > tbody > tr > th,
.table-no-border > tfoot > tr > th,
.table > thead > tr > td,
.table-no-border > tbody > tr > td,
.table > tfoot > tr > td {
border:none;
}
......@@ -118,6 +123,9 @@ thead{
background-color: @brand-secondary;
text-transform: uppercase;
font-size: small;
> tr > th{
border-bottom: 0!important;
}
th.orderable {
.asc, .desc{
background-color: @brand-primary;
......@@ -139,7 +147,6 @@ thead{
&.asc a:after{
content: '\f0aa';
}
}
}
......@@ -150,7 +157,6 @@ tbody {
.table-striped > tbody > tr.selected.odd,
.table-striped > tbody > tr.selected.even{
background-color: #e3edf8;
// border: solid 1px @brand-secondary;
transition: background-color 0.25s ease;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Webarchitects | Forum | Status | SSH Fingerprints