“All crops” page

src/main/sourceapp/1/styles/genesys.scss

@@ -1276,7 +1276,16 @@ $light-font-family: 'Roboto-Light';
         line-height: 20px;
       }
     }
+  }
+}
+//LTR and RTL rules outside genesys-page class
 
+//crop-list-table
+#crop-list-titles {
+  &.container {
+    @media (min-width: 1200px) {
+      width: 1100px;
+    }
   }
 
   .header-search {
@@ -1364,8 +1373,43 @@ $light-font-family: 'Roboto-Light';
   .searchbox-open {
     width: 467px;
   }
+  .crop-wrap {
+    text-align: center;
+    margin-bottom: 35px;
+
+    & > a {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      z-index: 10;
+    }
+  }
+
+  .col-lg-2 {
+    @media (min-width: 1200px){
+      width: 20%;
+    }
+  }
+
+  img {
+    margin: 0 auto;
+
+    @media (min-width: 768px) {
+      width: 60px;
+      height: 60px;
+    }
+    @media (max-width: 767px) and (min-width: 400px) {
+      width: 120px;
+      height: 120px;
+    }
+  }
+
+  p {
+    color: #7BB342;
+  }
 }
-//LTR and RTL rules outside genesys-page class
 
 //header
 #navbar .header-search form.form-inline .form-group:before {

src/main/webapp/WEB-INF/jsp/crop/list.jsp

@@ -11,23 +11,19 @@
 		<spring:message code="crop.croplist" />
 	</h1>
 
-	<ul class="funny-list">
-		<c:forEach items="${crops}" var="crop" varStatus="status">
-			<li class="clearfix ${status.count % 2 == 0 ? 'even' : 'odd'}">
-				<div class="row">
-					<div class="col-xs-4">
-						<a class="show pull-left" href="<c:url value="/c/${crop.shortName}" />"><c:out value="${crop.getName(pageContext.response.locale)}" /></a>
-					</div>
-					<div class="col-xs-8">
-						<span style="margin: 0 1em; white-space: nowrap;"><c:out value="${crop.shortName}" /></span>
- 						<c:forEach items="${crop.otherNames}" var="otherName">
-							<span style="margin: 0 1em; white-space: nowrap;"><c:out value="${otherName}" /></span>
-						</c:forEach>
-					</div>
+	<div class="row">
+		<div id="crop-list-titles" class="container">
+			<c:forEach items="${crops}" var="crop" varStatus="status">
+				<div class="col-xs-6 col-sm-3 col-lg-2 crop-wrap">
+					<a class="fff" href="<c:url value="/c/${crop.shortName}" />"></a>
+					<img class="img-responsive" src="/html/1/images/<c:out value="${crop.shortName}"/>.png"/>
+					<p>
+						<c:out value="${crop.getName(pageContext.response.locale)}" />
+					</p>
 				</div>
-			</li>
-		</c:forEach>
-	</ul>
+			</c:forEach>
+		</div>
+	</div>
 
 </body>
 </html>
\ No newline at end of file