Skip to content
GitLab
Commit c7bda943 authored by Taisiya Glushko's avatar Taisiya Glushko Committed by Matija Obreza
Browse files

country-page-ui

parent 7da2a4c2
Hide whitespace changes
Inline Side-by-side
src/main/resources/content/language.properties
View file @ c7bda943
......@@ -151,18 +151,19 @@ crop.summary=Summary (HTML metadata)
activity.recent-activity=Recent activity
country.page.title=Countries
country.page.profile.title=Country profile: {0}
country.page.list.title=Country list
country.page.list.intro=By clicking on a country name, you can find registered institutes in the country as well as statistics on plant genetic resources in the country as a whole.
country.page.not-current=This is a historic entry.
country.page.faoInstitutes={0} institutes registered in WIEWS
country.stat.countByLocation={0} accessions at institutes in this country
country.stat.countByOrigin={0} accessions registered in Genesys come from this country.
country.stat.countByOrigin={0}
country.statistics=Country statistics
country.accessions.from=Accessions collected in {0}
country.more-information=More information:
country.replaced-by=Country code is replaced by: {0}
country.is-itpgrfa-contractingParty={0} is party to the International Treaty on Plant Genetic Resources for Food and Agriculture (ITPGRFA).
country.is-itpgrfa-contractingParty=ITPGRFA
select-country=Select country
project.page.list.title=Projects
......
src/main/sourceapp/1/styles/genesys.scss
View file @ c7bda943
......@@ -1140,7 +1140,7 @@ $light-font-family: 'Roboto-Light';
}
}
}
#letter-top, #letter-bottom {
padding-top: 16px;
......@@ -1843,7 +1843,7 @@ $light-font-family: 'Roboto-Light';
}
.main-col-header {
background-color: #d4d1c6;
padding: 5px 20px 5px 20px;
padding: 7px 20px 6px 20px;
}
.nav-header {
.list-view-controls {
......@@ -2012,7 +2012,179 @@ $light-font-family: 'Roboto-Light';
}
}
@media (min-width: 990px) and (max-width: 1919px) {
//common styles
.section-heading {
background: #ffffff;
font-size: 18px;
padding: 15px 15px 15px 18px;
margin: 0 0 2px 0;
font-family: $heading-font-family;
}
.section-inner-content {
background: #ffffff;
padding: 20px 20px 27px 20px;
}
.collect-info {
margin: 0 5px 20px 5px;
}
//country page
.country-page {
.informative-h1 h1 {
font-size: 30px;
margin-top: 15px;
margin-bottom: 7px;
}
.dark-background {
background-color: #c4c0b6;
position: relative;
h1 {
font-size: 30px;
font-family: $heading-font-family;
margin: 15px 0 21px 0;
}
}
.map-wrapper {
margin-bottom: 20px;
height: 308px;
}
.country-info-wrapper {
position: relative;
}
#map {
height: 307px;
}
.country-info {
font-size: 14px;
font-family: $default-font-family;
padding: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
padding-left: 15px;
.row > div:first-child {
color: #4d4c46;
}
.row > div:nth-child(2) {
color: #006db4;
}
.row {
margin: 0 0 5px 0;
&:nth-child(odd) {
background-color: #d4d1c9;
}
&:nth-child(even) {
background-color: #cecbc3;
}
div {
padding: 10px;
&:first-child {
border-right: 2px solid #c4c0b6;
}
}
}
.row:first-child > div:nth-child(2){
p span.glyphicon-menu-right {
font-size: 10px;
}
}
.row:nth-of-type(2) > div:nth-child(2){
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.row:nth-of-type(5) > div:nth-child(2){
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
a {
display: inline;
}
p {
margin-bottom: 0;
display: inline-block;
}
.buttons-container {
display: inline-block;
}
.row.buttons-wrapper {
display: none;
background-color: transparent;
}
.btn-primary {
color: #ffffff;
background: #88BA42;
padding: 5px 17px;
font-size: 13px;
border-radius: 0;
border: 1px solid #91918D;
margin-right: 4px;
text-transform: uppercase;
}
.btn-default {
padding: 5px 17px;
font-size: 13px;
border-radius: 0;
border: 1px solid #91918D;
margin-right: 4px;
text-transform: uppercase;
}
span.glyphicon-menu-right {
font-size: 9px;
}
}
.inst-accs.collect-info > .section-inner-content {
padding-top: 18px;
}
.section-inner-content {
.row {
margin: 0 0 5px 0;
&:nth-child(even) {
background-color: #f3f2ee;
}
&:nth-child(odd) {
background-color: #f8f7f5;
}
div {
padding: 10px;
line-height: 20px;
&:first-child {
display: table;
border-right: 2px solid white;
}
}
}
p {
margin-bottom: 0;
font-size: 14px;
font-family: $default-font-family;
}
a {
display: inline-block;
font-size: 14px;
padding-left: 10px;
}
span {
display: table-cell;
vertical-align: top;
width: 20px;
font-size: 14px;
font-family: $default-font-family;
}
}
.inst-wiews.collect-info{
.section-inner-content {
.row {
div {
border-right: none;
}
}
}
}
}
@media (min-width: 990px) and (max-width: 1919px) {
.genesys-page {
.navbar-collapse.collapse, .navbar-collapse.collapsing {
......@@ -2325,6 +2497,18 @@ $light-font-family: 'Roboto-Light';
}
}
@media (max-width: 1691px) {
//country page {
.country-page {
.map-wrapper {
height: 350px;
}
#map {
height: 330px;
}
}
}
@media (max-width: 1450px) {
.explore-page .nav-header nav:not(.pull-right) .pagination {
margin: 10px 0;
......@@ -2408,6 +2592,18 @@ $light-font-family: 'Roboto-Light';
}
}
@media (max-width: 1425px) {
//country page
.country-page {
.map-wrapper {
height: 370px;
}
#map {
height: 350px;
}
}
}
@media (max-width: 1198px) {
//accession-page
.accession-page {
......@@ -2426,6 +2622,25 @@ $light-font-family: 'Roboto-Light';
column-count: 1;
}
}
//country page
.country-page {
.map-wrapper {
height: 430px;
}
#map {
height: 410px;
}
.country-info .buttons-container {
display: none;
}
.country-info .row.buttons-wrapper {
display: block;
padding: 10px 5px;
a {
display: inline-block;
}
}
}
}
@media (max-width: 990px) {
......@@ -2487,6 +2702,21 @@ $light-font-family: 'Roboto-Light';
}
}
}
//country page
.country-page {
.dark-background h1 {
margin-bottom: 18px;
}
.map-wrapper {
height: 350px;
}
#map {
height: 350px;
}
.country-info {
margin-bottom: 0;
}
}
}
@media (max-width: 991px) {
......@@ -2554,6 +2784,15 @@ $light-font-family: 'Roboto-Light';
}
}
}
//country page
.country-page {
.map-wrapper {
height: 350px;
}
#map {
height: 350px;
}
}
}
@media (max-width: 991px) and (min-width: 961px) {
......@@ -3202,6 +3441,39 @@ $light-font-family: 'Roboto-Light';
display: none;
}
}
//country page
.country-page {
.map-wrapper {
height: 765px;
}
.country-info {
position: relative;
width: 100%;
padding: 0 20px 0 20px;
margin: 0;
.row.buttons-wrapper {
padding: 15px 20px 20px 20px;
margin-bottom: 0;
.btn-primary, .btn-default {
display: block;
width: 200px;
margin-right: auto;
margin-left: auto;
}
.btn-primary {
margin-bottom: 10px;
}
}
}
.map-container {
margin-left: 0;
margin-right: 0;
& > div {
padding-left: 0;
padding-right: 0;
}
}
}
}
@media (max-width: 960px) {
......@@ -3259,41 +3531,57 @@ $light-font-family: 'Roboto-Light';
.tax-rules .section-inner-content .row p {
border: none;
}
.general-info .statistics p .stats-number {
margin-left: 5px;
padding-left: 10px;
}
.general-info .statistics .btn {
display: inline-block;
margin: 0 0 10px 0;
.general-info .statistics p .stats-number {
margin-left: 5px;
padding-left: 10px;
}
.general-info .statistics .btn {
display: inline-block;
margin: 0 0 10px 0;
}
}
//explore page
.explore-page {
.filters #accordion {
margin-bottom: 0;
}
.filters .panel-heading .panel-title {
padding: 0;
}
#explore-table table {
tr {
td:first-child {width:1%; }
td:nth-child(2) {width:4%; }
td:nth-child(3) {width:30%; }
td:nth-child(4) {width:65%; }
}
}
//explore page
.explore-page {
.filters #accordion {
margin-bottom: 0;
}
//country page
.country-page {
.section-inner-content {
.row div:nth-child(2) {
padding-top: 0;
}
.filters .panel-heading .panel-title {
padding: 0;
.row div:first-child {
border-right: none;
}
#explore-table table {
tr {
td:first-child {
width: 1%;
}
td:nth-child(2) {
width: 4%;
}
td:nth-child(3) {
width: 30%;
}
td:nth-child(4) {
width: 65%;
}
}
p {
padding-left: 20px;
}
a {
padding-left: 0;
}
}
.map-wrapper {
height: auto;
}
#map {
width: 100% !important;
margin-bottom: 20px;
}
}
}
@media (min-width: 1920px) {
.genesys-page {
......@@ -3460,6 +3748,69 @@ $light-font-family: 'Roboto-Light';
margin: 0 0 20px 0;
}
}
//country page
.country-page {
.informative-h1 h1 {
margin-bottom: 0;
padding-left: 20px;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
}
.map-wrapper {
margin: 0 0 20px 0;
}
.dark-background h1 {
padding-left: 18px;
margin: 14px 0 20px 0;
}
.country-info {
padding: 0;
.row {
div {
padding: 10px 5px 10px 20px;
}
div:nth-child(2) {
padding: 10px 5px 10px 34px;
}
}
.row div:first-child {
border-right: none;
}
.row.buttons-wrapper {
padding: 15px 0 20px 0;
.btn-default, .btn-primary {
width: 90%;
}
}
}
.collect-info {
margin-left: 0;
margin-right: 0;
}
.inst-accs.collect-info {
.section-inner-content .row div:first-child {
padding-bottom: 0;
}
}
.section-inner-content {
padding: 20px 0px 15px 0px;
a {
padding-left: 10px;
}
p {
padding-left: 30px;
}
}
.section-heading {
padding: 10px 10px 10px 18px;
line-height: 24px;
}
#map {
height: 288px;
}
}
}
@media(max-width: 379px) {
......
src/main/webapp/WEB-INF/jsp/country/details.jsp
View file @ c7bda943
......@@ -8,11 +8,9 @@
<local:content-headers description="${jspHelper.htmlToText(blurp.summary, 150)}" title="${country.getName(pageContext.response.locale)}" />
</head>
<body>
<h1>
<c:out value="${country.getName(pageContext.response.locale)}" />
<img class="country-flag bigger" src="<c:url value="${cdnFlagsUrl}/${country.code3.toUpperCase()}.svg" />" />
</h1>
<body class="country-page">
<cms:informative-h1 title="country.page.title" />
<!-- Is country current? -->
<gui:alert type="info" display="${not country.current}">
......@@ -23,13 +21,13 @@
</c:if>
</gui:alert>
<div class="jumbotron">
<%--<div class="jumbotron">
<spring:message code="country.stat.countByOrigin" arguments="${countByOrigin}" />
<c:if test="${countByOrigin gt 0}">
<a href="<c:url value="/geo/${country.code3}/data" />"><spring:message code="view.accessions" /></a>
<a href="<c:url value="/geo/${country.code3}/overview" />"><spring:message code="data-overview.short" /></a>
</c:if>
</div>
</div>--%>
<security:authorize access="hasRole('ADMINISTRATOR')">
<a href="<c:url value="/geo/${country.code3}/edit" />" class="close"> <spring:message code="edit" />
......@@ -42,60 +40,97 @@
<spring:message code="country.is-itpgrfa-contractingParty" arguments="${country.getName(pageContext.response.locale)}" argumentSeparator="|" />
</gui:alert>
<div>
ISO-3166 3-alpha:
<c:out value="${country.code3}" />
<br /> ISO-3166 2-alpha:
<c:out value="${country.code2}" />
<div class="row map-wrapper dark-background">
<div class="country-info-wrapper clearfix">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 country-info collect-info">
<h1><c:out value="${country.getName(pageContext.response.locale)}" /></h1>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><p>Country:</p></div>
<div class="col-lg-9 col-md-9 col-sm-6 col-xs-8"><p>Countries&nbsp;<span class="glyphicon glyphicon-menu-right"></span>&nbsp;<c:out value="${country.getName(pageContext.response.locale)}" /></p></div>
</div>
<div class="row">
<c:if test="${country.wikiLink ne null}">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><p><spring:message code="country.more-information" /></p></div>
<div class="col-lg-9 col-md-9 col-sm-6 col-xs-8"><a target="_blank" rel="nofollow" href="<c:out value="${country.wikiLink}" />"><c:out value="${country.wikiLink}" /></a></div>
</c:if>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><p>Organizations and Networks:</p></div>
<div class="col-lg-9 col-md-9 col-sm-6 col-xs-8"><p><spring:message code="country.is-itpgrfa-contractingParty" arguments="${country.getName(pageContext.response.locale)}" argumentSeparator="|" /></p></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><p>Accessions in Genesys:</p></div>
<div class="col-lg-9 col-md-9 col-sm-6 col-xs-8">
<p><span><spring:message code="country.stat.countByOrigin" arguments="${countByOrigin}" /></span></p>
<p class="buttons-container pull-right">
<a class="btn btn-primary" title="" href="<c:url value="/geo/${country.code3}/data" />"> <span class="glyphicon glyphicon-list"></span> <spring:message code="view.accessions" /></a>
<a class="btn btn-default" id="mapLink" href="<c:url value="/explore/map"><c:param name="filter">${jsonFilter}</c:param></c:url>"><span class="glyphicon glyphicon-globe"></span><span><spring:message code="maps.view-map"/></span></a>
</p>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-4">ISO:</div>
<div class="col-lg-9 col-md-9 col-sm-6 col-xs-8">
<span>ISO-3166 3-alpha: <c:out value="${country.code3}" />, </span>
<span>ISO-3166 2-alpha: <c:out value="${country.code2}" /></span>
</div>
</div>
<div class="row buttons-wrapper">
<a class="btn btn-primary" title="" href="<c:url value="/geo/${country.code3}/data" />"> <span class="glyphicon glyphicon-list"></span> <spring:message code="view.accessions" /></a>
<a class="btn btn-default" id="mapLink" href="<c:url value="/explore/map"><c:param name="filter">${jsonFilter}</c:param></c:url>"><span class="glyphicon glyphicon-globe"></span><span><spring:message code="maps.view-map"/></span></a>
</div>
</div>
<%-- Show map? --%>
<c:forEach items="${genesysInstitutes}" var="faoInstitute" varStatus="status">
<c:if test="${faoInstitute.latitude ne null and faoInstitute.longitude ne null}">
<c:set value="true" var="showMap" />
</c:if>
</c:forEach>
<c:if test="${showMap!=null && showMap}">
<div class="row map-container" style="">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="map" class="gis-map"></div>
</div>
</div>
</c:if>
</div>
<c:if test="${country.wikiLink ne null}">
<div>
<spring:message code="country.more-information" />