Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Backend
Commits
aaea5d36
Commit
aaea5d36
authored
Aug 30, 2016
by
Taisiya Glushko
Committed by
Matija Obreza
Aug 30, 2016
Browse files
Genesys UX 2016: filtering.
parent
a8093cee
Changes
8
Expand all
Hide whitespace changes
Inline
Side-by-side
src/main/java/org/genesys2/server/service/impl/GenesysServiceImpl.java
View file @
aaea5d36
...
...
@@ -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
View file @
aaea5d36
...
...
@@ -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
View file @
aaea5d36
...
...
@@ -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
View file @
aaea5d36
...
...
@@ -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
;