Skip to content

GitLab

Commit aaa32b13 authored by Taisiya Glushko's avatar Taisiya Glushko
Browse files

accession-gallery-ui

parent 2170b834
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 276 deletions
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: 22px solid #ffffff;
border-right: 20px 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 21px;
padding: 20px 15px 23px 20px;
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: 19px;
padding-left: 10px;
}
.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 {
.collect-site {
.climate-info {
.section-inner-content {
font-size: 14px;
}
......@@ -4458,7 +4444,7 @@ table.accessions {
@media(max-width: 420px) {
//accession page
.accession-page {
.collect-site {
.climate-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 1px 0;
.section-inner-content {
padding: 20px 0 27px 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;
}
}
}
.imagegallery {
.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%;
}
}
.collect-site {
.climate-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: 21px;
padding-left: 20px;
}
.text-right p {
padding-right: 19px;
padding-right: 20px;
}
}
.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" />