Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Genesys Backend
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
12
Issues
12
List
Boards
Labels
Service Desk
Milestones
Operations
Operations
Incidents
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Genesys PGR
Genesys Backend
Commits
aaa32b13
Commit
aaa32b13
authored
Oct 12, 2016
by
Taisiya Glushko
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
accession-gallery-ui
parent
2170b834
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
263 additions
and
276 deletions
+263
-276
src/main/sourceapp/1/styles/genesys.scss
src/main/sourceapp/1/styles/genesys.scss
+165
-191
src/main/webapp/WEB-INF/jsp/accession/details.jsp
src/main/webapp/WEB-INF/jsp/accession/details.jsp
+98
-85
No files found.
src/main/sourceapp/1/styles/genesys.scss
View file @
aaa32b13
...
...
@@ -1248,35 +1248,28 @@ $light-font-family: 'Roboto-Light';
}
//accession page
.accession-page
{
h1
.green-bg
{
margin
:
0
-15px
0
-15px
;
padding
:
8px
0
14px
19px
;
margin-bottom
:
0
;
span
{
color
:
#ffffff
;
font-size
:
15px
;
font-family
:
$heading-font-family
;
font-size
:
30px
;
}
small
{
font-family
:
$emphasis-font-family
;
color
:
#C1DF97
;
font-size
:
18px
;
}
}
.main-col-header
{
padding-left
:
10px
;
background
:
#D8D6D0
;
margin
:
0
-15px
19px
-15px
;
padding
:
12px
0
11px
25px
;
.checkbox
{
.row.main-col-header
{
background-color
:
#c4c0b6
;
padding
:
15px
0
5px
20px
;
margin-bottom
:
20px
;
/*.checkbox {
margin: 0;
input:checked {
content: "\f00c";
font-family: 'FontAwesome';
}
}
}
*/
a
{
font-size
:
14px
;
}
...
...
@@ -1284,37 +1277,32 @@ $light-font-family: 'Roboto-Light';
.alert-info
{
font-size
:
14px
;
padding
:
18px
15px
17px
22px
;
margin
:
0
5px
20px
8px
;
}
.section-heading
{
background
:
#ffffff
;
font-size
:
18px
;
padding
:
15px
15px
14px
20px
;
margin
:
0
5px
2px
5px
;
font-family
:
$heading-font-family
;
margin
:
0
5px
20px
5px
;
}
.section-inner-content
{
background
:
#ffffff
;
/*
background: #ffffff;
padding: 20px 20px 39px 22px;
margin
:
0
5px
;
margin: 0 5px;
*/
.row
{
margin
:
0
0
5px
0
;
div
{
padding
:
10px
10px
10px
0
;
p
{
line-height
:
inherit
;
}
}
}
.row
:nth-child
(
odd
)
>
div
>
p
{
.row
:nth-child
(
odd
)
{
background
:
#f8f7f5
;
}
.row
:nth-child
(
even
)
>
div
>
p
{
.row
:nth-child
(
even
)
{
background
:
#f3f2ee
;
}
div
{
padding
:
0
;
}
p
{
margin
:
0
;
font-size
:
14px
;
font-family
:
$default-font-family
;
line-height
:
40px
;
padding-left
:
22px
;
padding-left
:
20px
;
}
}
.basic-info
{
...
...
@@ -1322,31 +1310,25 @@ $light-font-family: 'Roboto-Light';
width
:
20px
;
margin-right
:
5px
;
}
margin-bottom
:
14px
;
.section-inner-content
{
.row
>
div
:nth-child
(
odd
)
>
p
{
margin-right
:
3px
;
padding-bottom
:
38px
;
.row
>
div
:nth-child
(
even
)
:before
{
content
:
""
;
display
:
block
;
position
:
absolute
;
top
:
0
;
width
:
2px
;
height
:
80px
;
background-color
:
#ffffff
;
}
}
}
.collect-info
{
margin-bottom
:
20px
;
.section-inner-content
{
padding-bottom
:
28px
;
}
}
.collect-site
{
.section-inner-content
{
margin-bottom
:
20px
;
}
}
.data-index
{
.section-inner-content
{
padding-bottom
:
25px
;
margin
:
0
5px
13px
5px
;
.text-right
p
{
border-right
:
2
2
px
solid
#ffffff
;
border-right
:
2
0
px
solid
#ffffff
;
padding-right
:
21px
;
padding-left
:
0
;
}
.text-right
:nth-child
(
3n
)
>
p
{
border-right
:
none
;
...
...
@@ -1365,6 +1347,12 @@ $light-font-family: 'Roboto-Light';
background-color
:
#f3f2ee
;
background-image
:
linear-gradient
(
transparent
51%
,
rgba
(
248
,
247
,
245
,
1
)
49%
);
background-size
:
50px
89px
;
div
{
padding
:
0
;
p
{
line-height
:
40px
;
}
}
}
}
.jumbotron
{
...
...
@@ -1384,66 +1372,79 @@ $light-font-family: 'Roboto-Light';
#map
{
height
:
300px
;
}
.imagegallery
{
margin-right
:
0
;
margin-left
:
0
;
div
{
div
{
.img-wrapper
{
width
:
97%
;
margin-bottom
:
11px
;
cursor
:
pointer
;
position
:
relative
;
img
{
width
:
100%
;
}
#accession-image-view
{
position
:
absolute
;
width
:
100%
;
height
:
auto
;
margin
:
0
;
max-height
:
0
;
bottom
:
0
;
left
:
0
;
overflow
:
hidden
;
display
:
block
;
padding
:
0
10px
;
-webkit-transition
:
max-height
0
.4s
ease
;
-moz-transition
:
max-height
0
.4s
ease
;
transition
:
max-height
0
.4s
ease
;
}
&
:hover
>
#accession-image-view
{
max-height
:
100%
;
cursor
:
pointer
;
}
.image-frame
{
font-family
:
$default-font-family
;
font-size
:
12px
;
background
:
rgba
(
209
,
216
,
202
,
0
.8
);
div
:first-child
,
div
:nth-child
(
2
)
{
margin-top
:
14px
;
}
div
:last-child
,
div
:nth-child
(
10
)
{
margin-bottom
:
14px
;
}
div
{
background
:
none
;
line-height
:
18px
;
}
.val
{
margin-left
:
-8px
;
}
}
}
}
.gallery
{
.section-inner-content
{
div
{
padding
:
0
;
}
}
}
#accession-images-thumbs
{
background
:
transparent
;
.img-wrapper
{
width
:
97%
;
cursor
:
pointer
;
position
:
relative
;
margin-bottom
:
10px
;
img
{
width
:
100%
;
}
.section-inner-content
{
padding
:
17px
13px
20px
20px
;
margin-bottom
:
19px
;
}
}
#accession-image-view
{
position
:
relative
;
margin-top
:
10px
;
width
:
300px
;
margin-left
:
auto
;
margin-right
:
auto
;
background
:
transparent
;
.metadata
{
margin
:
0
;
line-height
:
18px
;
position
:
absolute
;
width
:
100%
;
height
:
auto
;
bottom
:
0
;
left
:
0
;
overflow
:
hidden
;
display
:
block
;
padding
:
0
10px
;
font-family
:
$default-font-family
;
font-size
:
12px
;
background
:
rgba
(
209
,
216
,
202
,
0
.8
);
}
.caption
{
display
:
inline-block
;
width
:
40%
;
margin-right
:
10px
;
}
.theimage-wrapper
img
{
width
:
100%
;
}
}
.geo-info
{
.section-inner-content
.row.map-wrapper
{
div
{
padding
:
0
;
}
}
}
.climate-info
{
.section-inner-content
{
.row
{
div
{
padding
:
0
;
}
}
.row
:nth-child
(
odd
)
{
background
:
transparent
;
}
.row
:nth-child
(
even
)
{
background
:
transparent
;
}
}
}
}
//crop page
...
...
@@ -2050,7 +2051,7 @@ $light-font-family: 'Roboto-Light';
h1
.green-bg
{
color
:
#ffffff
;
font-family
:
$heading-font-family
;
padding
:
18px
15px
23px
21
px
;
padding
:
20px
15px
23px
20
px
;
font-size
:
24px
;
margin
:
0
-15px
20px
-15px
;
}
...
...
@@ -3156,8 +3157,7 @@ table.accessions {
@media
(
max-width
:
1450px
)
and
(
min-width
:
1200px
)
{
//accession-page
.accession-page
{
.imagegallery
div
div
.img-wrapper
{
/*.accession-page {
#accession-image-view {
font-size: 11px;
padding: 0 5px;
...
...
@@ -3165,8 +3165,7 @@ table.accessions {
.image-frame .val {
margin-left: 0;
}
}
}
}*/
}
@media
(
max-width
:
1290px
)
and
(
min-width
:
1199px
)
{
//country page
...
...
@@ -3275,7 +3274,7 @@ table.accessions {
@media
(
max-width
:
1198px
)
{
//accession-page
.accession-page
{
.imagegallery
div
div
.img-wrapper
{
#accession-images-thumbs
.img-wrapper
{
margin
:
0
auto
15px
auto
;
}
}
...
...
@@ -3347,59 +3346,26 @@ table.accessions {
@media
(
max-width
:
990px
)
{
//accession-page
.accession-page
{
h1
.green-bg
{
padding
:
7px
0
14px
27px
;
}
.main-col-header
{
padding
:
10px
0
11px
25px
;
}
.alert-info
{
padding
:
16px
15px
17px
22px
;
margin
:
0
7px
20px
3px
;
}
.section-heading
{
padding-bottom
:
16px
;
}
.basic-info
{
margin-bottom
:
19px
;
.section-inner-content
{
padding
:
20px
20px
24px
21px
;
p
{
padding-left
:
18px
;
}
}
}
.imagegallery
{
.section-inner-content
{
padding
:
20px
19px
26px
17px
;
margin-bottom
:
20px
;
}
div
div
.img-wrapper
{
#accession-images-thumbs
.img-wrapper
{
margin-bottom
:
5px
;
width
:
98%
;
}
}
.collect-info
{
.section-inner-content
{
padding
:
18px
20px
26px
21px
;
p
{
padding-left
:
18px
;
}
}
}
.data-index
{
.section-inner-content
{
margin-bottom
:
4px
;
.text-right
p
{
border-right
:
5px
solid
#ffffff
;
padding-right
:
10px
;
}
p
{
padding-left
:
1
9
px
;
padding-left
:
1
0
px
;
}
.wrap-col
{
/*
.wrap-col {
width: 31.9%;
margin-right: 2.15%;
.row > div:last-child > p {
padding-left: 0;
}
}
}
*/
}
}
}
...
...
@@ -4209,13 +4175,33 @@ table.accessions {
}
//accession page
.accession-page
{
.basic-info
.section-inner-content
.row
>
div
:nth-child
(
odd
)
>
p
{
margin-right
:
0
;
.section-inner-content
.row
,
.geo-info
.section-inner-content
.row
:not
(
.map-wrapper
)
{
div
{
padding
:
0
;
}
padding
:
10px
0
;
}
.source-info
.section-inner-content
.row
,
.geo-info
.section-inner-content
.map-wrapper
{
padding
:
0
;
}
.source-info
.section-inner-content
{
.row
div
:nth-child
(
odd
)
{
padding
:
10px
10px
0
0
;
}
.row
div
:nth-child
(
even
)
{
padding
:
0
10px
10px
0
;
}
}
.basic-info
.section-inner-content
.row
>
div
:nth-child
(
even
)
:before
{
display
:
none
;
}
.data-index
.section-inner-content
.text-right
p
{
border-right
:
none
;
}
.data-index
.section-inner-content
.row
{
padding
:
0
;
background-size
:
50px
90px
;
}
}
...
...
@@ -4373,7 +4359,7 @@ table.accessions {
@media
(
max-width
:
500px
)
{
//accession page
.accession-page
{
.c
ollect-site
{
.c
limate-info
{
.section-inner-content
{
font-size
:
14px
;
}
...
...
@@ -4458,7 +4444,7 @@ table.accessions {
@media
(
max-width
:
420px
)
{
//accession page
.accession-page
{
.c
ollect-site
{
.c
limate-info
{
.section-inner-content
{
font-size
:
12px
;
}
...
...
@@ -4473,75 +4459,63 @@ table.accessions {
padding-left
:
0
;
padding-right
:
0
;
}
.collect-info
{
margin
:
0
0
20px
0
;
}
h1
.green-bg
{
margin
:
0
;
}
.main-col-header
{
.
row.
main-col-header
{
margin
:
0
0
20px
0
;
}
.alert-info
{
margin
:
0
20px
20px
20px
;
padding
:
17px
15px
17px
20px
;
}
.section-
heading
{
margin
:
0
0
1
px
0
;
.section-
inner-content
{
padding
:
20px
0
27
px
0
;
}
.basic-info
{
.section-inner-content
{
padding
:
20px
0
27px
0
;
margin
:
0
;
padding-bottom
:
25px
;
p
{
line-height
:
22px
;
padding-left
:
21px
;
}
.row
>
div
:nth-child
(
odd
)
>
p
{
padding-top
:
8px
;
}
.row
>
div
:nth-child
(
even
)
>
p
{
padding-bottom
:
8px
;
padding-right
:
20px
;
}
.add-space
{
padding-bottom
:
8px
;
}
.row
{
padding
:
8px
0
;
}
}
}
.
image
gallery
{
.gallery
{
.section-inner-content
{
padding
:
20px
44px
28px
36px
;
margin
:
0
0
22px
0
;
padding
:
20px
20px
27px
20px
;
}
div
div
.img-wrapper
{
width
:
100%
;
#accession-images-thumbs
.img-wrapper
{
/*width: 100%;*/
margin-bottom
:
3px
;
}
}
.collect-info
{
.section-inner-content
{
margin
:
0
0
20px
0
;
padding
:
20px
0
26px
0
;
p
{
padding-left
:
22px
;
}
#accession-image-view
{
width
:
100%
;
}
}
.c
ollect-site
{
.c
limate-info
{
.section-inner-content
{
font-size
:
12px
;
margin
:
0
0
20px
0
;
padding
:
20px
20px
27px
20px
;
}
}
.data-index
{
.section-inner-content
{
margin
:
0
0
20px
0
;
padding
:
20px
0
26px
0
;
.wrap-col
.row
>
div
:last-child
>
p
{
/*.wrap-col .row > div:last-child > p {
padding-right: 18px;
}
}
*/
p
{
padding-left
:
2
1
px
;
padding-left
:
2
0
px
;
}
.text-right
p
{
padding-right
:
19
px
;
padding-right
:
20
px
;
}
}
.jumbotron
{
...
...
src/main/webapp/WEB-INF/jsp/accession/details.jsp
View file @
aaa32b13
...
...
@@ -17,7 +17,7 @@
<small
property=
"dwc:institutionCode"
datatype=
"germplasmType:wiewsInstituteID"
><c:out
value=
"
${
accession
.
instituteCode
}
"
/></small>
</h1>
<div
class=
"main-col-header acn"
>
<div
class=
"
row
main-col-header acn"
>
<div
class=
"sel"
x-aid=
"${accession.id}"
>
<a
class=
"add"
href=
""
><spring:message
code=
"selection.add"
arguments=
"
${
accession
.
accessionName
}
"
/></a>
<a
class=
"remove"
href=
""
><spring:message
code=
"selection.remove"
arguments=
"
${
accession
.
accessionName
}
"
/></a>
...
...
@@ -50,8 +50,9 @@
</gui:alert>
--%>
<!--basic info section-->
<div
class=
"crop-details"
>
<div
class=
"basic-info"
>
<div
class=
"
collect-info
basic-info"
>
<h4
class=
"section-heading"
>
<spring:message
code=
"accession.page.profile.title"
arguments=
"
${
accession
.
accessionName
}
"
argumentSeparator=
"|"
/></h4>
<div
class=
"section-inner-content"
>
...
...
@@ -364,73 +365,81 @@
</div>
<!-- End: basic info section -->
<!-- Image gallery section -->
<c:if
test=
"
${
imageGallery
ne
null
}
"
>
<h4
class=
"row section-heading"
>
<spring:message
code=
"accession.imageGallery"
/>
</h4>
<div
class=
"row imagegallery thumbs"
id=
"accession-images-thumbs"
>
<c:forEach
items=
"
${
imageGallery
.
images
}
"
var=
"image"
>
<div
x-uuid=
"
<c:out
value=
"
${
image
.
uuid
}
"
/>
"
x-ext=
"
<c:out
value=
"
${
image
.
extension
}
"
/>
"
style=
"cursor: pointer;"
class=
"col-xs-6 col-sm-3 col-md-2 col-lg-2"
>
<img
src=
"
<c:url
value=
"/repository/d${image.path}_thumb/${thumbnailFormat}_${image.uuid}.png"
/>
"
alt=
"
<c:out
value=
"
${
image
.
title
}
"
/>
"
/>
</div>
</c:forEach>
</div>
<div
class=
"imagegallery image-frame row"
id=
"accession-image-view"
>
<img
class=
"theimage"
/>
<div
class=
"metadata"
>
<div
class=
"title"
>
<spring:message
code=
"repository.file.title"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"subject"
>
<spring:message
code=
"repository.file.subject"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"description"
>
<spring:message
code=
"repository.file.description"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"creator"
>
<spring:message
code=
"repository.file.creator"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"created"
>
<spring:message
code=
"repository.file.created"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"rightsHolder"
>
<spring:message
code=
"repository.file.rightsHolder"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"accessRights"
>
<spring:message
code=
"repository.file.accessRights"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"license"
>
<spring:message
code=
"repository.file.license"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"extent"
>
<spring:message
code=
"repository.file.extent"
/>
<span
class=
"val"
></span>
</div>
<div
class=
"bibliographicCitation"
>
<spring:message
code=
"repository.file.bibliographicCitation"
/>