From cfa7480da7cab39277856ef4f3cedaeb44cdbcb4 Mon Sep 17 00:00:00 2001
From: Ian Hallworth <ianh@aptivate.org>
Date: Wed, 5 Dec 2018 18:21:36 +0000
Subject: [PATCH] CSS for filters
---
.../templates/hid/tabs/dynamic_filters.html | 2 +-
.../hid/templates/hid/tabs/filters/age.html | 6 +-
.../templates/hid/tabs/filters/category.html | 6 +-
.../hid/tabs/filters/ennumerator.html | 8 +--
.../templates/hid/tabs/filters/gender.html | 6 +-
.../templates/hid/tabs/filters/location.html | 6 +-
.../templates/hid/tabs/filters/source.html | 16 ++---
.../hid/templates/hid/tabs/filters/tags.html | 6 +-
.../hid/tabs/filters/time_range.html | 6 +-
internewshid/media/less/internews.less | 1 +
internewshid/media/less/view-edit.less | 70 ++++++++++---------
11 files changed, 63 insertions(+), 70 deletions(-)
diff --git a/internewshid/hid/templates/hid/tabs/dynamic_filters.html b/internewshid/hid/templates/hid/tabs/dynamic_filters.html
index 9f788be7..4df5d9f3 100644
--- a/internewshid/hid/templates/hid/tabs/dynamic_filters.html
+++ b/internewshid/hid/templates/hid/tabs/dynamic_filters.html
@@ -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>
diff --git a/internewshid/hid/templates/hid/tabs/filters/age.html b/internewshid/hid/templates/hid/tabs/filters/age.html
index 053691e3..b5384715 100644
--- a/internewshid/hid/templates/hid/tabs/filters/age.html
+++ b/internewshid/hid/templates/hid/tabs/filters/age.html
@@ -1,14 +1,12 @@
{% 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 %}
diff --git a/internewshid/hid/templates/hid/tabs/filters/category.html b/internewshid/hid/templates/hid/tabs/filters/category.html
index 03ea28f3..59cc089d 100644
--- a/internewshid/hid/templates/hid/tabs/filters/category.html
+++ b/internewshid/hid/templates/hid/tabs/filters/category.html
@@ -1,14 +1,12 @@
{% 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 %}
diff --git a/internewshid/hid/templates/hid/tabs/filters/ennumerator.html b/internewshid/hid/templates/hid/tabs/filters/ennumerator.html
index d1656446..9050db86 100644
--- a/internewshid/hid/templates/hid/tabs/filters/ennumerator.html
+++ b/internewshid/hid/templates/hid/tabs/filters/ennumerator.html
@@ -1,14 +1,12 @@
{% 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 %}
diff --git a/internewshid/hid/templates/hid/tabs/filters/gender.html b/internewshid/hid/templates/hid/tabs/filters/gender.html
index 03be47a4..1745e4df 100644
--- a/internewshid/hid/templates/hid/tabs/filters/gender.html
+++ b/internewshid/hid/templates/hid/tabs/filters/gender.html
@@ -1,14 +1,12 @@
{% 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 %}
diff --git a/internewshid/hid/templates/hid/tabs/filters/location.html b/internewshid/hid/templates/hid/tabs/filters/location.html
index 666d5aab..d55f3fec 100644
--- a/internewshid/hid/templates/hid/tabs/filters/location.html
+++ b/internewshid/hid/templates/hid/tabs/filters/location.html
@@ -1,14 +1,12 @@
{% 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 %}
diff --git a/internewshid/hid/templates/hid/tabs/filters/source.html b/internewshid/hid/templates/hid/tabs/filters/source.html
index 4ace7742..51c5e144 100644
--- a/internewshid/hid/templates/hid/tabs/filters/source.html
+++ b/internewshid/hid/templates/hid/tabs/filters/source.html
@@ -1,14 +1,12 @@
{% 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 %}
diff --git a/internewshid/hid/templates/hid/tabs/filters/tags.html b/internewshid/hid/templates/hid/tabs/filters/tags.html
index d3c315da..62d0c415 100644
--- a/internewshid/hid/templates/hid/tabs/filters/tags.html
+++ b/internewshid/hid/templates/hid/tabs/filters/tags.html
@@ -1,7 +1,5 @@
{% 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>
diff --git a/internewshid/hid/templates/hid/tabs/filters/time_range.html b/internewshid/hid/templates/hid/tabs/filters/time_range.html
index 81693f38..2ab670fa 100644
--- a/internewshid/hid/templates/hid/tabs/filters/time_range.html
+++ b/internewshid/hid/templates/hid/tabs/filters/time_range.html
@@ -1,6 +1,6 @@
{% 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>
diff --git a/internewshid/media/less/internews.less b/internewshid/media/less/internews.less
index 6431b6d6..a5e6d003 100644
--- a/internewshid/media/less/internews.less
+++ b/internewshid/media/less/internews.less
@@ -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 {
diff --git a/internewshid/media/less/view-edit.less b/internewshid/media/less/view-edit.less
index d2f4bf7f..d7a4fc36 100644
--- a/internewshid/media/less/view-edit.less
+++ b/internewshid/media/less/view-edit.less
@@ -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;
}
--
GitLab