Skip to content

GitLab

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

Country list style

parent ce6f1808
Hide whitespace changes
Inline Side-by-side
src/main/java/org/genesys2/server/servlet/controller/CountryController.java
View file @ fe02af8f
......@@ -19,6 +19,7 @@ package org.genesys2.server.servlet.controller;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.List;
import java.util.stream.Collectors;
import javax.servlet.http.HttpServletRequest;
......@@ -63,7 +64,12 @@ public class CountryController extends BaseController {
@RequestMapping
public String view(ModelMap model) {
model.addAttribute("countries", geoService.listActive(getLocale()));
List<Country> countries = geoService.listActive(getLocale());
model.addAttribute("countries", countries);
List<String> firstLetters = countries.stream().map(country -> country.getName(getLocale()).substring(0, 1)).distinct().collect(Collectors.toList());
model.addAttribute("firstLetters", firstLetters);
return "/country/index";
}
......
src/main/sourceapp/1/images/ICON-OVERVIEW.svg 0 → 100644
View file @ fe02af8f
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9.8 9.8" style="enable-background:new 0 0 9.8 9.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#717171;}
</style>
<path class="st0" d="M7.7,6.8c1.2-1.7,1.1-4-0.4-5.6c-1.7-1.7-4.4-1.7-6,0c-1.7,1.7-1.7,4.4,0,6c1.5,1.5,3.9,1.6,5.6,0.4l1.9,1.9
c0.2,0.2,0.6,0.2,0.9,0c0.2-0.2,0.2-0.6,0-0.9L7.7,6.8z M6.6,6.6c-0.6,0.6-1.4,1-2.3,1c-0.9,0-1.7-0.4-2.3-1C1.3,6,1,5.2,1,4.3
c0-0.9,0.4-1.7,1-2.3c0.6-0.6,1.4-1,2.3-1c0.9,0,1.7,0.4,2.3,1c0.6,0.6,1,1.4,1,2.3C7.6,5.2,7.2,6,6.6,6.6z"/>
</svg>
src/main/sourceapp/1/images/ICON-VIEW-MAP.svg 0 → 100644
View file @ fe02af8f
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9.8 9.8" style="enable-background:new 0 0 9.8 9.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#717171;}
</style>
<path class="st0" d="M3.4,6.4c0.4,0.1,0.8,0.2,1.2,0.2V5H3.3C3.3,5.5,3.3,6,3.4,6.4z M3.3,4.5h1.4V3.3c-0.4,0-0.9,0.1-1.2,0.2
C3.4,3.8,3.3,4.1,3.3,4.5z M4.5,8c0.1,0,0.1,0,0.2,0V7C4.3,7,4,7,3.6,6.9C3.8,7.5,4.1,7.9,4.5,8z M3.6,2.9C4,2.8,4.3,2.8,4.7,2.8v-1
c-0.1,0-0.1,0-0.2,0C4.1,2,3.8,2.4,3.6,2.9z M3.5,2.1C2.9,2.4,2.4,2.9,2.1,3.5c0.3-0.2,0.6-0.3,1-0.5C3.2,2.7,3.3,2.4,3.5,2.1z
M2.1,6.3c0.3,0.6,0.8,1.1,1.4,1.4c-0.2-0.3-0.3-0.6-0.5-1C2.7,6.6,2.4,6.5,2.1,6.3z M7,4.5h1c0,0,0,0,0,0C7.9,4.1,7.5,3.8,6.9,3.6
C7,3.9,7,4.2,7,4.5z M2.9,3.6C2.4,3.8,2,4.1,1.8,4.5c0,0,0,0,0,0h1C2.8,4.2,2.9,3.9,2.9,3.6z M2.8,5h-1c0,0.1,0,0.2,0,0.3
C2,5.7,2.4,6,2.9,6.2C2.8,5.8,2.8,5.4,2.8,5z M6.3,7.8c0.6-0.3,1.1-0.8,1.4-1.4c-0.3,0.2-0.6,0.3-1,0.5C6.6,7.1,6.5,7.5,6.3,7.8z
M7,5c0,0.4,0,0.8-0.1,1.2C7.5,6,7.9,5.7,8,5.3c0-0.1,0-0.2,0-0.3H7z M4.9,0C2.2,0,0,2.2,0,4.9c0,2.7,2.2,4.9,4.9,4.9
s4.9-2.2,4.9-4.9C9.8,2.2,7.6,0,4.9,0z M4.9,8.7C2.8,8.7,1.1,7,1.1,4.9c0-2.1,1.7-3.8,3.8-3.8c2.1,0,3.8,1.7,3.8,3.8
C8.7,7,7,8.7,4.9,8.7z M7.8,3.5C7.4,2.9,6.9,2.4,6.3,2.1c0.2,0.3,0.3,0.6,0.5,1C7.1,3.2,7.5,3.3,7.8,3.5z M5.2,8.1
c0.1,0,0.1,0,0.2,0C5.7,7.9,6,7.5,6.2,6.9C5.9,7,5.5,7,5.2,7V8.1z M5.3,1.8c-0.1,0-0.1,0-0.2,0v1c0.4,0,0.7,0.1,1.1,0.1
C6,2.4,5.7,2,5.3,1.8z M6.6,5H5.2v1.6c0.4,0,0.9-0.1,1.2-0.2C6.5,6,6.6,5.5,6.6,5z M6.4,3.4C6,3.3,5.6,3.3,5.2,3.3v1.3h1.4
C6.5,4.1,6.5,3.8,6.4,3.4z"/>
</svg>
src/main/sourceapp/1/styles/genesys.scss
View file @ fe02af8f
......@@ -1038,6 +1038,206 @@ $heading-font-family: 'Roboto-Bold';
}
}
// contries and institutes list
.informative-h1 {
padding-bottom: 10px;
h1, p {
font-family: $heading-font-family;
font-size: 24px;
color: $white-color;
padding-left: 6px;
margin-top: 9px;
margin-bottom: 5px;
}
p {
font-size: 12px;
margin: 0;
}
}
.list-view-controls {
padding-top: 16px;
padding-bottom: 16px;
padding-right: 5px;
a {
border: 1px solid #999895;
display: inline-block;
background: #e8e8e8;
font-size: 14px;
padding: 5px 8px 4px;
text-transform: uppercase;
&:before {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 18px;
margin-right: 6px;
}
&.list-map-view:before {
content: url('../images/ICON-VIEW-MAP.svg');
}
&.list-all-view:before {
content: url('../images/ICON-OVERVIEW.svg');
}
}
}
.paginate {
padding-left: 5px;
padding-top: 16px;
padding-bottom: 16px;
.results, .page-amount {
display: inline-block;
vertical-align: middle;
font-family: $emphasis-font-family;
font-size: 14px;
color: $dark-text-color;
}
.results {
margin-right: 5px;
}
.page-amount {
margin-left: 5px;
}
.form-control {
display: inline-block;
vertical-align: middle;
width: 83px;
border-radius: 0;
border: 1px solid #999895;
background: $white-color;
height: 31px;
margin: 0px -5px;
@include placeholder {
font-family: $emphasis-font-family;
color: $dark-text-color;
font-size: 14px;
text-align: center;
}
}
a {
display: inline-block;
background: #e8e8e8;
border: 1px solid #999895;
color: $dark-text-color;
padding: 2px 10px 5px;
}
.fa {
display: inline-block;
vertical-align: middle;
font: normal normal normal 16px/1 FontAwesome;
&.fa-chevron-right:before {
content: "\f054";
}
&.fa-chevron-left:before {
content: "\f053";
}
}
}
.paginate-bottom-wrap {
width: 100%;
text-align: left;
}
#letter-top, #letter-bottom {
padding-top: 16px;
background: #d4d1c6;
padding-bottom: 18px;
margin-bottom: 2px;
.letter-pointer {
font-family: $default-font-family;
font-size: 21px;
padding-left: 5px;
padding-right: 7px;
display: inline-block;
}
}
#letter-bottom {
margin-top: 15px;
padding-top: 20px;
margin-bottom: 9px;
}
.hoofdleter {
font-family: $heading-font-family;
font-size: 24px;
color: $about-text;
width: 100%;
background: $content-footer-bg;
padding: 9px 20px 12px;
small {
float: right;
font-family: $default-font-family;
font-size: 14px;
padding-top: 7px;
a {
font-size: inherit;
}
}
}
.funny-list {
background: $content-footer-bg;
padding: 0;
margin: 0 20px;
column-count: 4;
-moz-column-count: 4;
-webkit-column-count: 4;
column-gap: 0;
-moz-column-gap: 0;
-webkit-column-gap: 0;
background-image: repeating-linear-gradient(180deg, #f8f7f4, #f8f7f4 40px, #e7e5df 40px, #e7e5df 45px, #f4f3ee 45px, #f4f3ee 85px, #e7e5df 85px, #e7e5df 90px);
background-image: -moz-repeating-linear-gradient(-90deg, #f8f7f4, #f8f7f4 40px, #e7e5df 40px, #e7e5df 45px, #f4f3ee 45px, #f4f3ee 85px, #e7e5df 85px, #e7e5df 90px);
background-image: -webkit-repeating-linear-gradient(-90deg, #f8f7f4, #f8f7f4 40px, #e7e5df 40px, #e7e5df 45px, #f4f3ee 45px, #f4f3ee 85px, #e7e5df 85px, #e7e5df 90px);
background-size: 100% 90px;
height: auto;
li {
padding: 12px 0px 13px 10px;
display: inline-block;
width: 100%;
vertical-align: top;
position: relative;
max-height: 45px;
&:before {
content: '';
position: absolute;
top: 0;
height: 100%;
left: auto;
right: 0;
width: 1px;
background-color: #e7e5df;
}
a {
font-family: $default-font-family;
font-size: 14px;
line-height: 20px;
}
}
}
}
......@@ -1094,8 +1294,6 @@ $heading-font-family: 'Roboto-Bold';
}
//about page
.top-image {
background-image: url('../images/about-banner-tablet.png');
min-height: 230px;
......@@ -1139,6 +1337,25 @@ $heading-font-family: 'Roboto-Bold';
}
}
//country list
#letter-top {
padding-bottom: 22px;
}
.hoofdleter {
padding: 9px 23px 12px 20px;
small {
padding-top: 10px;
}
}
.funny-list {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
}
}
......@@ -1788,6 +2005,102 @@ $heading-font-family: 'Roboto-Bold';
}
}
}
//country list
.informative-h1 {
padding-bottom: 16px;
h1 {
margin-top: 18px;
}
p {
display: none;
}
}
.list-view-controls {
padding-right: 0;
text-align: center;
width: 100%;
a {
width: 100%;
max-width: 300px;
&.list-map-view {
margin-bottom: 10px;
}
}
& + form {
width: 100%;
text-align: center;
.paginate {
padding-left: 0;
}
}
}
#letter-top, #letter-bottom {
padding-bottom: 12px;
padding-top: 9px;
div {
text-align: center;
}
.letter-pointer {
font-size: 18px;
padding: 0px 5px;
}
}
#letter-bottom {
margin-bottom: 3px;
}
.hoofdleter {
padding: 9px 23px 12px 20px;
small {
padding-top: 8px;
}
}
.paginate-bottom-wrap {
.paginate {
padding-left: 0;
text-align: center;
}
}
.institutes-page .funny-list {
li {
a {
font-size: 13px;
line-height: 14px;
width: 79%;
}
div {
font-size: 13px;
width: 21%;
line-height: 14px;
}
}
}
.funny-list {
column-count: 1;
-moz-column-count: 1;
-webkit-column-count: 1;
margin: 0;
li {
padding: 12px 0px 13px 20px;
&:before {
display: none;
}
}
}
}
}
......
src/main/webapp/WEB-INF/jsp/1/country/index.jsp 0 → 100644
View file @ fe02af8f
<!DOCTYPE html>
<%@include file="/WEB-INF/jsp/init.jsp"%>
<html>
<head>
<title><spring:message code="country.page.list.title" /></title>
</head>
<body>
<cms:informative-h1 title="country.page.list.title" fancy="true" info="country.page.list.intro" />
<%-- <div class="main-col-header clearfix">
<div class="nav-header pull-left">
<div class="results">
<spring:message code="paged.totalElements" arguments="${countries.size()}" />
</div>
</div>
</div> --%>
<div id="letter-top" class="main-col-header row">
<div class="col-md-12 col-sm-12">
<c:set value="" var="hoofdleter" />
<c:forEach items="${countries}" var="country" varStatus="status">
<c:if test="${hoofdleter ne country.getName(pageContext.response.locale).substring(0, 1)}">
<c:set var="hoofdleter" value="${country.getName(pageContext.response.locale).substring(0, 1)}" />
<a class="letter-pointer" href="#letter-${hoofdleter}"><c:out value="${hoofdleter}" /></a>
</c:if>
</c:forEach>
</div>
</div>
<c:forEach items="${firstLetters}" var="hoofd">
<div class="row">
<div id="letter-B" class="hoofdleter"><c:out value="${hoofd}" />
<small><a href="#letter-top"><spring:message code="jump-to-top" /></a></small>
</div>
<ul class="funny-list list-unstyled">
<c:forEach items="${countries}" var="country" varStatus="status">
<c:if test="${country.getName(pageContext.response.locale).substring(0, 1) eq hoofd}">
<li><a class="show ${not country.current ? 'disabled' : ''}" href="<c:url value="/geo/${country.code3}" />"><c:out value="${country.getName(pageContext.response.locale)}" /></a></li>
</c:if>
</c:forEach>
</ul>
</div>
</c:forEach>
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/jsp/1/wiews/index.jsp 0 → 100644
View file @ fe02af8f
<!DOCTYPE html>
<%@include file="/WEB-INF/jsp/init.jsp" %>
<html>
<head>
<title><spring:message code="faoInstitutes.page.list.title"/></title>
</head>
<body class="institutes-page">
<cms:informative-h1 title="faoInstitutes.page.list.title" fancy="true" info="" />
<div class="main-col-header clearfix">
<div class="nav-header clearfix">
<div class="pull-right list-view-controls">
<c:if test="${activeOnly eq true}">
<a href="<c:url value="/wiews/active/map" />" class="list-map-view">
<spring:message code="maps.view-map" />
</a>
<a href="<c:url value="/wiews/" />" class="list-all-view">
<spring:message code="faoInstitutes.viewAll" />
</a>
</c:if>
<c:if test="${activeOnly ne true}">
<a href="<c:url value="/wiews/active" />" class="list-all-view">
<spring:message code="faoInstitutes.viewActiveOnly" />
</a>
</c:if>
</div>
<local:paginate2 page="${pagedData}"/>
</div>
</div>
<div class="row">
<c:forEach items="${pagedData.content}" var="faoInstitute" varStatus="status">
<div class="col-sm-12 ${faoInstitute.current ? '' : 'not-current'}">
<a class="show pull-left" href="<c:url value="/wiews/${faoInstitute.code}" />">
<b>
<c:out value="${faoInstitute.code}" />
</b>
<c:out value="${faoInstitute.fullName}" />
</a>
<div class="pull-right">
<spring:message code="faoInstitute.accessionCount" arguments="${faoInstitute.accessionCount}" />
</div>
</div>
</c:forEach>
</div>
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/tags/cms/informative-h1.tag
View file @ fe02af8f
......@@ -9,13 +9,15 @@
<%@ attribute name="fancy" required="false" rtexprvalue="true" type="java.lang.Boolean"%>
<%@ attribute name="info" required="false" type="java.lang.String"%>
<c:if test="${fancy eq true and info ne null}">
<div class="informative-h1 row">
<c:if test="${fancy eq true}">
<div class="informative-h1 green-bg row">
<div class="col-md-12 col-sm-12">
<h1>
<spring:message code="${title}" />
</h1>
<c:if test="${info ne null and info ne ''}">
<p><spring:message code="${info}" /></p>
</c:if>
</div>
<%-- <div class="col-md-6 hidden-sm">
xxxx
......
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