Genesys UX 2016: filtering.

src/main/java/org/genesys2/server/service/impl/GenesysServiceImpl.java

@@ -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);

src/main/resources/content/language.properties

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

src/main/sourceapp/1/js/crophub.js

@@ -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);
     }

src/main/sourceapp/1/styles/genesys.scss

@@ -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;
+        }
+      }
+    }