Commit 63ef3b93 authored by Matija Obreza's avatar Matija Obreza
Browse files

Genesys UX 2016 (crop)

parent 36b2f66b
......@@ -75,7 +75,7 @@ public class CropController extends BaseController {
model.addAttribute("cropCount", genesysService.countAccessions(appliedFilters));
model.addAttribute("jsonFilter", appliedFilters.toString());
model.addAttribute("cropRules", cropService.getCropRules(crop));
model.addAttribute("cropTaxonomies", cropService.getCropTaxonomies(crop, new PageRequest(0, 20, new Sort("taxonomy.genus", "taxonomy.species"))));
model.addAttribute("cropTaxonomies", cropService.getCropTaxonomies(crop, new PageRequest(0, 21, new Sort("taxonomy.genus", "taxonomy.species"))));
model.addAttribute("blurp", contentService.getArticle(crop, "blurp", getLocale()));
// model.addAttribute("statsGenus",
......@@ -119,7 +119,7 @@ public class CropController extends BaseController {
if (crop == null || page < 1) {
throw new ResourceNotFoundException();
}
final Page<CropTaxonomy> res = cropService.getCropTaxonomies(crop, new PageRequest(page - 1, 20, new Sort("taxonomy.genus", "taxonomy.species")));
final Page<CropTaxonomy> res = cropService.getCropTaxonomies(crop, new PageRequest(page - 1, 21, new Sort("taxonomy.genus", "taxonomy.species")));
model.addAttribute("cropTaxonomies", res);
if (res.getNumberOfElements() == 0) {
throw new ResourceNotFoundException();
......
......@@ -12,6 +12,7 @@ $about-text: #4d4c46;
$default-font-family: 'Roboto-Regular';
$emphasis-font-family: 'Roboto-Medium';
$heading-font-family: 'Roboto-Bold';
$light-font-family: 'Roboto-Light';
@font-face {
font-family: $heading-font-family;
......@@ -1449,6 +1450,156 @@ $heading-font-family: 'Roboto-Bold';
}
}
//crop page
.crop-page {
.collect-info {
margin: 0 5px 0 5px;
}
.section-heading {
background: #ffffff;
font-size: 18px;
padding: 15px 15px 15px 18px;
margin: 0 0 2px 0;
font-family: $heading-font-family;
}
.section-inner-content {
background: #ffffff;
padding: 20px 20px 27px 18px;
}
.green-bg {
color: #ffffff;
font-family: $heading-font-family;
margin: 0 -15px 22px -15px;
font-size: 24px;
padding: 18px 15px 22px 20px;
}
.about-section {
margin-bottom: 19px;
.section-inner-content {
padding-bottom: 10px;
}
.preview {
p {
color: #4D4C46;
padding-left: 0;
font-family: $light-font-family;
font-size: 24px;
line-height: 36px;
margin: 10px 0 25px 0;
}
}
.free-text {
div:last-child {
padding-left: 0;
}
p {
color: #4D4C46;
font-size: 18px;
font-family: $default-font-family;
line-height: 30px;
margin: 0 0 30px 0;
}
-webkit-column-count: 3;
-moz-column-count: 2;
column-count: 2;
column-gap: 3em;
}
}
.general-info {
margin-bottom: 21px;
.section-inner-content {
padding: 20px 18px 31px 18px;
}
.statistics {
.row > div:first-child {
margin-bottom: 21px;
}
p {
font-size: 14px;
font-family: $default-font-family;
margin: 0;
line-height: 38px;
background: #f8f7f5;
padding-left: 22px;
.stats-number {
font-size: 14px;
font-family: $heading-font-family;
display: inline-block;
padding-left: 20px;
border-left: 2px solid #ffffff;
margin-left: 80px;
}
}
.btn {
padding: 5px 17px;
font-size: 13px;
border-radius: 0;
border: 1px solid #91918D;
margin-right: 4px;
text-transform: uppercase;
&:first-child {
color: #ffffff;
span {
color: #ffffff;
}
}
span {
color: #707070;
margin-right: 5px;
}
}
}
}
.map-section {
margin-bottom: 20px;
.map-wrapper {
width: 77%;
margin: 0 auto;
img {
width: 100%;
}
}
}
.tax-rules {
margin-bottom: 11px;
.section-inner-content {
padding: 20px 20px 51px 18px;
.row {
background-color: #F8F7F5;
background-image: linear-gradient(transparent 51%, rgba(243,242,238,1) 49%);
background-size: 50px 90px;
margin: 0;
div {
border-bottom: 5px solid #ffffff;
padding: 0;
&:nth-child(3n+2) {
p {
border-left: 8px solid #ffffff;
border-right: 10px solid #ffffff;
}
}
&:nth-child(3n) {
p {
border-right: none;
border-left: 13px solid #ffffff;
}
}
}
p {
margin: 0;
line-height: 40px;
font-size: 14px;
padding-left: 22px;
border-right: 13px solid #ffffff;
font-family: $default-font-family;
}
}
}
}
}
@media (min-width: 990px) and (max-width: 1919px) {
......@@ -1785,7 +1936,18 @@ $heading-font-family: 'Roboto-Bold';
.imagegallery div div .img-wrapper {
margin: 0 auto 15px auto;
}
}
//crop page
.crop-page {
.map-section .map-wrapper {
width: 100%;
}
.free-text {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
}
@media (max-width: 990px) {
......@@ -1850,7 +2012,14 @@ $heading-font-family: 'Roboto-Bold';
}
@media (max-width: 991px) {
//crop page
.crop-page {
.about-section .free-text div:last-child {
padding-left: 15px;
}
}
}
@media (max-width: 989px) {
.genesys-page {
......@@ -2413,6 +2582,22 @@ $heading-font-family: 'Roboto-Bold';
background-size: 50px 90px;
}
}
//crop page
.crop-page {
.tax-rules .section-inner-content .row div:nth-child(3n) p,
.tax-rules .section-inner-content .row div:nth-child(3n+2) p,
.tax-rules .section-inner-content .row p {
border: none;
}
.general-info .statistics p .stats-number {
margin-left: 5px;
padding-left: 10px;
}
.general-info .statistics .btn {
display: inline-block;
margin: 0 0 10px 0;
}
}
}
@media (min-width: 1920px) {
......@@ -2548,6 +2733,19 @@ $heading-font-family: 'Roboto-Bold';
}
}
}
//crop page
.crop-page {
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.green-bg {
margin: 0 0 20px 0;
}
.collect-info {
margin: 0 0 20px 0;
}
}
}
......
<%@include file="/WEB-INF/jsp/init.jsp"%>
<c:forEach items="${cropTaxonomies.content}" var="cropTaxonomy" varStatus="status">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<p>
<a href="<c:url value="/acn/t/${cropTaxonomy.taxonomy.genus}/${cropTaxonomy.taxonomy.species}" />"><c:out value="${cropTaxonomy.taxonomy.taxonName}" /></a>
</p>
</div>
</c:forEach>
<!DOCTYPE html>
<%@include file="/WEB-INF/jsp/init.jsp" %>
<html>
<head>
<title><c:out value="${crop.getName(pageContext.response.locale)}" /></title>
<meta name="description" content="<c:out value="${jspHelper.htmlToText(blurp.summary)}" />" />
</head>
<body class="crop-page">
<h1 class="green-bg"><c:out value="${crop.getName(pageContext.response.locale)}"/></h1>
<security:authorize access="hasRole('ADMINISTRATOR') or hasPermission(#crop, 'ADMINISTRATION')">
<a href="<c:url value="/acl/${crop.getClass().name}/${crop.id}/permissions"><c:param name="back"><c:url value="/c/${crop.shortName}" /></c:param></c:url>"
class="close">
<spring:message code="edit-acl"/>
</a>
</security:authorize>
<security:authorize access="hasRole('ADMINISTRATOR') or hasRole('CONTENTMANAGER') or hasPermission(#crop, 'ADMINISTRATION')">
<a href="<c:url value="/c/${crop.shortName}/edit" />" class="close">
<spring:message code="edit"/>
</a>
</security:authorize>
<c:if test="${crop eq null}">
<div class="alert alert-error">
<spring:message code="data.error.404"/>
</div>
</c:if>
<c:if test="${blurp ne null}">
<div class="collect-info about-section">
<div class="section-inner-content">
<div class="row">
<div class="preview col-lg-6 col-md-6 col-sm-12 col-xs-12">
<c:out value="${blurp.summary}" escapeXml="false" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<%@include file="/WEB-INF/jsp/content/include/blurp-display.jsp"%>
</div>
</div>
</div>
</div>
</c:if>
<div class="collect-info general-info">
<h4 class="section-heading">
<spring:message code="heading.general-info" />
</h4>
<div class="section-inner-content">
<div class="statistics">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>
<spring:message code="faoInstitutes.stat.accessionCount" />
<span class="stats-number">
<fmt:formatNumber value="${cropCount}" />
</span>
</p>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a class="btn btn-primary" title="" href="<c:url value="/c/${crop.shortName}/data" />"> <span class="glyphicon glyphicon-list"></span> <spring:message code="view.accessions" /></a> <a
class="btn btn-default" title="" href="<c:url value="/c/${crop.shortName}/overview" />"> <span class="glyphicon glyphicon-eye-open"></span> <spring:message code="data-overview.short" /></a> <a
class="btn btn-default" href="<c:url value="/c/${crop.shortName}/descriptors" />"><spring:message code="crop.view-descriptors" /></a>
</div>
</div>
</div>
</div>
</div>
<div class="collect-info map-section">
<h4 class="section-heading"><spring:message code="chart.collections.title" /></h4>
<div class="section-inner-content clearfix">
<div class="map-wrapper">
<div id="cropMap" style="min-height: 500px; min-width: 200px; margin: 0 auto"></div>
</div>
</div>
</div>
<div class="collect-info tax-rules">
<h4 class="section-heading"><spring:message code="crop.taxonomy-rules"/></h4>
<div class="section-inner-content">
<div class="row">
<c:forEach items="${cropRules}" var="rule">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<p class="${rule.included ? '' : 'excluded'}">
<b>${rule.included ? '+' : '-'}</b>
<c:out value="${rule.genus}" />
<c:out value="${rule.species eq null ? '*' : rule.species}" />
</p>
</div>
</c:forEach>
<c:forEach items="${cropTaxonomies.content}" var="cropTaxonomy" varStatus="status">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<p>
<a href="<c:url value="/acn/t/${cropTaxonomy.taxonomy.genus}/${cropTaxonomy.taxonomy.species}" />"><c:out value="${cropTaxonomy.taxonomy.taxonName}" /></a>
</p>
</div>
</c:forEach>
<c:if test="${cropTaxonomies.hasNext()}">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<p id="loadMoreTaxonomies">
<spring:message code="label.load-more-data" />
</p>
</div>
</c:if>
</div>
</div>
</div>
<content tag="javascript">
<script type="text/javascript">
jQuery(document).ready(function () {
$("body").on("click", "#loadMoreTaxonomies", function (event) {
event.preventDefault();
var loader = $(this);
var page = loader.attr("page") || 2;
$.ajax({
url: "<c:url value="/c/${crop.shortName}/ajax/taxonomies" />",
type: "GET",
data: {
"page": page
},
success: function (data) {
loader.parent().before(data);
loader.attr("page", parseInt(page) + 1);
},
error: function (err) {
loader.remove();
}
});
});
});
</script>
<script type="text/javascript" src="<c:url value="/html/js/genesyshighcharts.min.js" />"></script>
<script type="text/javascript">
$(function () {
'use strict';
$.getJSON('/${pageContext.response.locale}/explore/0/charts/data/country-collection-size?filter=${jsonFilter}', function (data) {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
$('#cropMap').highcharts('Map', {
chart: {
borderWidth: 0
},
title: {
text: '<spring:message code="chart.collections.title" />'
},
<%--
subtitle: {
text: '<spring:message code="chart.attribution-text" />'
},
--%>
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top'
}
},
series: [{
name: 'World',
mapData: mapData,
color: '#88ba42',
enableMouseTracking: false
}, {
type: 'mapbubble',
mapData: mapData,
name: '<spring:message code="chart.collections.series" />',
joinBy: ['iso-a2', 'code'],
data: data,
sizeBy: 'width',
color: '#88ba42',
minSize: '3',
maxSize: '30%',
tooltip: {
pointFormat: '{point.country}: {point.z}'
}
}]
});
});
});
</script>
</content>
</body>
</html>
\ No newline at end of file
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