Commit c7bda943 authored by Taisiya Glushko's avatar Taisiya Glushko Committed by Matija Obreza
Browse files

country-page-ui

parent 7da2a4c2
...@@ -151,18 +151,19 @@ crop.summary=Summary (HTML metadata) ...@@ -151,18 +151,19 @@ crop.summary=Summary (HTML metadata)
activity.recent-activity=Recent activity activity.recent-activity=Recent activity
country.page.title=Countries
country.page.profile.title=Country profile: {0} country.page.profile.title=Country profile: {0}
country.page.list.title=Country list 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.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.not-current=This is a historic entry.
country.page.faoInstitutes={0} institutes registered in WIEWS country.page.faoInstitutes={0} institutes registered in WIEWS
country.stat.countByLocation={0} accessions at institutes in this country 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.statistics=Country statistics
country.accessions.from=Accessions collected in {0} country.accessions.from=Accessions collected in {0}
country.more-information=More information: country.more-information=More information:
country.replaced-by=Country code is replaced by: {0} 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 select-country=Select country
project.page.list.title=Projects project.page.list.title=Projects
......
...@@ -1140,7 +1140,7 @@ $light-font-family: 'Roboto-Light'; ...@@ -1140,7 +1140,7 @@ $light-font-family: 'Roboto-Light';
} }
} }
} }
#letter-top, #letter-bottom { #letter-top, #letter-bottom {
padding-top: 16px; padding-top: 16px;
...@@ -1843,7 +1843,7 @@ $light-font-family: 'Roboto-Light'; ...@@ -1843,7 +1843,7 @@ $light-font-family: 'Roboto-Light';
} }
.main-col-header { .main-col-header {
background-color: #d4d1c6; background-color: #d4d1c6;
padding: 5px 20px 5px 20px; padding: 7px 20px 6px 20px;
} }
.nav-header { .nav-header {
.list-view-controls { .list-view-controls {
...@@ -2012,7 +2012,179 @@ $light-font-family: 'Roboto-Light'; ...@@ -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 { .genesys-page {
.navbar-collapse.collapse, .navbar-collapse.collapsing { .navbar-collapse.collapse, .navbar-collapse.collapsing {
...@@ -2325,6 +2497,18 @@ $light-font-family: 'Roboto-Light'; ...@@ -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) { @media (max-width: 1450px) {
.explore-page .nav-header nav:not(.pull-right) .pagination { .explore-page .nav-header nav:not(.pull-right) .pagination {
margin: 10px 0; margin: 10px 0;
...@@ -2408,6 +2592,18 @@ $light-font-family: 'Roboto-Light'; ...@@ -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) { @media (max-width: 1198px) {
//accession-page //accession-page
.accession-page { .accession-page {
...@@ -2426,6 +2622,25 @@ $light-font-family: 'Roboto-Light'; ...@@ -2426,6 +2622,25 @@ $light-font-family: 'Roboto-Light';
column-count: 1; 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) { @media (max-width: 990px) {
...@@ -2487,6 +2702,21 @@ $light-font-family: 'Roboto-Light'; ...@@ -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) { @media (max-width: 991px) {
...@@ -2554,6 +2784,15 @@ $light-font-family: 'Roboto-Light'; ...@@ -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) { @media (max-width: 991px) and (min-width: 961px) {
...@@ -3202,6 +3441,39 @@ $light-font-family: 'Roboto-Light'; ...@@ -3202,6 +3441,39 @@ $light-font-family: 'Roboto-Light';
display: none; 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) { @media (max-width: 960px) {
...@@ -3259,41 +3531,57 @@ $light-font-family: 'Roboto-Light'; ...@@ -3259,41 +3531,57 @@ $light-font-family: 'Roboto-Light';
.tax-rules .section-inner-content .row p { .tax-rules .section-inner-content .row p {
border: none; border: none;
} }
.general-info .statistics p .stats-number { .general-info .statistics p .stats-number {
margin-left: 5px; margin-left: 5px;
padding-left: 10px; padding-left: 10px;
} }
.general-info .statistics .btn { .general-info .statistics .btn {
display: inline-block; display: inline-block;
margin: 0 0 10px 0; 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 { //country page
.filters #accordion { .country-page {
margin-bottom: 0; .section-inner-content {
.row div:nth-child(2) {
padding-top: 0;
} }
.filters .panel-heading .panel-title { .row div:first-child {
padding: 0; border-right: none;
} }
#explore-table table { p {
tr { padding-left: 20px;
td:first-child { }
width: 1%; a {
} padding-left: 0;
td:nth-child(2) {
width: 4%;
}
td:nth-child(3) {
width: 30%;
}
td:nth-child(4) {
width: 65%;
}
}
} }
} }
.map-wrapper {
height: auto;
}
#map {
width: 100% !important;
margin-bottom: 20px;
}
} }
}
@media (min-width: 1920px) { @media (min-width: 1920px) {
.genesys-page { .genesys-page {
...@@ -3460,6 +3748,69 @@ $light-font-family: 'Roboto-Light'; ...@@ -3460,6 +3748,69 @@ $light-font-family: 'Roboto-Light';
margin: 0 0 20px 0; 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) { @media(max-width: 379px) {
......
...@@ -8,11 +8,9 @@ ...@@ -8,11 +8,9 @@
<local:content-headers description="${jspHelper.htmlToText(blurp.summary, 150)}" title="${country.getName(pageContext.response.locale)}" /> <local:content-headers description="${jspHelper.htmlToText(blurp.summary, 150)}" title="${country.getName(pageContext.response.locale)}" />
</head> </head>
<body>
<h1> <body class="country-page">
<c:out value="${country.getName(pageContext.response.locale)}" /> <cms:informative-h1 title="country.page.title" />
<img class="country-flag bigger" src="<c:url value="${cdnFlagsUrl}/${country.code3.toUpperCase()}.svg" />" />
</h1>
<!-- Is country current? --> <!-- Is country current? -->
<gui:alert type="info" display="${not country.current}"> <gui:alert type="info" display="${not country.current}">
...@@ -23,13 +21,13 @@ ...@@ -23,13 +21,13 @@
</c:if> </c:if>
</gui:alert> </gui:alert>
<div class="jumbotron"> <%--<div class="jumbotron">
<spring:message code="country.stat.countByOrigin" arguments="${countByOrigin}" /> <spring:message code="country.stat.countByOrigin" arguments="${countByOrigin}" />
<c:if test="${countByOrigin gt 0}"> <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}/data" />"><spring:message code="view.accessions" /></a>
<a href="<c:url value="/geo/${country.code3}/overview" />"><spring:message code="data-overview.short" /></a> <a href="<c:url value="/geo/${country.code3}/overview" />"><spring:message code="data-overview.short" /></a>
</c:if> </c:if>
</div> </div>--%>
<security:authorize access="hasRole('ADMINISTRATOR')"> <security:authorize access="hasRole('ADMINISTRATOR')">