Skip to content

GitLab

Commit a15c5e5f authored by Matija Obreza's avatar Matija Obreza
Browse files

UI updates

parent 3beff0cc
Hide whitespace changes
Inline Side-by-side
Showing with 313 additions and 108 deletions
src/main/java/org/crophub/rest/servlet/controller/DatasetController.java
View file @ a15c5e5f
......@@ -56,6 +56,7 @@ public class DatasetController extends BaseController {
if (metadata == null) {
throw new ResourceNotFoundException();
}
model.addAttribute("page", page);
model.addAttribute("metadata", metadata);
model.addAttribute("methods", genesysService.listMethods(metadata));
......
src/main/resources/content/language.properties
View file @ a15c5e5f
......@@ -71,6 +71,8 @@ sample.message.invite.to.network = Invite to Network
data.error.404=The data you requested was not found in the system.
page.rendertime=Processing this page took {0}ms.
footer.copyright-statement=©2013 Global Crop Diversity Trust
user.pulldown.logout=Logout
user.pulldown.profile=View profile
......
src/main/webapp/WEB-INF/decorator/main.jsp
View file @ a15c5e5f
<%@include file="/WEB-INF/jsp/init.jsp"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<html>
<head>
<title><sitemesh:write property="title" /></title>
<%@include file="/WEB-INF/jsp/head-init.jsp"%>
<meta charset="utf-8">
<%--Locked Compatible Mode for IE--%>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link type="text/css" href="/html/css/bootstrap.css" rel="stylesheet" />
<link type="text/css" href="/html/css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="/html/js/jquery.min.js"></script>
<script type="text/javascript" src="/html/js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="/html/js/plugins.js"></script>
<script type="text/javascript" src="/html/js/jquery.validate.js"></script>
<script type="text/javascript" src="/html/js/custom.js"></script>
<link type="text/css" href="/html/css/jquery-ui.css" rel="stylesheet"/>
<link type="text/css" href="/html/css/jquery.dataTables.css" rel="stylesheet"/>
<%--Fallback for older browsers--%>
<script type="text/javascript" src="/html/js/json2.js"></script>
<script type="text/javascript" src="/html/js/globalize.js"></script>
<script type="text/javascript" src="/html/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/html/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/html/js/handlebars.js"></script>
<script type="text/javascript" src="/html/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/html/js/main.js"></script>
<sitemesh:write property="head" />
<title><sitemesh:write property="title" /></title>
<%@include file="/WEB-INF/jsp/head-init.jsp"%>
<meta charset="utf-8">
<%--Locked Compatible Mode for IE--%>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link type="text/css" href="/html/css/bootstrap.css" rel="stylesheet" />
<link type="text/css" href="/html/css/custom.css" rel="stylesheet" />
<script type="text/javascript" src="/html/js/jquery.min.js"></script>
<script type="text/javascript" src="/html/js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="/html/js/plugins.js"></script>
<script type="text/javascript" src="/html/js/jquery.validate.js"></script>
<script type="text/javascript" src="/html/js/custom.js"></script>
<link type="text/css" href="/html/css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="/html/css/jquery.dataTables.css" rel="stylesheet" />
<%--Fallback for older browsers--%>
<script type="text/javascript" src="/html/js/json2.js"></script>
<script type="text/javascript" src="/html/js/globalize.js"></script>
<script type="text/javascript" src="/html/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/html/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/html/js/handlebars.js"></script>
<script type="text/javascript" src="/html/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/html/js/main.js"></script>
<sitemesh:write property="head" />
</head>
<body>
<sec:authentication var="user" property="principal" />
<div class="container">
<div id="header">
<div class="page-header clearfix">
<div class="pull-left"><a href="<c:url value="/" />"><img src="<c:url value="/html/images/logo.png" />" /></a></div>
<!-- <h4 class="pull-left"><spring:message code="sample.message.welcome"/></h4> -->
<div class="navbar pull-right">
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" title="<spring:message code="sample.message.change.locale"/>">
<spring:message code="sample.message.current.locale"/>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="?lang=en"><spring:message code="sample.message.locale.en"/></a></li>
<li><a href="?lang=ru"><spring:message code="sample.message.locale.ru"/></a></li>
</ul>
</li>
</ul>
</div>
</div>
<sec:authorize access="isAuthenticated()">
<div class="container">
<div id="header">
<div class="clearfix">
<div class="pull-left">
<a href="<c:url value="/" />"><img style="" src="<c:url value="/html/images/logo2.png" />" /></a>
</div>
<!-- <h4 class="pull-left"><spring:message code="sample.message.welcome"/></h4> -->
<div class="navbar pull-right">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" title="<spring:message code="sample.message.change.locale"/>">
You are <b>${user.username}</b>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="<c:url value="/profile" />"><spring:message code="user.pulldown.profile"/></a></li>
<li><a href="<c:url value="/logout" />"><spring:message code="user.pulldown.logout"/></a></li>
</ul>
</li>
</ul>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" title="<spring:message code="sample.message.change.locale"/>"> <spring:message code="sample.message.current.locale" /> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="?lang=en"><spring:message code="sample.message.locale.en" /></a></li>
<li><a href="?lang=ru"><spring:message code="sample.message.locale.ru" /></a></li>
</ul></li>
</ul>
</div>
</div>
</sec:authorize>
</div>
</div>
<div id="content">
<div class="page-header">
<a href="<c:url value="/" />">Home</a>
<a href="<c:url value="/data/" />">Datasets</a>
<a href="<c:url value="/geo/" />">Countries</a>
<a href="<c:url value="/wiews/active" />">Institutes</a>
</div>
<sec:authorize access="isAuthenticated()">
<div class="navbar pull-right">
<ul class="nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" title="<spring:message code="sample.message.change.locale"/>"> You are <b>${user.username}</b> <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="<c:url value="/profile" />"><spring:message code="user.pulldown.profile" /></a></li>
<li><a href="<c:url value="/logout" />"><spring:message code="user.pulldown.logout" /></a></li>
</ul></li>
</ul>
</div>
</sec:authorize>
</div>
</div>
<div id="dialog"></div>
<div id="nav-main" class="clearfix">
<ul>
<li><a href="<c:url value="/" />">Home</a></li>
<li><a href="<c:url value="/data/" />">Datasets</a></li>
<li><a href="<c:url value="/geo/" />">Countries</a></li>
<li><a href="<c:url value="/wiews/active" />">Institutes</a></li>
</ul>
</div>
<div id="content" class="clearfix">
<sitemesh:write property="body" />
<div id="dialog"></div>
<!-- Processing time:
<div class="content-block clearfix">
<sitemesh:write property="body" />
</div>
<!-- Processing time:
<div class="footer clearfix" style="font-size: 80%"><spring:message code="page.rendertime" arguments="${springExecuteTime}" /></div>
-->
</div>
<div id="footer" class="clearfix">
<div id="nav-foot" class="clearfix">
<div class="pull-left">
<ul>
<li><a href="<c:url value="/" />">About</a></li>
<li><a href="<c:url value="/" />">Contact</a></li>
<li><a href="<c:url value="/" />">Disclaimer</a></li>
<li><a href="<c:url value="/" />">Feedback</a></li>
<li><a href="<c:url value="/" />">Help</a></li>
</ul>
</div>
<div class="pull-right">
<ul>
<li><a href="<c:url value="/" />">Terms and Conditions of Use</a></li>
<li><a href="<c:url value="/" />">Copyright Policy</a></li>
<li><a href="<c:url value="/" />">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="clearfix" id="copyright">
<div class="pull-left">
<a href="<c:url value="/" />"><img style="height: 2em; vertical-align: middle; position: relative; top: -0.3em" src="<c:url value="/html/images/logo2small.png" />" /></a>
<spring:message code="footer.copyright-statement" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
src/main/webapp/WEB-INF/jsp/accession/details.jsp
View file @ a15c5e5f
......@@ -83,6 +83,7 @@
<div>
<c:out value="${method.decode(val.value)}" />
<span class="uom"><c:out value="${method.unit}" /></span>
<sup><a href="#metadata-${val.experimentId}"><c:out value="${val.experimentId}" /></a></sup>
</div>
</c:forEach></td>
<td><c:out value="${method.method}" /></td>
......@@ -93,11 +94,12 @@
</c:if>
<c:if test="${metadatas.size() gt 0}">
<h2>
<h3>
<spring:message code="accession.metadatas" />
</h2>
</h3>
<c:forEach items="${metadatas}" var="metadata" varStatus="status">
<div>
<div class="targeted" id="metadata-${metadata.id}">
<sup><c:out value="${metadata.id}" /></sup>
<a href="<c:url value="/data/view/${metadata.id}" />"><c:out value="${metadata.title}" /></a>
<c:out value="${metadata.institute}" />
</div>
......
src/main/webapp/WEB-INF/jsp/country/data.jsp
View file @ a15c5e5f
......@@ -32,6 +32,7 @@
<table>
<thead>
<tr>
<td class="idx-col"></td>
<td><spring:message code="accession.accessionName" /></td>
<td><spring:message code="accession.origin" /></td>
<td><spring:message code="accession.taxonomy" /></td>
......@@ -41,7 +42,8 @@
</thead>
<tbody>
<c:forEach items="${accessions.content}" var="accession" varStatus="status">
<tr>
<tr class="${status.count % 2 == 0 ? 'even' : 'odd'}">
<td class="idx-col">${status.count + accessions.size * accessions.number}</td>
<td><a href="<c:url value="/acn/id/${accession.id}" />"><b><c:out value="${accession.accessionName}" /></b></a></td>
<td><c:out value="${country.name}" /></td>
<td><c:out value="${accession.taxonomy.taxonName}" /></td>
......
src/main/webapp/WEB-INF/jsp/country/index.jsp
View file @ a15c5e5f
......@@ -7,15 +7,34 @@
<title><spring:message code="country.page.list.title" /></title>
</head>
<body>
<h1><spring:message code="country.page.list.title" /></h1>
<h1>
<spring:message code="country.page.list.title" />
</h1>
<div id="letter-top" class="page-header">
<c:set value="" var="hoofdleter" />
<c:forEach items="${countries}" var="country" varStatus="status">
<c:if test="${hoofdleter ne country.name.substring(0, 1)}">
<c:set var="hoofdleter" value="${country.name.substring(0, 1)}" />
<a class="letter-pointer" href="#letter-${hoofdleter}"><c:out value="${hoofdleter}" /></a>
</c:if>
</c:forEach>
</div>
<c:set value="" var="hoofdleter" />
<ul>
<c:forEach items="${countries}" var="country" varStatus="status">
<li><a href="<c:url value="/geo/${country.code3.toLowerCase()}" />"><c:out value="${country.name}" /></a>
<c:if test="${not country.current}">(Historic entry)</c:if>
</li>
<c:if test="${hoofdleter ne country.name.substring(0, 1)}">
<c:set var="hoofdleter" value="${country.name.substring(0, 1)}" />
<li id="letter-${hoofdleter}" class="hoofdleter"><c:out value="${hoofdleter}" />
<small><a href="#letter-top">Back to top</a></small>
</li>
</c:if>
<li><a href="<c:url value="/geo/${country.code3.toLowerCase()}" />"><c:out value="${country.name}" /></a> <c:if test="${not country.current}">(Historic entry)</c:if></li>
</c:forEach>
</ul>
<c:remove var="hoofdleter" />
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/jsp/index.jsp
View file @ a15c5e5f
......@@ -8,19 +8,20 @@
</head>
<body>
<c:if test="${cropList ne null and cropList.size() gt 0}">
<div class="pull-left" style="width: 20%; margin-right: 5%;">
<p>Hello</p>
<c:if test="${cropList ne null and cropList.size() gt 0}">
<h3><spring:message code="crop.croplist"/></h3>
<ul>
<c:forEach items="${cropList}" var="crop" varStatus="status">
<li><a href="/c/${crop.shortName}"><c:out value="${crop.name}" /></a></li>
</c:forEach>
</ul>
</div>
</c:if>
</div>
<c:if test="${lastNews ne null}">
<div class="pull-left" style="width: 70%; margin-left: 5%">
<div class="pull-left" style="width: 65%; margin-left: 5%">
<h3><spring:message code="activity.recent-activity"/></h3>
<c:forEach items="${lastNews}" var="activityPost" varStatus="status">
<div class="activity-post">
......
src/main/webapp/WEB-INF/jsp/metadata/view.jsp
View file @ a15c5e5f
......@@ -8,9 +8,10 @@
</head>
<body>
<h3>
<a href="/data/view/${metadata.id}"><c:out value="${metadata.title}" /></a>
<c:out value="${metadata.title}" />
</h3>
<c:if test="${page eq 1}">
<table>
<tbody>
<c:forEach items="${methods}" var="method">
......@@ -41,16 +42,22 @@
</div>
<h3>Accessions</h3>
<h3>Observations</h3>
</c:if>
<div class="nav-header">
<spring:message code="paged.totalElements" arguments="${accessions.totalElements}" />
<br />
<spring:message code="paged.pageOfPages" arguments="${accessions.number+1},${accessions.totalPages}" />
<a href="?page=${accessions.number}">⇇ Previous</a> <a href="?page=${accessions.number + 2}">Next ⇉</a>
<a href="?page=${accessions.number}">⇇ Previous</a>
<a href="?page=${accessions.number + 2}">Next ⇉</a>
</div>
<table>
<thead>
<tr>
<td class="idx-col"></td>
<td><spring:message code="accession.accessionName" /></td>
<%-- <td><spring:message code="accession.origin" /></td>
--%> <td><spring:message code="accession.taxonomy" /></td>
......@@ -70,7 +77,8 @@
</thead>
<tbody>
<c:forEach items="${accessions.content}" var="accession" varStatus="status">
<tr>
<tr class="${status.count % 2 == 0 ? 'even' : 'odd'}">
<td class="idx-col">${status.count + accessions.size * accessions.number}</td>
<td><a href="<c:url value="/acn/id/${accession.id}" />"><b><c:out value="${accession.accessionName}" /></b></a></td>
<%-- <td><a href="<c:url value="/geo/${accession.origin.toLowerCase()}" />"><c:out value="${accession.countryOfOrigin.name}" /></a></td>
--%> <td><c:out value="${accession.taxonomy.taxonName}" /></td>
......
src/main/webapp/WEB-INF/jsp/wiews/data.jsp
View file @ a15c5e5f
......@@ -10,14 +10,14 @@
<h1>
<spring:message code="faoInstitute.accessions.at" arguments="${faoInstitute.fullName}" argumentSeparator="||," />
</h1>
<div>
<spring:message code="accessions.number" arguments="${accessions.totalElements}" />
</div>
<div>
<%-- <div>
<a href="<c:url value="/geo/${faoInstitute.country.code3.toLowerCase()}" />"><c:out value="${faoInstitute.country.name}" /></a>
</div>
</div> --%>
<div class="nav-header">
<spring:message code="accessions.number" arguments="${accessions.totalElements}" />
<br />
<spring:message code="paged.pageOfPages" arguments="${accessions.number+1},${accessions.totalPages}" />
<a href="?page=${accessions.number}">⇇ Previous</a>
<a href="?page=${accessions.number + 2}">Next ⇉</a>
......@@ -26,6 +26,7 @@
<table>
<thead>
<tr>
<td class="idx-col"></td>
<td><spring:message code="accession.accessionName" /></td>
<td><spring:message code="accession.origin" /></td>
<td><spring:message code="accession.taxonomy" /></td>
......@@ -35,7 +36,8 @@
</thead>
<tbody>
<c:forEach items="${accessions.content}" var="accession" varStatus="status">
<tr>
<tr class="${status.count % 2 == 0 ? 'even' : 'odd'}">
<td class="idx-col">${status.count + accessions.size * accessions.number}</td>
<td><a href="<c:url value="/acn/id/${accession.id}" />"><b><c:out value="${accession.accessionName}" /></b></a></td>
<td><a href="<c:url value="/geo/${accession.origin.toLowerCase()}" />"><c:out value="${accession.countryOfOrigin.name}" /></a></td>
<td><c:out value="${accession.taxonomy.taxonName}" /></td>
......
src/main/webapp/WEB-INF/jsp/wiews/index.jsp
View file @ a15c5e5f
......@@ -18,7 +18,13 @@
<div><a href="<c:url value="/wiews/active" />"><spring:message code="faoInstitutes.viewActiveOnly" /></a></div>
</c:if>
<div class="nav-header"><a href="?page=${faoInstitutes.number}">⇇ Previous</a> <a href="?page=${faoInstitutes.number + 2}">Next ⇉</a></div>
<div class="nav-header">
<spring:message code="paged.totalElements" arguments="${faoInstitutes.totalElements}" />
<br />
<spring:message code="paged.pageOfPages" arguments="${faoInstitutes.number+1},${faoInstitutes.totalPages}" />
<a href="?page=${faoInstitutes.number}">⇇ Previous</a>
<a href="?page=${faoInstitutes.number + 2}">Next ⇉</a>
</div>
<ul>
<c:forEach items="${faoInstitutes.content}" var="faoInstitute" varStatus="status">
......
src/main/webapp/html/css/custom.css
View file @ a15c5e5f
.genesys-bg {
background-color: #88ba41;
}
.alert.alert-info.inline {
display: inline-block;
padding: 4px 8px 4px 2px;
......@@ -12,6 +16,10 @@
font-size: 15px;
}
.nav-header {
padding: 1em 0;
}
#invite-list .btn{
padding: 2px 5px;
}
......@@ -25,6 +33,7 @@ table {
font-size: 12px;
}
table thead td {
font-size: 15px;
font-weight: normal;
......@@ -34,11 +43,30 @@ table thead td {
h1, h2, h3, h4 {
}
h1 {
font-size: 30px;
}
td {
vertical-align: top;
padding: 0.2em 0.5em;
}
td.idx-col {
font-size: 80%;
width: 4em;
/* background-color: #eaeaea; */
/* text-align: right; */
vertical-align: middle;
}
tr.odd td {
/* background-color: #f8f7f5; */
}
tr.even td {
/* background-color: #f3f2ee; */
}
.activity-post {
padding: 1em 0em;
}
......@@ -63,6 +91,115 @@ img.country-flag.bigger {
height: 50px;
}
li.hoofdleter {
font-size: 150%;
font-weight: bold;
list-style-type: none;
margin: 1em 0 0.5em;
}
li.hoofdleter small {
font-size: 10px;
margin-left: 3em;
}
.letter-pointer {
padding: 0 0.7em;
font-weight: bold;
}
.uom {
margin-left: 1em;
}
div.targeted:target {
background-color: #dfd0c0;
}
body {
background-color: #e8e5e0;
color: #4d4c47;
}
#content {
}
.content-block {
padding: 20px;
background-color: White;
}
.content-block *:FIRST-CHILD {
margin-top: 0;
padding-top: 0;
}
#header {
padding: 1em 1em 0.5em 1em;
background-color: #4d4c47;
}
#nav-main {
padding-bottom: 1em 2em 1em 2em;
background-color: #2a2924;
margin: 0 0 1em 0;
font-size: 12px;
}
#header a, #nav-main a, #footer a {
color: White;
font-weight: bold;
}
#nav-main ul {
margin: 0;
border-bottom: solid 3px White;
}
#nav-main ul li {
text-transform: uppercase;
display: inline-block;
padding: 0.7em 1em;
margin: 0;
}
#nav-main ul li:FIRST-CHILD {
}
#footer {
padding: 1em 1em 0.5em 1em;
border-top: solid 2px #909090;
background-color: #4d4c47;
margin: 4em 0 0 0;
color: White;
font-size: 11px;
/* position: absolute;
bottom: 0; */
}
#nav-foot ul {
margin: 0 0 1em 0;
}