From fe02af8fbeecca36a04e257a331b50b728ea3491 Mon Sep 17 00:00:00 2001 From: Matija Obreza Date: Wed, 1 Jun 2016 16:46:35 +0200 Subject: [PATCH] Country list style --- .../servlet/controller/CountryController.java | 8 +- src/main/sourceapp/1/images/ICON-OVERVIEW.svg | 11 + src/main/sourceapp/1/images/ICON-VIEW-MAP.svg | 20 ++ src/main/sourceapp/1/styles/genesys.scss | 317 +++++++++++++++++- .../webapp/WEB-INF/jsp/1/country/index.jsp | 49 +++ src/main/webapp/WEB-INF/jsp/1/wiews/index.jsp | 51 +++ .../WEB-INF/tags/cms/informative-h1.tag | 6 +- 7 files changed, 457 insertions(+), 5 deletions(-) create mode 100644 src/main/sourceapp/1/images/ICON-OVERVIEW.svg create mode 100644 src/main/sourceapp/1/images/ICON-VIEW-MAP.svg create mode 100644 src/main/webapp/WEB-INF/jsp/1/country/index.jsp create mode 100644 src/main/webapp/WEB-INF/jsp/1/wiews/index.jsp diff --git a/src/main/java/org/genesys2/server/servlet/controller/CountryController.java b/src/main/java/org/genesys2/server/servlet/controller/CountryController.java index ac2a519c0..1416c59eb 100644 --- a/src/main/java/org/genesys2/server/servlet/controller/CountryController.java +++ b/src/main/java/org/genesys2/server/servlet/controller/CountryController.java @@ -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 countries = geoService.listActive(getLocale()); + model.addAttribute("countries", countries); + + List firstLetters = countries.stream().map(country -> country.getName(getLocale()).substring(0, 1)).distinct().collect(Collectors.toList()); + model.addAttribute("firstLetters", firstLetters); + return "/country/index"; } diff --git a/src/main/sourceapp/1/images/ICON-OVERVIEW.svg b/src/main/sourceapp/1/images/ICON-OVERVIEW.svg new file mode 100644 index 000000000..df9a4ce95 --- /dev/null +++ b/src/main/sourceapp/1/images/ICON-OVERVIEW.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/src/main/sourceapp/1/images/ICON-VIEW-MAP.svg b/src/main/sourceapp/1/images/ICON-VIEW-MAP.svg new file mode 100644 index 000000000..87ee6b45f --- /dev/null +++ b/src/main/sourceapp/1/images/ICON-VIEW-MAP.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/main/sourceapp/1/styles/genesys.scss b/src/main/sourceapp/1/styles/genesys.scss index db3d73f34..16da4dd26 100644 --- a/src/main/sourceapp/1/styles/genesys.scss +++ b/src/main/sourceapp/1/styles/genesys.scss @@ -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; + } + } + } + + } } diff --git a/src/main/webapp/WEB-INF/jsp/1/country/index.jsp b/src/main/webapp/WEB-INF/jsp/1/country/index.jsp new file mode 100644 index 000000000..884a533c8 --- /dev/null +++ b/src/main/webapp/WEB-INF/jsp/1/country/index.jsp @@ -0,0 +1,49 @@ + + +<%@include file="/WEB-INF/jsp/init.jsp"%> + + + +<spring:message code="country.page.list.title" /> + + + + + <%--
+
+
+ +
+
+
--%> + +
+
+ + + + + + + +
+
+ + + +
+
+ +
+
    + + +
  • ">
    • +     +     +
+
+ + + + \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/jsp/1/wiews/index.jsp b/src/main/webapp/WEB-INF/jsp/1/wiews/index.jsp new file mode 100644 index 000000000..4d17871ec --- /dev/null +++ b/src/main/webapp/WEB-INF/jsp/1/wiews/index.jsp @@ -0,0 +1,51 @@ + + +<%@include file="/WEB-INF/jsp/init.jsp" %> + + + + <spring:message code="faoInstitutes.page.list.title"/> + + + + +
+
+
+ + " class="list-map-view"> + + + " class="list-all-view"> + + + + + " class="list-all-view"> + + + +
+ +
+
+ +
+ +
+ "> + + + + + + +
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/tags/cms/informative-h1.tag b/src/main/webapp/WEB-INF/tags/cms/informative-h1.tag index 72db63779..7e6f26d73 100644 --- a/src/main/webapp/WEB-INF/tags/cms/informative-h1.tag +++ b/src/main/webapp/WEB-INF/tags/cms/informative-h1.tag @@ -9,13 +9,15 @@ <%@ attribute name="fancy" required="false" rtexprvalue="true" type="java.lang.Boolean"%> <%@ attribute name="info" required="false" type="java.lang.String"%> - -
+ +

+

+
<%--