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

UX updates

parent 0e1ac8ee
Hide whitespace changes
Inline Side-by-side
src/main/resources/content/language.properties
View file @ 18edea4c
......@@ -157,8 +157,8 @@ select-country=Select country
faoInstitutes.page.list.title=WIEWS Institutes
faoInstitutes.page.profile.title=WIEWS {0}
faoInstitutes.stat.accessionCount=Accessions in Genesys: {0}.
faoInstitutes.stat.datasetCount=Additional datasets in Genesys: {0}.
faoInstitutes.stat.accessionCount=Accessions in Genesys:
faoInstitutes.stat.datasetCount=Additional datasets in Genesys:
faoInstitute.stat-by-crop=Most represented Crops
faoInstitute.stat-by-genus=Most represented Genera
faoInstitute.stat-by-species=Most represented Species
......
src/main/sourceapp/styles/bootstrap.scss
View file @ 18edea4c
......@@ -34,8 +34,8 @@ body {
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11,
.col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
padding-left: 10px;
padding-right: 10px;
position: relative;
}
......
src/main/sourceapp/styles/genesys.scss
View file @ 18edea4c
......@@ -75,7 +75,7 @@ html, body {
}
#search .form-group {
width: 80%;
width: 70%;
}
#search .form-control {
......@@ -252,7 +252,7 @@ html[dir="rtl"] #header .nav .dropdown-menu .checkbox {
/* ---------------------------------------- Main Navigation ----------------------------------*/
.navbar.genesys-navbar {
#menubar-home {
display: none;
/* display: none;
img {
height: 20px;
......@@ -260,7 +260,12 @@ html[dir="rtl"] #header .nav .dropdown-menu .checkbox {
.site-wrapper.attached & {
display: inherit;
}
} */
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
background-color: inherit;
border-color: inherit;
}
.nav.navbar-nav {
......@@ -270,21 +275,23 @@ html[dir="rtl"] #header .nav .dropdown-menu .checkbox {
margin-top: -1px;
min-width: 285px;
li a:hover {
background:transparent !important;
}
li:hover{
background:#4d4d47;
background: transparent !important;
}
}
a{
background-color:#2e2d29;
i {
visibility: hidden;
color: White;
}
&:hover {
background:#4d4d47;
i {
visibility: visible;
}
}
}
i{
display: inline-block;
}
}
.dropdown a i{
display:none;
}
}
}
......@@ -393,7 +400,7 @@ html[dir="rtl"] .navbar#nav-main ul li a{
}
}
#content h2 {
h2 {
background: #88ba42;
color: #fff;
font-size: 14px;
......@@ -403,6 +410,16 @@ html[dir="rtl"] .navbar#nav-main ul li a{
text-transform: uppercase;
}
h2.short {
width: auto;
display: inline-block;
padding-right: 40px;
html[dir=rtl] & {
padding-right: inherit;
padding-left: 40px;
}
}
.free-text {
h1, h2, h3, h4 {
background-color: transparent;
......@@ -728,7 +745,6 @@ html[dir="rtl"] .tab-pane .all-posts .type-list .post-inner .post-content ol li
.tab-pane .all-posts .post-inner .post-content {
font-size: 12px;
margin: 0 10px 10px 0;
h3 {
font-size: 14px;
......@@ -1006,13 +1022,10 @@ html[dir="rtl"] #country-in-genesys table .alignleft {
}
#stats {
background-color: #C8C8C8;
height: 300px;
.stats-map {
/* background: #fff url('../images/pic_map_stats.png') no-repeat center center; */
background-color: #4d4c46;
color: #fff;
height: 300px;
position: relative;
@media (max-width: 767px) {
height: auto;
}
......@@ -2341,10 +2354,16 @@ table.terms-table td {
direction: ltr;
}
.twitter-share-button {
&[data-size=large] {
font-size: large;
}
.twitter-share-button, .linkedin-share-button {
i.fa {
color: White;
background-color: rgb(84, 118, 178);
border-radius: 100%;
padding: 0.2em;
}
&[data-size=large] {
font-size: large;
}
}
.article-timestamp {
......
src/main/sourceapp/styles/pages.scss
View file @ 18edea4c
......@@ -37,12 +37,12 @@
}
div.see-also-block {
min-height: 250px;
height: 250px;
min-height: 200px;
height: 200px;
position: relative;
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-position: top center;
div.content {
position: absolute;
......@@ -50,17 +50,8 @@ div.see-also-block {
z-index: 20;
width: 100%;
h2 {
text-transform: none;
font-size: 18px;
background: #88ba42;
padding: 15px 19px 15px;
font-family: 'Noto Sans';
.short {
display: inline-block;
max-width: 250px;
}
div.body {
min-height: 80px;
}
}
}
......@@ -92,15 +83,12 @@ div.see-also-block {
#content .right-side {
background-color: #fff;
padding: 32px 58px;
font-size: 17px;
p {
line-height: 29px;
margin-bottom: 30px;
}
ul, ol {
margin-bottom: 30px;
margin-bottom: 16px;
}
h2 {
......@@ -111,8 +99,8 @@ div.see-also-block {
}
.free-text > p:first-of-type {
font-size: 22px;
line-height: 35px;
font-size: 16px;
line-height: 1.6em;
font-weight: 100;
margin-bottom: 30px;
}
......@@ -214,7 +202,7 @@ div.see-also-block {
&:first-of-type {
border-top: 1px solid #c8c6c0;
}
&:hover{
&:hover, &.active-link{
background-color: #d0cfc9;
}
a {
......@@ -627,7 +615,12 @@ div.see-also-block {
margin-top: -10px;
div.genebank-text {
padding: 0 1em;
padding: 0px 0px 10px;
> .row {
margin-top: 5px;
margin-bottom: 5px;
}
}
h1 {
......@@ -651,7 +644,7 @@ div.see-also-block {
}
}
#map {
margin: 0 5px;
margin: 0px 10px;
height: 280px;
}
}
......
src/main/webapp/WEB-INF/decorator/menu.jsp
View file @ 18edea4c
......@@ -4,9 +4,9 @@
<div class="container">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li id="menubar-home" class="notimportant"><a href="<c:url value="/welcome" />" title="<spring:message code="menu.home" />"><img src="<c:url value="/html/images/genesys.png" />" /></a></li>
<li id="menubar-home" class=""><a href="<c:url value="/welcome" />" title="<spring:message code="menu.home" />"><spring:message code="menu.home" /><%-- <img src="<c:url value="/html/images/genesys.png" />" /> --%></a></li>
<li class="dropdown">
<a href="<c:url value="/content/about" />" class="dropdown-toggle" data-toggle="dropdown"><spring:message code="menu.about" /></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><spring:message code="menu.about" /></a>
<ul class="dropdown-menu about">
<li><a href="<c:url value="/content/about/about" />"><i class="fa fa-caret-right"></i> <spring:message code="menu.about" /></a></li>
<li><a href="<c:url value="/content/about/contact" />"><i class="fa fa-caret-right"></i> <spring:message code="menu.contact" /></a></li>
......
src/main/webapp/WEB-INF/jsp/accession/map.jsp
View file @ 18edea4c
......@@ -143,19 +143,46 @@
});
var map = L.map('map').setView([20,0], 2);
L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
/* L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
attribution: "MapQuest",
styleId: 22677,
subdomains: ['1','2','3','4'],
opacity: 0.6
}).addTo(map);
L.tileLayer("{s}/explore/tile/{z}/{x}/{y}?filter=" + '${jsonFilter}', {
attribution: "<a href='${props.baseUrl}'>Genesys</a>",
*/
/* L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
*/
var OpenMapSurfer_Grayscale = L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
maxZoom: 19,
attribution: 'Imagery from <a target="_blank" href="http://giscience.uni-hd.de/">GIScience Research Group, University of Heidelberg</a>, Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.tileLayer("{s}/explore/tile/{z}/{x}/{y}?filter=" + '${jsonFilter}', {
attribution: "Accession localities from <a href='${props.baseUrl}'>Genesys PGR</a>",
styleId: 22677,
subdomains: [${props.tileserverCdn}]
}).addTo(map);
/* var Stamen_TonerLines = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lines/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
opacity: 0.3,
minZoom: 0,
maxZoom: 20,
ext: 'png'
}).addTo(map);
var Acetate_labels = L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-labels/{z}/{x}/{y}.png', {
attribution: '&copy;2012 Esri & Stamen, Data from OSM and Natural Earth',
subdomains: '0123',
opacity: 0.6,
minZoom: 2,
maxZoom: 18
}).addTo(map); */
$("#selectArea").hide();
$("#selectArea").hide();
var filterJson =${jsonFilter};
var filterJsonObj = {};
if (typeof filterJson !== 'undefined') {
......
src/main/webapp/WEB-INF/jsp/content/article.jsp
View file @ 18edea4c
......@@ -103,5 +103,13 @@
</div>
</div>
<content tag="javascript">
<script type="text/javascript">
$(document).ready(function() {
$('a[href="' + window.location.pathname + '"]').parent().addClass('active-link');
});
</script>
</content>
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/jsp/index.jsp
View file @ 18edea4c
......@@ -11,7 +11,7 @@
<div class="row no-space intro">
<div class="hidden-xs col-sm-6">
<div class="intro-image">
<img src="<c:url value="/html/images/aim/accession.png" />" />
<img src="<c:url value="/html/images/aim/svalbard.jpg" />" />
</div>
</div>
<div class="col-xs-12 col-sm-6">
......@@ -30,22 +30,22 @@
<div class="row no-space">
<div id="stats" class="col-sm-4">
<%-- <h2>
<spring:message code="data-overview" />
</h2> --%>
<h2 class="short">
<spring:message code="maps.accession-map" />
</h2>
<div class="stats-map padding10">
<p><spring:message code="maps.accession-map.intro" /></p>
<div class="all-stats">
<%-- <div class="one-stat"><a href="<c:url value="/geo/" />"><spring:message code="stats.number-of-countries" arguments="${numberOfCountries}" /></a></div> --%>
<div class="one-stat">
<a href="<c:url value="/wiews/active" />">
<spring:message code="stats.number-of-institutes" arguments="${numberOfInstitutes}" />
<a href="<c:url value="/explore" />">
<spring:message code="stats.number-of-accessions" arguments="${numberOfAccessions}" />
</a>
</div>
<div class="one-stat">
<a href="<c:url value="/explore" />">
<spring:message code="stats.number-of-accessions" arguments="${numberOfAccessions}" />
<a href="<c:url value="/wiews/active" />">
<spring:message code="stats.number-of-institutes" arguments="${numberOfInstitutes}" />
</a>
</div>
</div>
......@@ -62,14 +62,14 @@
</div>
</div>
<div class="row see-also-row">
<div class="col-xs-12 col-sm-4">
<div class="hidden-xs row see-also-row">
<div class="col-sm-4">
<div class="see-also-block" style="background-image: url('<c:url value="/html/images/aim/three-1.jpg" />')">
<div class="content">
<h2 class="short">
<spring:message code="search.input.placeholder" />
</h2>
<div class="padding10 white-background">
<div class="padding10 white-background body">
<p><spring:message code="search.search-query-missing" /></p>
<form action="<c:url value="/acn/search" />" class="form-inline">
<div class="form-group">
......@@ -81,13 +81,13 @@
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="col-sm-4">
<div class="see-also-block" style="background-image: url('<c:url value="/html/images/aim/three-2.jpg" />')">
<div class="content">
<h2 class="short">
<spring:message code="organization.page.list.title" />
</h2>
<div class="padding10 white-background" dir="">
<div class="padding10 white-background body" dir="ltr">
<a href="<c:url value="/org/CGIAR" />">CGIAR International Genebanks</a>
&bull;
<a href="<c:url value="/org/EURISCO" />">ECPGR EURISCO network</a>
......@@ -99,13 +99,13 @@
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="col-sm-4">
<div class="see-also-block" x-href="<c:url value="/content/help/how-to-use-genesys" />" style="background-image: url('<c:url value="/html/images/aim/three-3.jpg" />')">
<div class="content">
<h2 class="short">
<spring:message code="menu.help" />
</h2>
<div class="padding10 white-background"><a><spring:message code="help.page.intro" /></a></div>
<div class="padding10 white-background body"><a><spring:message code="help.page.intro" /></a></div>
</div>
</div>
</div>
......
src/main/webapp/WEB-INF/jsp/wiews/details.jsp
View file @ 18edea4c
......@@ -41,7 +41,7 @@
--%>
<div class="row" id="genebank-info">
<div class="col-sm-9">
<div class="${faoInstitute.latitude ne null ? 'col-sm-9' : 'col-sm-12'}">
<div class="genebank-text">
<h1 property="schema:Organization#name">
<c:out value="${faoInstitute.fullName}" />
......@@ -80,16 +80,12 @@
</span>
</a>
</c:forEach>
</div>
<div class="col-sm-offset-3 col-sm-9 col-xs-12">
<a target="_blank" rel="nofollow"
href="<c:url value="http://www.fao.org/wiews-archive/institute.htm?i_l=EN&query_INVALIDINST=Y"><c:param name="query_INSTCODE" value="${faoInstitute.code}" /></c:url>"
>
<spring:message code="faoInstitute.wiewsLink" arguments="${faoInstitute.code}" />
</a>
</div>
</div>
<c:if test="${organizations.size() gt 0}">
......@@ -109,7 +105,7 @@
</div>
</c:if>
<c:if test="${faoInstitute.latitude ne null}">
<%-- <c:if test="${faoInstitute.latitude ne null}">
<div class="row">
<div class="col-xs-3"></div>
......@@ -127,7 +123,7 @@
</span>
</div>
</div>
</c:if>
</c:if> --%>
<div class="row">
<div class="col-xs-12">
......@@ -138,10 +134,12 @@
</div>
</div>
<div class="col-sm-3">
<div id="map" class="gis-map"></div>
</div>
<c:if test="${faoInstitute.latitude ne null}">
<div class="col-sm-3">
<div id="map" class="gis-map"></div>
</div>
</c:if>
</div>
......@@ -169,14 +167,23 @@
</h3>
<div class="row">
<div class="col-md-offset-2 col-md-10">
<div class="jumbotron">
<spring:message code="faoInstitutes.stat.accessionCount" arguments="${countByInstitute}" />
<br />
<spring:message code="faoInstitutes.stat.datasetCount" arguments="${datasetCount}" />
<c:if test="${datasetCount gt 0}">
<spring:message code="statistics.phenotypic.stats-text" arguments="${statisticsPheno.elStats}" />
</c:if>
</div>
<ul class="funny-list statistics">
<li class="clearfix odd">
<span class="stats-number">
<fmt:formatNumber value="${countByInstitute}" />
</span>
<spring:message code="faoInstitutes.stat.accessionCount" />
</li>
<li class="clearfix even">
<span class="stats-number">
<fmt:formatNumber value="${datasetCount}" />
</span>
<spring:message code="faoInstitutes.stat.datasetCount" />
</li>
</ul>
<c:if test="${datasetCount gt 0}">
<spring:message code="statistics.phenotypic.stats-text" arguments="${statisticsPheno.elStats}" />
</c:if>
<c:if test="${countByInstitute gt 0}">
<form class="form-horizontal" method="post" action="/download/wiews/${faoInstitute.code}/download">
......
src/main/webapp/mail/newsletter.html
View file @ 18edea4c
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<style type="text/css">
body{
margin:0;
font-family: "Roboto",Helvetica,Arial,sans-serif;
font-family:"Roboto",Helvetica,Arial,sans-serif;
}
a{
color:#006db4;
font-weight: bold;
font-weight:bold;
}
.mail-newsletter{
width:100%;
border-collapse: collapse;
border-collapse:collapse;
}
.head{
background-image: url("logo-mail.png");
height:118px;
background-position: 32% 35%;
background-color:#4d4c46;
background-repeat:no-repeat;
background-color: #4d4c46 ;
}
.follow-header{
display:inline-block;
width: 77%;
text-align:right;
border-bottom:solid 3px white;
}
.follow-header a{
display: inline-block;
height: 20px;
width: 72px;
vertical-align: middle;
/* border-right:1px solid #fff; */
display:inline-block;
height:20px;
width:72px;
float:right;
position:relative;
top:35px;
}
.twitter{
background: url("twitter.png")no-repeat 50% 0;
margin-left: 40px;
/* border-left:1px solid #fff; */
background:url("https://gallery.mailchimp.com/8824cec5c244b238f7b2583d1/images/306c524b-d200-43c1-bffd-c370843c9e0b.png")no-repeat 50% 0;
margin-left:40px;
}
.facebook {
background: url("facebook.png") no-repeat 50% 0;
.facebook{
background:url("https://gallery.mailchimp.com/8824cec5c244b238f7b2583d1/images/f087e366-3290-423b-a110-ecbe28d4116a.png") no-repeat 50% 0;
}
.linkedin {
background: url("linkedin.png") no-repeat 50% 0;
.linkedin{
background:url("https://gallery.mailchimp.com/8824cec5c244b238f7b2583d1/images/9e03d2ea-e228-4c37-a3c5-75a48756153d.png") no-repeat 50% 0;
}
.grey{
background:#e7e5df;
}
.child{
border-collapse: collapse;
border-collapse:collapse;
width:650px;
margin:0 auto;
}
.child, .info{
width: 650px;
margin: 0 auto;
background: #fff;
.info{
background:#fff;
width:650px;
}
.banner{
background: url("banner-mail.png") no-repeat 50% 0;
height:335px;
position:relative;
}
.banner>img{
max-width:100%;
float:left;
}