Skip to content

GitLab

Genesys Backend
Genesys Backend
Commit dde8f323 authored by Matija Obreza's avatar Matija Obreza
Browse files
Options

Genesys UX 2016 (accession)

parent 51044735
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 44 deletions
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,
......
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