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;
}
}
}
}
}
This diff is collapsed.
......@@ -9,8 +9,8 @@
/></title>
<local:content-headers description="${jspHelper.htmlToText(blurp.summary, 150)}" title="${accession.accessionName} | ${accession.instituteCode}" keywords="${accession.accessionName}" />
</head>
<body typeof="germplasm:GermplasmAccession">
<h1>
<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>
......
......@@ -11,17 +11,25 @@
</h5> --%>
<div class="row">
<c:forEach items="${pdci.independentItems}" var="item">
<div class="col-sm-3 col-xs-5 ${pdci[item] == 0 ? 'pdci-improve' : ''}">${item.toUpperCase()}</div>
<div class="col-sm-1 col-xs-1">${pdci[item]}</div>
<div class="col-sm-3 col-xs-10 ${pdci[item] == 0 ? 'pdci-improve' : ''}">
<p><c:out value="${item.toUpperCase()}" /></p>
</div>
<div class="col-sm-1 col-xs-2 text-right">
<p><c:out value="${pdci[item]}" /><p>
</div>
</c:forEach>
</div>
<%-- </div>
<h5>
<spring:message code="accession.pdci.dependent-items" />
</h5>
<div class="row">
<div class="row"> --%>
<c:forEach items="${pdci.dependentItems}" var="item">
<div class="col-sm-3 col-xs-5 ${pdci[item] == 0 ? 'pdci-improve' : ''}">${item.toUpperCase()}</div>
<div class="col-sm-1 col-xs-1">${pdci[item]}</div>
<div class="col-sm-3 col-xs-10 ${pdci[item] == 0 ? 'pdci-improve' : ''}">
<p><c:out value="${item.toUpperCase()}" /></p>
</div>
<div class="col-sm-1 col-xs-2 text-right">
<p><c:out value="${pdci[item]}" /></p>
</div>
</c:forEach>
</div>
<%-- <c:forEach items="${pdci.independentItems}" var="item">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment