Commit 531590e1 authored by Matija Obreza's avatar Matija Obreza

Genesys UX 2016 (accession)

parent 300c6b6f
......@@ -1250,6 +1250,190 @@ $heading-font-family: 'Roboto-Bold';
}
//accession page
.accession-page {
h1.green-bg {
margin: 0 -15px 0 -15px;
padding: 8px 0 14px 19px;
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 {
margin: 0;
input:checked {
content: "\f00c";
font-family: 'FontAwesome';
}
}
a {
font-size: 14px;
}
}
.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 3px 5px;
font-family: $heading-font-family;
}
.section-inner-content {
background: #ffffff;
padding: 17px 20px 39px 22px;
margin: 0 5px;
.row {
margin: 0 0 5px 0;
}
.row:nth-child(odd) > div {
background: #f8f7f5;
}
.row:nth-child(even) > div {
background: #f3f2ee;
}
div {
padding: 0;
}
p {
margin: 0;
font-size: 14px;
font-family: $default-font-family;
line-height: 40px;
padding-left: 22px;
}
}
.basic-info {
margin-bottom: 14px;
.section-inner-content {
.row > div {
width: 49.8%;
}
.row > div:nth-child(odd) {
margin-right: 0.2%;
}
}
}
.collect-info {
margin-bottom: 20px;
.section-inner-content {
padding-bottom: 28px;
}
}
.data-index {
.section-inner-content {
padding-bottom: 25px;
margin-bottom: 13px;
div > .row {
margin: 0 0 5px 0;
}
.wrap-col {
width: 32.6%;
margin-right: 1.1%;
&:last-child {
margin-right: 0;
}
.row > div:last-child > p {
text-align: right;
padding-right: 21px;
}
}
}
.jumbotron {
background: #e7e7e7;
padding: 5px 15px 29px 26px;
margin-bottom: 20px;
h3 {
font-family: $emphasis-font-family;
font-size: 24px;
}
small {
font-size: 16px;
font-family: $emphasis-font-family;
}
}
}
#map {
height: 300px;
}
.imagegallery {
margin-right: 0;
margin-left: 0;
div {
div {
.img-wrapper {
width: 98%;
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;
}
}
}
}
}
.section-inner-content {
padding: 17px 13px 20px 20px;
margin-bottom: 19px;
}
}
}
......@@ -1568,6 +1752,83 @@ $heading-font-family: 'Roboto-Bold';
}
}
@media (max-width: 1450px) and (min-width: 1200px) {
//accession-page
.accession-page {
.imagegallery div div .img-wrapper {
#accession-image-view {
font-size: 11px;
padding: 0 5px;
}
.image-frame .val {
margin-left: 0;
}
}
}
}
@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: 15px;
}
.basic-info {
margin-bottom: 19px;
.section-inner-content {
padding: 20px 20px 24px 21px;
p {
padding-left: 18px;
}
}
}
.imagegallery {
.section-inner-content {
padding: 20px 15px 26px 20px;
margin-bottom: 20px;
}
div div .img-wrapper {
margin-bottom: 5px;
}
}
.collect-info {
.section-inner-content {
padding: 18px 20px 26px 21px;
p {
padding-left: 18px;
}
}
}
.data-index {
.section-inner-content {
margin-bottom: 4px;
p {
padding-left: 19px;
}
.wrap-col {
width: 31.9%;
margin-right: 2.15%;
.row > div:last-child > p {
padding-left: 0;
}
}
}
}
}
}
@media (max-width: 989px) {
.genesys-page {
......@@ -2118,6 +2379,21 @@ $heading-font-family: 'Roboto-Bold';
}
}
@media (max-width: 850px) {
//accession page
.accession-page {
.basic-info .section-inner-content .row > div,
.basic-info .section-inner-content .row > div:nth-child(odd),
.basic-info .section-inner-content .row > div:nth-child(even),
.data-index .section-inner-content .wrap-col {
width: 100%;
}
.data-index .section-inner-content div > .row:last-child {
display: none;
}
}
}
@media (min-width: 1920px) {
.genesys-page {
#content .intro-text {
......@@ -2136,3 +2412,84 @@ $heading-font-family: 'Roboto-Bold';
}
}
}
@media(max-width: 380px) {
//accession page
.accession-page {
.container-fluid {
padding-left: 0;
padding-right: 0;
}
h1.green-bg {
margin: 0;
}
.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;
}
.basic-info {
.section-inner-content {
padding: 20px 0 27px 0;
margin: 0;
p {
line-height: 22px;
padding-left: 21px;
}
.row > div:first-child {
padding-top: 8px;
}
.row > div:last-child {
padding-bottom: 8px;
}
}
}
.imagegallery {
.section-inner-content {
padding: 20px 42px 26px 37px;
margin: 0 0 22px 0;
}
div div .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;
}
}
}
.data-index {
.section-inner-content {
margin: 0 0 20px 0;
padding: 20px 0 39px 0;
.wrap-col .row > div:last-child > p {
padding-right: 18px;
}
p {
padding-left: 21px;
}
}
.jumbotron {
margin: 0 18px 20px 23px;
padding: 5px 15px 23px 18px;
h3 {
margin: 14px 0 13px 0;
}
}
}
}
}
<!DOCTYPE html>
<%@include file="/WEB-INF/jsp/init.jsp"%>
<html>
<head>
<title><spring:message code="accession.page.profile.title" arguments="${accession.accessionName}"
argumentSeparator="|"
/></title>
<local:content-headers description="${jspHelper.htmlToText(blurp.summary, 150)}" title="${accession.accessionName} | ${accession.instituteCode}" keywords="${accession.accessionName}" />
</head>
<body class="accession-page" typeof="germplasm:GermplasmAccession">
<h1 class="green-bg">
<span property="dwc:catalogNumber">
<c:out value="${accession.accessionName}" />
</span>
<small property="dwc:institutionCode" datatype="germplasmType:wiewsInstituteID"><c:out value="${accession.instituteCode}" /></small>
</h1>
<div class="main-col-header acn">
<div class="" x-aid="${accession.id}">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<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>
</label>
</div>
</div>
</div>
<c:if test="${accession.historic eq true or accession.getClass().simpleName eq 'AccessionHistoric'}">
<div class="alert alert-warning">
<spring:message code="accession.this-is-a-historic-entry" />
</div>
</c:if>
<c:if test="${accession.inTrust eq true}">
<div class="alert alert-info">
<spring:message code="accession.inTrust.true" />
</div>
</c:if>
<c:if test="${accession.inSvalbard eq true}">
<div class="alert alert-info">
<spring:message code="accession.inSvalbard.true" />
</div>
</c:if>
<c:if test="${accession.mlsStatus eq true}">
<div class="alert alert-info">
<spring:message code="accession.mlsStatus.true" />
</div>
</c:if>
<%--
<c:if test="${accession.availability eq false}">
<div class="alert alert-warning">
<spring:message code="accession.not-available-for-distribution" />
</div>
</c:if>
<c:if test="${accession.availability eq true}">
<div class="alert alert-info">
<spring:message code="accession.available-for-distribution" />
</div>
</c:if>
--%>
<%--
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<c:url value="/wiews/${accession.institute.code}" />" itemprop="url">
<span itemprop="title" dir="ltr">${accession.institute.fullName}</span>
</a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<c:url value="/wiews/${accession.institute.code}/data" />" itemprop="url">
<span itemprop="title" dir="ltr">Accessions</span>
</a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a title="<spring:message code="accession.taxonomy-at-institute" arguments="${accession.taxonomy.genus}|||${accession.institute.code}" argumentSeparator="|||" />" href="<c:url value="/wiews/${accession.institute.code}/t/${accession.taxonomy.genus}" />" itemprop="url">
<span itemprop="title" dir="ltr">${accession.taxonomy.genus}</span>
</a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a title="<spring:message code="accession.taxonomy-at-institute" arguments="${accession.taxonomy.genus} ${accession.taxonomy.species}|||${accession.institute.code}" argumentSeparator="|||" />" href="<c:url value="/wiews/${accession.institute.code}/t/${accession.taxonomy.genus}/${accession.taxonomy.species}" />" itemprop="url">
<span itemprop="title" dir="ltr">${accession.taxonomy.genus} ${accession.taxonomy.species}</span>
</a>
</span>
</span>
</span>
</div>
--%>
<div class="crop-details">
<div class="basic-info">
<h4 class="section-heading">Basic info</h4>
<div class="section-inner-content">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.holdingInstitute" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<a property="dwc:institutionCode" href="<c:url value="/wiews/${accession.instituteCode}" />"> <c:out value="${accession.institute.fullName}" />
</a>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.holdingCountry" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<a href="<c:url value="/geo/${accession.institute.country.code3}" />"><c:out value="${accession.institute.country.getName(pageContext.response.locale)}" /></a>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.accessionName" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<c:out value="${accession.accessionName}" />
</p>
</div>
</div>
<c:if test="${crops ne null}">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.crop" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<c:forEach items="${crops}" var="crop">
<a href="<c:url value="/c/${crop.shortName}" />"><c:out value="${crop.getName(pageContext.response.locale)}" /></a>
</c:forEach>
</p>
</div>
</div>
</c:if>
<c:if test="${accession.countryOfOrigin ne null}">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.origin" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<img class="flag" src="<c:url value="${cdnFlagsUrl}" />/${accession.origin.toUpperCase()}.svg" /> <a href="<c:url value="/geo/${accession.origin}" />"> <c:out
value="${accession.countryOfOrigin.getName(pageContext.response.locale)}" />
</a>
</p>
</div>
</div>
</c:if>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="taxonomy.genus" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" property="dwc:genus">
<p>
<a href="<c:url value="/acn/t/${accession.taxonomy.genus}" />"><span dir="ltr" class="sci-name">
<c:out value="${accession.taxonomy.genus}" />
</span></a>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="taxonomy.species" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<a href="<c:url value="/acn/t/${accession.taxonomy.genus}/${accession.taxonomy.species}" />"><span class="sci-name" dir="ltr">
<c:out value="${accession.taxonomy.genus} ${accession.taxonomy.species}" />
</span></a> &mdash; <a href="<c:url value="/wiews/${accession.institute.code}/t/${accession.taxonomy.genus}/${accession.taxonomy.species}" />"><spring:message code="accession.taxonomy-at-institute"
arguments="${accession.taxonomy.genus} ${accession.taxonomy.species}|||${accession.institute.code}" argumentSeparator="|||" /></a>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="taxonomy.taxonName" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<span dir="ltr" class="sci-name">
<c:out value="${accession.taxonomy.taxonName}" />
</span>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.sampleStatus" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" property="germplasm:biologicalStatus">
<p>
<spring:message code="accession.sampleStatus.${accession.sampleStatus}" />
</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.storage" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<c:forEach items="${accession.stoRage}" var="storage">
<p>
<spring:message code="accession.storage.${storage}" />
</p>
</c:forEach>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<spring:message code="accession.acqDate" />
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
<c:out value="${accession.acquisitionDate}" />
</p>
</div>