Commit 256c1ab8 authored by Svetlana Alieksieieva's avatar Svetlana Alieksieieva Committed by Matija Obreza

Issue #123-fix-all-crops-list-page

parent 828fb69b
......@@ -155,6 +155,7 @@ user.page.list.title=Registered user accounts
crop.crops-directory=Genesys crops directory
crop.croplist=Crop list
crop.all-crops=All crops
crop.crops=Crops
crop.taxonomy-rules=Taxonomic rules
crop.view-descriptors=View crop descriptors...
crop.page.edit.title=Edit {0}
......
......@@ -1277,16 +1277,6 @@ $light-font-family: 'Roboto-Light';
}
}
}
}
//LTR and RTL rules outside genesys-page class
//crop-list-table
#crop-list-titles {
&.container {
@media (min-width: 1200px) {
width: 1100px;
}
}
.header-search {
display: none;
......@@ -1373,9 +1363,76 @@ $light-font-family: 'Roboto-Light';
.searchbox-open {
width: 467px;
}
}
//LTR and RTL rules outside genesys-page class
//crop-list-table
.crop-header {
background: #D4D2C7;
padding: 15px 0px;
}
.crop-header-bottom {
background: #D4D2C7;
padding: 25px 0px;
}
.crop-hr {
border-top: 1px solid #B2AFA6;
margin: 0 -15px;
}
.bold {
font-weight: bold;
}
.crop-title-wrap {
padding: 0 5px;
@media (max-width: 767px) {
display: block;
}
}
.crop-title {
font-size: 17px;
}
.divider {
@media (max-width: 767px) {
display: none;
}
}
#crop-list-titles {
&.container {
padding-bottom: 20px;
padding-top: 10px;
@media (min-width: 600px) and (max-width: 767px) {
max-width: 500px;
}
@media (min-width: 1200px) {
width: 1150px;
}
@media (min-width: 1520px) {
width: 1470px;
}
@media (max-width: 499px) {
max-width: 320px;
}
}
.crop-wrap {
padding-top: 7px;
text-align: center;
margin-bottom: 35px;
margin: 10px 11px 10px;
background: #fff;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1), 0px 2px 2px 0px rgba(0, 0, 0, 0.1), 0px 1px 1px -1px rgba(0, 0, 0, 0.1);
@media (max-width: 499px){
margin: 10px 0px 10px;
}
& > a {
position: absolute;
......@@ -1385,29 +1442,76 @@ $light-font-family: 'Roboto-Light';
bottom: 0;
z-index: 10;
}
.crop-inner-hr {
border-top: 1px solid #D4D4D4;
margin: 0 -15px;
}
}
.col-xs-6 {
width: 100%;
@media (min-width: 500px) {
width: 45.1%;
}
}
.col-sm-3 {
@media (min-width: 768px){
width: 30.2%;
}
@media (min-width: 992px){
width: 22.6%;
}
}
.col-lg-2 {
@media (min-width: 1200px){
width: 20%;
width: 22.9%;
}
@media (min-width: 1520px){
width: 14.7%;
}
}
img {
margin: 0 auto;
background: #fff;
font-size: 0;
}
.img-wrap {
background-image: url(../images/ICON-MISSING.svg);
width: 60px;
height: 60px;
max-height: 110px;
margin: 0 auto;
@media (min-width: 768px) {
width: 60px;
height: 60px;
}
@media (max-width: 767px) and (min-width: 400px) {
width: 120px;
height: 120px;
@media (max-width: 767px) and (min-width: 500px) {
width: 90px;
height: 90px;
}
@media (max-width: 499px) {
width: 80px;
height: 80px;
}
}
p {
color: #7BB342;
color: #006db4;
font-size: 19px;
margin: 0 0 7px;
}
span {
color: #999;
font-size: 11px;
padding: 6px 0 8px;
display: inline-block;
}
}
......
......@@ -6,28 +6,56 @@
<head>
<title><spring:message code="crop.croplist" /></title>
</head>
<body>
<h1>
<spring:message code="crop.croplist" />
</h1>
<span><spring:message code="stats.number-of-crops" arguments="${cropsMap.size()}"/></span><br/>
<span><spring:message code="stats.number-of-accessions" arguments="${numberOfActiveAccessions}"/></span><br/>
<span><spring:message code="stats.number-of-institutes" arguments="${numberOfInstitutes}"/></span><br/>
<span><spring:message code="stats.number-of-countries" arguments="${numberOfCountries}"/></span><br/>
<div class="row">
<div id="crop-list-titles" class="container">
<c:forEach var="entry" items="${cropsMap}">
<div class="col-xs-6 col-sm-3 col-lg-2 crop-wrap">
<a class="fff" href="<c:url value="/c/${entry.key.shortName}" />"></a>
<img class="img-responsive" src="/html/1/images/<c:out value="${entry.key.shortName}"/>.png"/>
<p><c:out value="${entry.key.getName(pageContext.response.locale)}" /></p>
<span><fmt:formatNumber value = "${entry.value}" type = "number"/> <spring:message code="search.section.accession" /></span>
</div>
</c:forEach>
</div>
</div>
</body>
<body>
<div class="informative-h1 green-bg row">
<div class="col-xs-12">
<h1>
<spring:message code="crop.croplist" />
</h1>
<p><spring:message code="crop.crops-directory" /></p>
</div>
</div>
<div class="row crop-header">
<div class="col-xs-12">
<span class="bold crop-title crop-title-wrap">Summary</span>
<span class="divider">|</span>
<span class="crop-title-wrap">
<span class="bold"><fmt:formatNumber value = "${cropsMap.size()}" type = "number"/></span>
<span class="crop-title"><spring:message code="crop.crops" /></span>
</span>
<span class="divider">|</span>
<span class="crop-title-wrap">
<span class="bold"><fmt:formatNumber value = "${numberOfActiveAccessions}" type = "number"/></span>
<span class="crop-title"><spring:message code="search.section.accession" /></span>
</span>
<span class="divider">|</span>
<span class="crop-title-wrap">
<span class="bold"><fmt:formatNumber value = "${numberOfInstitutes}" type = "number"/></span>
<span class="crop-title"><spring:message code="menu.institutes" /></span></span>
</span>
<span class="divider">|</span>
<span class="crop-title-wrap">
<span class="bold"><fmt:formatNumber value = "${numberOfCountries}" type = "number"/></span>
<span class="crop-title"><spring:message code="menu.countries"/></span>
</span>
</div>
</div>
<hr class="crop-hr">
<div class="row">
<div id="crop-list-titles" class="container">
<c:forEach var="entry" items="${cropsMap}">
<div class="col-xs-6 col-sm-3 col-lg-2 crop-wrap">
<a class="fff" href="<c:url value="/c/${entry.key.shortName}" />"></a>
<div class="img-wrap">
<img class="img-responsive icon" src="/html/1/images/<c:out value="${entry.key.shortName}"/>.png" alt="<c:out value="${entry.key.shortName}"/>"/>
</div>
<p class="bold"><c:out value="${entry.key.getName(pageContext.response.locale)}" /></p>
<hr class="crop-inner-hr">
<span><fmt:formatNumber value = "${entry.value}" type = "number"/> <spring:message code="search.section.accession" /></span>
</div>
</c:forEach>
</div>
</div>
<div class="row crop-header-bottom"></div>
</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