diff --git a/internewshid/hid/templates/hid/tabs/dynamic_filters.html b/internewshid/hid/templates/hid/tabs/dynamic_filters.html index 9f788be704294025b7a93b39c00e8b4e180e4ebb..4df5d9f3a9998f4a4b6042d2ec734fc826a11ee8 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 053691e332c6fadbe704737e3475f92d3443c50c..b5384715c6f5f10e2da1b00639e554275a328bd1 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 03ea28f323b8432b4657eb622db57d9a916233b7..59cc089d5d2f223baaeb70c5d9fcc2e7018412b3 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 d1656446688038ad5848e48be16df0e28ee184a9..9050db8681c7c2814eb9bbddd5912a241ab69872 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 03be47a4949c84df642f37ac413febd985480881..1745e4df859d452481e27eaf828a5fcd7e1ce400 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 666d5aab306f5f96a6b0dab5482df788087425bb..d55f3fec241d2fca6189c15ae22fcb0fdb7ecbb1 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 4ace774281e19549d92a060b3093261fb7ea1ef9..51c5e144ce036eebf90158da594ba9209789a7c4 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 d3c315da5c76276298032cb1e2357bb81c1303b9..62d0c41503677f88c58a28b00b0ba4527818e536 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 81693f38d11fd1094ca36c5c5fc5b4e057e62806..2ab670fa1fa0eb3cd92ce66fbc5115708accd2c3 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 6431b6d6a75e5f1ccd7887d3ce2a9070b0ec92fd..a5e6d00366d31c773d104d0659e6f6de11661646 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 d2f4bf7fc51a2be94cf991093833a77125e750b5..d7a4fc36a1cbe3e0d6f1f93aae2c34debc6268be 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; }