Skip to content
GitLab
Commit dde8f323 authored by Matija Obreza's avatar Matija Obreza
Browse files

Genesys UX 2016 (accession)

parent 51044735
Hide whitespace changes
Inline Side-by-side
src/main/sourceapp/1/styles/genesys.scss
View file @ dde8f323
......@@ -1293,20 +1293,20 @@ $heading-font-family: 'Roboto-Bold';
background: #ffffff;
font-size: 18px;
padding: 15px 15px 14px 20px;
margin: 0 5px 3px 5px;
margin: 0 5px 2px 5px;
font-family: $heading-font-family;
}
.section-inner-content {
background: #ffffff;
padding: 17px 20px 39px 22px;
padding: 20px 20px 39px 22px;
margin: 0 5px;
.row {
margin: 0 0 5px 0;
}
.row:nth-child(odd) > div {
.row:nth-child(odd) > div > p {
background: #f8f7f5;
}
.row:nth-child(even) > div {
.row:nth-child(even) > div > p {
background: #f3f2ee;
}
div {
......@@ -1321,13 +1321,14 @@ $heading-font-family: 'Roboto-Bold';
}
}
.basic-info {
.flag {
width: 20px;
margin-right: 5px;
}
margin-bottom: 14px;
.section-inner-content {
.row > div {
width: 49.8%;
}
.row > div:nth-child(odd) {
margin-right: 0.2%;
.row > div:nth-child(odd) > p {
margin-right: 3px;
}
}
}
......@@ -1337,23 +1338,36 @@ $heading-font-family: 'Roboto-Bold';
padding-bottom: 28px;
}
}
.collect-site {
.section-inner-content {
margin-bottom: 20px;
}
}
.data-index {
.section-inner-content {
padding-bottom: 25px;
margin-bottom: 13px;
div > .row {
margin: 0 0 5px 0;
margin: 0 5px 13px 5px;
.text-right p {
border-right: 22px solid #ffffff;
padding-right: 21px;
}
.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;
}
.text-right:nth-child(3n) > p {
border-right: none;
}
div > .row > div {
margin: 0;
border-bottom: 5px solid #ffffff;
}
.row:nth-child(odd) > div > p {
background: transparent;
}
.row:nth-child(even) > div > p {
background: transparent;
}
.row {
background-color: #f3f2ee;
background-image: linear-gradient(transparent 51%, rgba(248,247,245,1) 49%);
background-size: 50px 89px;
}
}
.jumbotron {
......@@ -1379,7 +1393,7 @@ $heading-font-family: 'Roboto-Bold';
div {
div {
.img-wrapper {
width: 98%;
width: 97%;
margin-bottom: 11px;
cursor: pointer;
position: relative;
......@@ -1746,8 +1760,6 @@ $heading-font-family: 'Roboto-Bold';
padding-top: 22px;
}
}
}
}
}
......@@ -1767,6 +1779,15 @@ $heading-font-family: 'Roboto-Bold';
}
}
@media (max-width: 1198px) {
//accession-page
.accession-page {
.imagegallery div div .img-wrapper {
margin: 0 auto 15px auto;
}
}
}
@media (max-width: 990px) {
//accession-page
.accession-page {
......@@ -1781,7 +1802,7 @@ $heading-font-family: 'Roboto-Bold';
margin: 0 7px 20px 3px;
}
.section-heading {
padding-bottom: 15px;
padding-bottom: 16px;
}
.basic-info {
margin-bottom: 19px;
......@@ -1794,11 +1815,12 @@ $heading-font-family: 'Roboto-Bold';
}
.imagegallery {
.section-inner-content {
padding: 20px 15px 26px 20px;
padding: 20px 19px 26px 17px;
margin-bottom: 20px;
}
div div .img-wrapper {
margin-bottom: 5px;
width: 98%;
}
}
.collect-info {
......@@ -2374,22 +2396,21 @@ $heading-font-family: 'Roboto-Bold';
}
}
}
}
}
@media (max-width: 850px) {
@media (max-width: 767px) {
//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%;
.basic-info .section-inner-content .row > div:nth-child(odd) > p {
margin-right: 0;
}
.data-index .section-inner-content div > .row:last-child {
display: none;
.data-index .section-inner-content .text-right p {
border-right: none;
}
.data-index .section-inner-content .row {
background-size: 50px 90px;
}
}
}
......@@ -2413,6 +2434,28 @@ $heading-font-family: 'Roboto-Bold';
}
}
@media(max-width: 500px) {
//accession page
.accession-page {
.collect-site {
.section-inner-content {
font-size: 14px;
}
}
}
}
@media(max-width: 420px) {
//accession page
.accession-page {
.collect-site {
.section-inner-content {
font-size: 12px;
}
}
}
}
@media(max-width: 380px) {
//accession page
.accession-page {
......@@ -2441,17 +2484,20 @@ $heading-font-family: 'Roboto-Bold';
line-height: 22px;
padding-left: 21px;
}
.row > div:first-child {
.row > div:nth-child(odd) > p {
padding-top: 8px;
}
.row > div:last-child {
.row > div:nth-child(even) > p {
padding-bottom: 8px;
}
.add-space {
padding-bottom: 8px;
}
}
}
.imagegallery {
.section-inner-content {
padding: 20px 42px 26px 37px;
padding: 20px 44px 28px 36px;
margin: 0 0 22px 0;
}
div div .img-wrapper {
......@@ -2468,25 +2514,39 @@ $heading-font-family: 'Roboto-Bold';
}
}
}
.collect-site {
.section-inner-content {
font-size: 12px;
margin: 0 0 20px 0;
}
}
.data-index {
.section-inner-content {
margin: 0 0 20px 0;
padding: 20px 0 39px 0;
padding: 20px 0 26px 0;
.wrap-col .row > div:last-child > p {
padding-right: 18px;
}
p {
padding-left: 21px;
}
.text-right p {
padding-right: 19px;
}
}
.jumbotron {
margin: 0 18px 20px 23px;
margin: 0 20px 20px 20px;
padding: 5px 15px 23px 18px;
h3 {
margin: 14px 0 13px 0;
}
}
}
.data-section {
.section-inner-content {
margin: 0 0 20px 0;
}
}
}
}
......
src/main/webapp/WEB-INF/jsp/1/accession/details.jsp
View file @ dde8f323
......@@ -92,7 +92,8 @@
<div class="crop-details">
<div class="basic-info">
<h4 class="section-heading">Basic info</h4>
<h4 class="section-heading">
<spring:message code="accession.page.profile.title" arguments="${accession.accessionName}" argumentSeparator="|" /></h4>
<div class="section-inner-content">
<div class="row">
......@@ -290,6 +291,7 @@
</div>
</div>
<c:if test="${accession.duplSite ne null}">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<p>
......@@ -304,6 +306,7 @@
</c:forEach>
</div>
</div>
</c:if>
<c:if test="${accessionExchange ne null}">
......@@ -1004,7 +1007,7 @@
<content tag="javascript"> <c:if test="${accessionGeo ne null and accessionGeo.latitude ne null}">
<script type="text/javascript">
jQuery(document).ready(function() {
var map = L.map('map').setView([${accessionGeo.latitude}, ${accessionGeo.longitude}], 4);
var map = L.map('map', { scrollWheelZoom: false }).setView([${accessionGeo.latitude}, ${accessionGeo.longitude}], 4);
L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
attribution: "MapQuest",
styleId: 22677,
......
Supports Markdown
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