Commit aaea5d36 authored by Taisiya Glushko's avatar Taisiya Glushko Committed by Matija Obreza
Browse files

Genesys UX 2016: filtering.

parent a8093cee
......@@ -213,6 +213,8 @@ public class GenesysServiceImpl implements GenesysService, DatasetService {
List<String> displayList = new ArrayList<String>();
displayList.add("taxonomy." + Api1Constants.Taxonomy.SCIENTIFIC_NAME);
displayList.add("taxonomy." + Api1Constants.Taxonomy.GENUS);
displayList.add("taxonomy." + Api1Constants.Taxonomy.SPECIES);
displayList.add(Api1Constants.Accession.ORIGCTY);
displayList.add(Api1Constants.Accession.SAMPSTAT);
displayList.add("institute." + Api1Constants.Institute.INSTCODE);
......
......@@ -317,7 +317,7 @@ accession.geo.method=Georeferencing method
accession.geo.uncertainty=Coordinate uncertainty
accession.geo.latitudeAndLongitude=Geolocation
accession.sampStat=Biological status of accession
accession.sampStat=Biological status
accession.sampleStatus=Biological status of accession
accession.sampleStatus.=
accession.sampleStatus.100=Wild
......
......@@ -287,7 +287,7 @@ var GenesysFilterUtil = {
var div = '<div class="filtval complex" x-key="' + normKey + jsonValue + '" i-key="' + key + '">' + value + '</div>';
//$(element).parents('.filter-block').find('.filter-values').append(div);
if (key === 'geo.latitude' || key === 'geo.longitude' || key === 'geo.elevation') {
$(element).parent().parent().parent().after(div);
$(element).parent().parent().after(div);
} else {
$(element).parent().parent().parent().find('button.applyBtn').before(div);
}
......
......@@ -1077,6 +1077,7 @@ $light-font-family: 'Roboto-Light';
font-size: 14px;
padding: 5px 8px 4px;
text-transform: uppercase;
border-radius: 0;
&:before {
......@@ -1600,6 +1601,393 @@ $light-font-family: 'Roboto-Light';
}
}
//explore page
.explore-page {
.fullwidth {
width: 100% !important;
float: left !important;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
select.column-changer {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
border: 1px solid #bbbbbb;
background: transparent;
font-size: 14px;
height: 31px;
padding: 0 10px;
width: 90%;
}
select.column-changer + span.glyphicon.glyphicon-menu-down {
right: 20px;
top: 2px;
pointer-events: none;
}
.filters {
padding-right: 0;
padding-left: 0;
#accordion > #panelFilters {
border-bottom: none;
}
#panelFilters > .panel-heading {
padding: 10px 15px 0 15px;
}
#panelFilters > .panel-heading > h4.panel-title {
text-transform: uppercase;
border-bottom: 1px solid black;
padding: 12px 5px 22px 5px;
}
#panelFilters > .panel-heading.no-border > h4.panel-title {
border-bottom: 1px solid white;
}
.label-name {
font-family: $heading-font-family;
}
.panel {
border: none;
border-bottom: 1px solid #d5d4d3;
border-radius: 0;
font-size: 14px;
font-family: $default-font-family;
box-shadow: none;
margin-top: 0;
.panel-heading + .panel-collapse > .panel-body {
border: none;
}
.btn-default {
background-color: #87bc38;
color: #ffffff;
border: none;
}
.form-control {
border-radius: 0;
margin-bottom: 10px;
}
.input-group-btn {
vertical-align: top;
}
span.input-group-btn {
input, select {
width: 44%;
}
span.glyphicon.glyphicon-plus {
vertical-align: top;
}
.glyphicon-plus:before {
color: #bbbbbb;
font-size: 9px;
}
}
.btn-secondary {
border-radius: 0;
background-color: #e9e9e9;
border-bottom-color: #bbbbbb;
border-top-color: #bbbbbb;
border-right-color: #bbbbbb;
font-size: 12px;
padding: 6px 9px;
}
.panel-body {
& > div {
position: relative;
}
.form-control {
font-size: 14px;
height: 31px;
padding: 0 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
}
span.glyphicon.glyphicon-menu-down {
position: absolute;
right: 1px;
z-index: 2;
top: 1px;
pointer-events: none;
display: inline-block;
width: 27px;
height: 29px;
background-color: #e9e9e9;
line-height: 22px;
font-size: 13px;
color: #bbbbbb;
&:before {
position: absolute;
top: 3px;
left: 7px;
}
}
}
}
.panel-default > .panel-heading {
background-color: transparent;
a {
color: #2b2924;
font-family: $heading-font-family;
}
}
.panel-heading .panel-title {
font-size: 18px;
padding: 8px 0;
}
#collapseFilters .panel-group .panel .panel-heading {
padding: 15px 0 15px 0;
}
#collapseFilters .panel-group .panel {
&:first-child .panel-heading {
padding-top: 10px;
}
}
#collapseFilters .panel-title {
font-size: 14px;
font-family: $heading-font-family;
padding: 0;
}
#collapseFilters > .panel-body {
/*border-top: 1px solid #d5d4d3;*/
padding: 7px 20px 15px 20px;
}
#collapseFilters .panel-body .panel-group .panel-default .panel-body {
padding: 0 0 15px 0;
}
.panel-heading a:after {
font-family: 'FontAwesome';
content: "\f077";
float: right;
font-size: 14px;
}
.panel-heading a.collapsed:after {
font-family: 'FontAwesome';
content: "\f078";
font-size: 14px;
}
#panel3 {
.checkbox label {
font-size: 14px;
font-family: $default-font-family;
}
}
.applyBtn {
background-color: #87bc38;
padding: 5px 40px;
font-size: 14px;
border: none;
display: block;
}
.filtval.complex {
display: inline-block;
min-width: 85px;
margin-right: 11px;
padding: 6px 20px 6px 10px;
background-color: #e6e0c5;
color: #918a6a;
position: relative;
margin-bottom: 10px;
&:after {
font-family: 'FontAwesome';
content: "\f00d";
font-size: 10px;
position: absolute;
top: 2px;
right: 4px;
}
}
div.checkbox-wrapper {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
label {
font-size: 14px;
font-family: $default-font-family;
min-height: 22px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
display: inline-block;
}
input {
position: absolute;
margin: 4px 0 0 -20px;
}
}
}
.filters > .panel-group {
margin-bottom: 0;
}
.main-col-header {
background-color: #d4d1c6;
padding: 7px 20px 6px 20px;
}
.nav-header {
.list-view-controls {
padding: 0;
margin: 10px 0;
a {
padding: 6px 15px 4px;
margin-right: 5px;
&:last-child {
margin-right: 0;
}
}
}
.pagination {
margin: 10px 0;
}
nav:not(.pull-right) .pagination li:first-child span {
padding-left: 0;
}
.pagination li:first-child span {
padding: 4px 10px;
}
}
nav.pull-left form {
line-height: 0;
font-size: 10px;
}
#explore-table {
float: right;
font-family: $default-font-family;
font-size: 12px;
padding-left: 20px;
padding-right: 20px;
table {
width: 100%;
border-spacing: 0 5px;
border-collapse: separate;
thead tr {
td {
padding: 6px 5px 6px 10px;
p {
font-size: 14px;
}
}
}
tbody tr {
&:nth-of-type(odd) td {
background-color: #f8f7f5;
border-right: 1px solid #e7e5df;
&:first-child, &:last-child {
border-right: none;
}
}
&:nth-of-type(even) td {
background-color: #f3f2ee;
border-right: 1px solid #e7e5df;
&:first-child, &:last-child {
border-right: none;
}
}
}
tr {
td {
padding: 10px 5px 10px 10px;
p {
margin: 0;
}
}
td:first-child {
width: 1%;
padding-left: 10px;
}
td:nth-child(2) {
width: 3.4%;
margin: 0;
padding: 10px 10px 6px 10px;
input {
margin: 3px 0 0 0;
}
}
td:nth-child(3) {
width: 11.4743589%;
a {
font-size: 14px;
}
}
td:nth-child(4) {
width: 13.3333333%;
}
td:nth-child(5) {
width: 12.820512%;
}
td:nth-child(6) {
width: 12.30769230%;
}
td:nth-child(7) {
width: 17.5%;
}
td:nth-child(8) {
width: 16.2820512%;
}
td:nth-child(9) {
width: 10.7692307%;
}
}
tr.acn span.sel {
background-image: url('../images/icon_row_select.png');
background-repeat: no-repeat;
background-position: center left;
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
background-size: 250%;
}
tr.acn span.sel.picked {
background-position: center right;
}
}
}
.bottom-pagination-wrapper {
background-color: #d4d1c6;
padding: 0 15px;
margin-top: 15px;
nav.pull-right .pagination li {
min-width: 1px;
min-height: 26px;
position: relative;
display: inline-block;
span {
padding: 0;
}
&:first-child span {
padding: 5px 0;
}
}
nav.pull-right .pagination {
margin: 21px 0 12px 0;
}
nav.pull-right .pagination li span .form-control.results-per-page {
border-radius: 0;
font-size: 14px;
font-family: $emphasis-font-family;
border: 1px solid #949490;
height: 31px;
padding: 3px 30px 3px 5px;
}
nav.pull-left {
.pagination {
margin: 24px 0 15px 0;
}
}
}
#explore-table.fullwidth {
.bottom-pagination-wrapper {
margin-right: -20px;
margin-left: -20px;
padding-left: 25px;
padding-right: 25px;
}
}
}
@media (min-width: 990px) and (max-width: 1919px) {
......@@ -1915,6 +2303,67 @@ $light-font-family: 'Roboto-Light';
}
}
@media (max-width: 1450px) {
.explore-page .nav-header nav:not(.pull-right) .pagination {
margin: 10px 0;
margin: 0;
li {
&:first-child {
display: block;
span {
padding: 0;
}
}
&:last-child {
display: none;
}
min-width: 1px;
min-height: 26px;
position: relative;
span {
display: inline-block;
}
}
}
.explore-page .nav-header {
.list-view-controls {
margin: 23px 0 13px 0;
}
}
.explore-page {
.main-col-header {
padding: 0 20px;
}
.filters .panel-heading .panel-title {
padding: 13.5px 0;
#collapseFilters .panel-title {
padding: 0;
}
}
.filters #collapseFilters > .panel-body {
padding: 7px 15px 15px 15px;
}
.filters #panelFilters > .panel-heading > h4.panel-title {
padding: 19px 0 19px 0;
}
}
}
@media (max-width: 1460px) and (min-width: 1200px) {
//explore-page
.explore-page {
.filters {
width: 20%;
}
.main-col-header {
width: 80%;
}
#explore-table {
width: 80%;
}
}
}
@media (max-width: 1450px) and (min-width: 1200px) {
//accession-page
.accession-page {
......@@ -2019,6 +2468,112 @@ $light-font-family: 'Roboto-Light';
padding-left: 15px;
}
}
//explore-page
.explore-page {
.nav-header .list-view-controls {
margin: 25px 0 6px 0;
}
.filters #panelFilters > .panel-heading > h4.panel-title {
padding: 13px 0 20px 0;
}
.filters #collapseFilters > .panel-body {
padding: 7px 20px 15px 20px;
}
#explore-table {
table thead tr {
td {
padding: 0;
}
td:nth-child(3) {
padding-left: 29px;
}
}
table tr {
td:first-child {
width: 0.5%;
}
td:nth-child(2) {
width: 6.5%;
padding: 10px 10px 6px 5px;
}
td:nth-child(3) {
/*width: 33.428165%;*/
width: auto;
}
td:nth-child(4) {
/*width: 29.445234%;*/
width: auto;
}
td:nth-child(5) {
/*width: 26.6002844%;*/
width: auto;
}
td:nth-child(6) {
width: auto;
}
td:nth-child(7) {
width: auto;
}
td:nth-child(8) {
width: auto;
}
td:nth-child(9) {
width: auto;
}
}
}
}
}
@media (max-width: 991px) and (min-width: 961px) {
//explore-page
.explore-page {
#explore-table.fullwidth > table tr td:nth-child(7) {
display: block !important;
width: auto;
line-height: 20px;
p {
display: block;
min-height: 20px;
}
}
#explore-table.fullwidth {
table tr {
td:first-child {
width: 0.5%;
}
td:nth-child(2) {
width: 6%;
padding: 10px 10px 6px 10px;
}
td:nth-child(3) {
/*width: 26.315789%;*/
width: auto;
}
td:nth-child(4) {
/*width: 21.5789473%;*/
width: auto;
}
td:nth-child(5) {
/*width: 21.5789473%;*/
width: auto;
}
td:nth-child(6) {
/*width: 21.684210%;*/
width: auto;
}
td:nth-child(8) {
width: auto;
}
td:nth-child(9) {
width: auto;
}
}
}
.filters #panelFilters > .panel-heading {
padding: 10px 20px 0 20px;