diff --git a/Gemfile b/Gemfile index 93197d4ff..6730b6ee4 100644 --- a/Gemfile +++ b/Gemfile @@ -1,13 +1,8 @@ source 'https://rubygems.org' -source 'https://wcmc-gems:SDvUM6ZG@gem-server.unep-wcmc.org/' gem 'rails', '5.2.0' gem 'webpacker', '~> 4.0.2' -#gem 'wcmc-components', path: "../web-components/gems/wcmc_components" -gem 'wcmc-components', '~>0.0.5' - - gem 'bourbon' gem "neat" @@ -35,6 +30,7 @@ gem 'vuejs-rails', '~> 2.3.2' gem 'sprockets-vue', '~> 0.1.0' gem 'rails-controller-testing' + gem 'gdal', '~> 2.0' # group :production, :staging do diff --git a/Gemfile.lock b/Gemfile.lock index 5bf8b49d1..e79ca5879 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -7,7 +7,6 @@ GIT GEM remote: https://rubygems.org/ - remote: https://wcmc-gems:SDvUM6ZG@gem-server.unep-wcmc.org/ specs: actioncable (5.2.0) actionpack (= 5.2.0) @@ -1284,7 +1283,6 @@ GEM vuejs-rails (2.3.2) warden (1.2.8) rack (>= 2.0.6) - wcmc-components (0.0.5) webmock (1.22.6) addressable (>= 2.3.6) crack (>= 0.3.2) @@ -1368,7 +1366,6 @@ DEPENDENCIES turnout (~> 2.5.0) uglifier (~> 4.1.17) vuejs-rails (~> 2.3.2) - wcmc-components (~> 0.0.5) webmock (~> 1.22.0) webpacker (~> 4.0.2) whenever diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index b2d3568c8..b7319a6d2 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -48,25 +48,19 @@ $purple: #7B1977; $purple-dark: #794B9D; $alert: $red; + $primary: $green; $primary-dark: $green--darker; $global: $purple; +$oecm: $orange; $marine: $blue; $terrestrial: $green-bright; $pin-marine: $marine; -$pin-oecm: $orange; +$pin-oecm: $oecm; $pin-terrestrial: $terrestrial; -//used on marine insights page -$blue--marine-1: #bfe5e9; -$blue--marine-2: #A1D8DE; -$blue--marine-3: #90BDC4; -$blue--marine-4: #729099; -$blue--marine-5: #444955; -$marine-accent-color: $orange--lighest; - $theme-designation: [$chart-purple, $chart-aqua, $chart-blue]; //-------------------------------------------------- @@ -127,6 +121,7 @@ $large: 1200px; $z-100: 100; $z-200: 200; $z-300: 300; +$z-400: 400; //-------------------------------------------------- // padding diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 8a89c96a0..d0769812b 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -4,157 +4,4 @@ @import './helpers/helpers'; @import './base/*'; @import './components/*'; -@import './pages/*'; - -// grids -// @import 'bourbon'; -// @import 'neat'; - -// maps -// @import 'leaflet/dist/leaflet'; - -// development mixins -// @import 'utilities/flexbox'; -// @import 'utilities/accessibility'; -// @import 'utilities/bem'; - -// // variables -// @import 'variables/colors'; -// @import 'variables/dimensions'; -// // @import 'variables/font-faces'; -// // @import 'variables/fonts'; -// // @import 'variables/z-index'; -// // variables - -// // atoms -// @import 'atoms/fonts'; -// @import 'atoms/fa'; -// @import 'atoms/colors'; -// @import 'atoms/buttons'; -// @import 'atoms/disclaimer'; -// @import 'atoms/headers'; -// @import 'atoms/label'; -// @import 'atoms/leaflet-controls'; -// @import 'atoms/links'; -// @import 'atoms/logos'; -// @import 'atoms/overlay'; -// @import 'atoms/small-text'; -// @import 'atoms/text'; -// // atoms - -// // molecules -// @import 'molecules/accordion'; -// @import 'molecules/animated-loader'; -// @import 'molecules/alert'; -// @import 'molecules/attribute'; -// @import 'molecules/big-button'; -// @import 'molecules/breadcrumbs'; -// @import 'molecules/burger'; -// @import 'molecules/circle-story'; -// @import 'molecules/close-button'; -// @import 'molecules/counter'; -// @import 'molecules/cube'; -// @import 'molecules/dropdown'; -// @import 'molecules/expandable-section'; // DEPRECATED, use accordion -// @import 'molecules/fullscreen'; -// @import 'molecules/fullscreen-message'; -// @import 'molecules/header-with-image'; -// @import 'molecules/home-banner'; -// @import 'molecules/home-carousel'; -// @import 'molecules/horizontal-bar'; -// @import 'molecules/horizontal-bars'; -// @import 'molecules/key'; -// @import 'molecules/link-with-icon'; -// @import 'molecules/map'; -// @import 'molecules/modal'; -// @import 'molecules/pa-card'; -// @import 'molecules/rectangles'; -// @import 'molecules/reference'; -// @import 'molecules/select-with-content'; -// @import 'molecules/search-bar'; -// @import 'molecules/social'; -// @import 'molecules/stats'; -// @import 'molecules/sticky-nav'; -// @import 'molecules/sticky-tab'; -// @import 'molecules/table'; -// @import 'molecules/tooltip-old'; -// @import 'molecules/twitter-share'; -// @import 'molecules/uservoice'; -// @import 'molecules/value'; -// // molecules - -// // organisms -// @import 'organisms/hero'; -// @import 'organisms/cover-story'; -// @import 'organisms/section'; -// @import 'organisms/navbar'; -// @import 'organisms/autocompletion'; -// @import 'organisms/fact'; -// @import 'organisms/filter-bar'; -// @import 'organisms/footer'; -// @import 'organisms/form'; -// @import 'organisms/info-box'; -// @import 'organisms/gallery'; -// @import 'organisms/key-records'; -// @import 'organisms/search-result'; -// @import 'organisms/stats-card'; -// @import 'organisms/row'; -// @import 'organisms/article'; -// @import 'organisms/vertical-nav'; -// @import 'organisms/container'; -// @import 'organisms/tabs'; -// // organisms - -// old pp assets -// @import 'old/neat-grid'; -// @import 'old/transitions'; -// @import 'old/leaflet_overrides'; -// @import 'old/map'; -// @import 'old/base'; -// @import 'old/search_bar'; -// @import 'old/buttons'; -// @import 'old/home'; -// @import 'old/protected_areas'; -// @import 'old/projects'; -// @import 'old/search'; -// @import 'old/devise'; -// @import 'old/static_pages'; -// old pp assets - -// scopes -// @import 'scopes/article'; -// @import 'scopes/form'; -// // scopes - -// // utilities -// // @import 'utilities/keyframes'; -// // @import 'utilities/reset'; -// @import 'utilities/grid'; -// // @import 'utilities/html-elements'; -// // utilities - -//templates -// @import 'templates/site'; -//templates - -// @import 'custom'; - -// @import './map/custom-leaflet'; - - - -// @import './resources/variables/**/*'; - - -// @import './components/carousel'; -// @import './components/charts'; -// @import './components/hero'; -// @import './components/form'; -// @import './components/sticky'; -// @import './components/table'; -// @import './components/tooltip'; -// @import './components/vue-agile'; - - - -// @import 'utilities/u-classes'; +@import './pages/*'; \ No newline at end of file diff --git a/app/assets/stylesheets/base/_base.scss b/app/assets/stylesheets/base/_base.scss index 8bc0c5581..8ad126bc1 100644 --- a/app/assets/stylesheets/base/_base.scss +++ b/app/assets/stylesheets/base/_base.scss @@ -70,6 +70,10 @@ sup { font-size: .6em; } +input { + &:focus { @include input-custom-focus; } +} + //-------------------------------------------------- // site structure //-------------------------------------------------- diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss index ff0a42bfc..d49b0bbf3 100644 --- a/app/assets/stylesheets/base/_buttons.scss +++ b/app/assets/stylesheets/base/_buttons.scss @@ -20,6 +20,7 @@ $padding-medium: rem-calc(27); font-family: $body-font; padding: 0; text-decoration: none; + &:focus { @include input-custom-focus; } &:hover { text-decoration: none; } } @mixin button-font { @@ -257,7 +258,9 @@ $padding-medium: rem-calc(27); font-weight: $bold; &::after { @include icon-arrow-external-white; } } + &--link-external { @include button-external; } + &--link-external-primary { @include button-external; color: $primary; diff --git a/app/assets/stylesheets/base/_themes.scss b/app/assets/stylesheets/base/_themes.scss new file mode 100644 index 000000000..187af16f8 --- /dev/null +++ b/app/assets/stylesheets/base/_themes.scss @@ -0,0 +1,11 @@ +.theme--aqua { background-color: $chart-aqua; } +.theme--blue { background-color: $chart-blue; } +.theme--green { background-color: $chart-green; } +.theme--purple { background-color: $chart-purple; } + +.theme--primary { background-color: $primary; } +.theme--primary-dark { background-color: $primary-dark; } + +.theme--oecm { background-color: $oecm; } +.theme--marine { background-color: $marine; } +.theme--terrestrial { background-color: $terrestrial; } diff --git a/app/assets/stylesheets/base/mixins/_cards.scss b/app/assets/stylesheets/base/mixins/_cards.scss new file mode 100644 index 000000000..f3a57224d --- /dev/null +++ b/app/assets/stylesheets/base/mixins/_cards.scss @@ -0,0 +1,72 @@ +//-------------------------------------------------- +// shared mixins +//-------------------------------------------------- +@mixin card-news { + .card { + background-color: $grey-xlight; + margin-bottom: rem-calc(20); + text-decoration: none; + width: 100%; + + @include breakpoint($small) { + margin-bottom: rem-calc(30); + width: 48.5%; + } + } + + .card__content { + @include responsive(padding, rem-calc(26 20), rem-calc(28 20), rem-calc(30 20)); + } + + .card__date { + font-size: rem-calc(14); + margin: 0; + } + + .card__h3 { margin: .5em 0; } + + .card__icon { @include image-placeholder(); } + + .card__image { + @include flex-center; + background-color: $grey-light; + background-position: center; + background-size: cover; + width: 100%; height: rem-calc(265); + } + + .card__summary { margin: 0 } +} + +@mixin card-resource($per-row: 4) { + .card { + margin-bottom: rem-calc(20); + padding: rem-calc(12 10); + width: 100%; + + @include breakpoint($small) { + margin-bottom: rem-calc(50); + width: 50%; + } + + @include breakpoint($medium) { + @if $per-row == 3 { width: 33%; } + @if $per-row == 4 { width: 25%; } + min-height: rem-calc(200); + } + } + + .card--link { + border: solid 1px $white; + cursor: pointer; + + &:hover { border-color: $grey-dark; } + } + + .card__date { + @include text-small; + margin-top: 0; + } + + .card__link { text-decoration: none; } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_cards.scss b/app/assets/stylesheets/components/_cards.scss index 649339b72..31b33c7a7 100644 --- a/app/assets/stylesheets/components/_cards.scss +++ b/app/assets/stylesheets/components/_cards.scss @@ -4,6 +4,17 @@ //-------------------------------------------------- // mixins //-------------------------------------------------- +@mixin card-stats-padding { + padding: rem-calc(24 25); + @include breakpoint($small) { padding: rem-calc(28 30); } +} + +@mixin card-stats-number { + color: $primary; + font-weight: $bold; + line-height: 1; +} + //-------------------------------------------------- // classes //-------------------------------------------------- diff --git a/app/assets/stylesheets/components/_charts.scss b/app/assets/stylesheets/components/_charts.scss index b90313c66..ccfe1fd20 100644 --- a/app/assets/stylesheets/components/_charts.scss +++ b/app/assets/stylesheets/components/_charts.scss @@ -135,15 +135,4 @@ $chart-target-stroke-width: rem-calc(3); @import './charts/chart-square'; } -@import './charts/chart-legend'; -@import './charts/horizontal-bar-chart'; -@import './charts/interactive-treemap'; -@import './charts/sunburst'; - -//-------------------------------------------------- -// chart helpers -//-------------------------------------------------- -.theme--aqua { background-color: $chart-aqua; } -.theme--blue { background-color: $chart-blue; } -.theme--green { background-color: $chart-green; } -.theme--purple { background-color: $chart-purple; } +@import './charts/chart-legend'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/_hero.scss b/app/assets/stylesheets/components/_hero.scss index 6ac49a9ae..6f8392554 100644 --- a/app/assets/stylesheets/components/_hero.scss +++ b/app/assets/stylesheets/components/_hero.scss @@ -21,12 +21,21 @@ } @mixin hero-medium { - @include responsive(min-height, rem-calc(200), rem-calc(350), rem-calc(505)); - @include responsive(padding, rem-calc(30 0 40 0), rem-calc(40 0 40 0), rem-calc(50 0 60 0)); + min-height: rem-calc(200); + @include breakpoint($small) { min-height: rem-calc(350); } + @include breakpoint($medium) { min-height: rem-calc(505); } +} + +@mixin hero-padding { background: $grey-light center no-repeat; background-size: cover; + padding: rem-calc(30 0 40 0); + + @include breakpoint($small) { padding: rem-calc(40 0 40 0); } + @include breakpoint($medium) { padding: em-calc(50 0 60 0); } } + @mixin hero-stat-text { color: $white; font-weight: $bold; @@ -67,5 +76,6 @@ @import './hero/hero-area-type'; @import './hero/hero-basic'; @import './hero/hero-home'; + @import './hero/hero-small'; @import './hero/hero-thematic'; } \ No newline at end of file diff --git a/app/assets/stylesheets/components/_listing.scss b/app/assets/stylesheets/components/_listing.scss new file mode 100644 index 000000000..2bec853fa --- /dev/null +++ b/app/assets/stylesheets/components/_listing.scss @@ -0,0 +1,74 @@ +//-------------------------------------------------- +// variables +//-------------------------------------------------- + +//-------------------------------------------------- +// mixins +//-------------------------------------------------- + +//-------------------------------------------------- +// classes +//-------------------------------------------------- +.listing { + &__bar { + @include box-shadow-bottom-grey; + background-color: $white; + border-bottom: solid 1px $grey; + padding: rem-calc(12 0); + } + + &__bar-content { + @include container; + @include site-width; + @include flex; + @include flex-v-center; + } + + &__cards-news { + @include card-news; + @include flex; + @include flex-h-between; + @include flex-wrap; + } + + &__cards-resources { + @include card-resource($per-row: 3); + @include flex; + @include flex-wrap; + } + + &__filters { + @include flex-no-shrink; + + @include breakpoint($small) { + padding-right: rem-calc(24); + width: 33%; + } + + @include breakpoint($medium) { width: 25%; } + } + + &__filters-trigger { @include button-filter-trigger; } + + &__main { + @include container; + @include site-width; + + @include breakpoint($small) { display: flex; } + } + + &__results { + margin-top: rem-calc(24); + min-height: rem-calc(300); + + @include breakpoint($small) { min-height: rem-calc(600); } + } + + &__results-wrapper { + @include flex-grow; + } + + &__spinner { + margin-top: rem-calc(55); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_lists.scss b/app/assets/stylesheets/components/_lists.scss index 2f062cfee..eb278953a 100644 --- a/app/assets/stylesheets/components/_lists.scss +++ b/app/assets/stylesheets/components/_lists.scss @@ -1,7 +1,49 @@ //-------------------------------------------------- // mixins //-------------------------------------------------- +@mixin list-underline { + @include ul-unstyled; + padding-right: rem-calc(19); + .list { + &__li { + @include flex; + border-top: solid 1px $grey-light; + padding: rem-calc(14 0); + + &:first-child { border-top: none; } + } + + &__icon { + @include circle-icon; + background-color: $grey; + margin-right: rem-calc(24); + } + + &__title { + font-weight: $bold; + margin-right: rem-calc(24); + } + + &__right { + margin-left: auto; + + justify-content: flex-end; + } + + &__a { + @include button-with-icon; + @include flex-no-shrink; + font-size: rem-calc(16); + + &::after { + @include icon-circle-chevron-black; + height: rem-calc(21); + width: rem-calc(21); + } + } + } +} //-------------------------------------------------- // classes //-------------------------------------------------- @@ -53,41 +95,16 @@ // underline //-------------------------------------------------- &--underline { - @include ul-unstyled; - max-height: rem-calc(280); - overflow-y: scroll; + @include list-underline; + } +//-------------------------------------------------- +// underline with scrollbar +//-------------------------------------------------- + &--underline-scrollbar { + @include list-underline; @include beautify-scrollbar; - padding-right: rem-calc(19); - - - .list { - &__li { - @include flex; - border-top: solid 1px $grey-light; - padding: rem-calc(14 0); - - &:first-child { border-top: none; } - } - - &__icon { - @include circle-icon; - background-color: $grey; - margin-right: rem-calc(24); - } - - &__title { - font-weight: $bold; - margin-right: rem-calc(24); - } - - &__right { - margin-left: auto; - - justify-content: flex-end; - } - - &__a { @include button-all($small: true); } - } + max-height: rem-calc(280); + overflow-y: scroll; } -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss new file mode 100644 index 000000000..d7b10bb29 --- /dev/null +++ b/app/assets/stylesheets/components/_modal.scss @@ -0,0 +1,56 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +.modal-wrapper { + display: none; + + &.modal--active { display: block; } +} + +.modal-overlay { + background-color: rgba($grey, .8); + + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $z-300; +} + +.modal--pame { + background-color: white; + padding: rem-calc(34 32); + width: 100%; height: 100vh; + + position: fixed; + top: 0; + left: 0; + z-index: $z-400; + + @include breakpoint($small) { + border-radius: $radius-global; + padding: rem-calc(34 32); + width: 60%; height: auto; + + top: 50%; + left: 50%; + + transform: translate(-50%, -50%); + } + + .modal__title { margin-top: 0; } + + .modal__content { + position: relative; + } + + .modal__close { + @include button-close; + cursor: pointer; + + position: absolute; + top: rem-calc(-18); + right: rem-calc(-16); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_nav.scss b/app/assets/stylesheets/components/_nav.scss index fab12555d..a31d779f0 100644 --- a/app/assets/stylesheets/components/_nav.scss +++ b/app/assets/stylesheets/components/_nav.scss @@ -61,7 +61,7 @@ $pane-side-padding: 42px; transition: transform 0.4s ease-in-out; @include breakpoint($small) { - position: initial; + position: static; //initial doesn't work in IE11 top: unset; right: unset; bottom: unset; diff --git a/app/assets/stylesheets/components/cards/card/_card-stats.scss b/app/assets/stylesheets/components/cards/card/_card-stats.scss index 393b4cda3..39a9be7d5 100644 --- a/app/assets/stylesheets/components/cards/card/_card-stats.scss +++ b/app/assets/stylesheets/components/cards/card/_card-stats.scss @@ -32,15 +32,14 @@ @mixin card-button-external { @include button-all($small: true); } -//-------------------------------------------------- -// classes -//-------------------------------------------------- -&--stats-wrapper-chart { +@mixin card-chart-wrapper { @include container-medium; - @include breakpoint-down($small) { padding: 0; } } +//-------------------------------------------------- +// classes +//-------------------------------------------------- &--stats-wrapper { display: flex; flex-wrap: wrap; @@ -62,7 +61,9 @@ @import './stats/card-stats-coverage'; @import './stats/card-stats-designations'; @import './stats/card-stats-governance'; +@import './stats/card-stats-growth-chart'; @import './stats/card-stats-iucn'; @import './stats/card-stats-management'; @import './stats/card-stats-overview'; +@import './stats/card-stats-related'; @import './stats/card-stats-sources'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/_card-theme.scss b/app/assets/stylesheets/components/cards/card/_card-theme.scss index 98a137574..07b9c448d 100644 --- a/app/assets/stylesheets/components/cards/card/_card-theme.scss +++ b/app/assets/stylesheets/components/cards/card/_card-theme.scss @@ -4,7 +4,6 @@ @include flex; @include flex-column; @include flex-h-end; - @include responsive(height, rem-calc(460), rem-calc(460), rem-calc(760)); background-color: $grey-dark; background-position: center; background-size: cover; @@ -13,9 +12,13 @@ margin-left: 0; padding: rem-calc(32 30); text-decoration: none; + height: rem-calc(460); position: relative; + @include breakpoint-between($small, $medium) { padding-right: 30%; }; + @include breakpoint($medium) { height: rem-calc(760); } + &:hover::before { background-color: rgba(0,0,0,0.7); } &::before { @include border-radius; } @@ -26,15 +29,21 @@ @include flex-column; @include flex-h-between; @include flex-v-center; - @include responsive(width, rem-calc(134), rem-calc(150), rem-calc(150)); - @include responsive(height, rem-calc(134), rem-calc(150), rem-calc(150)); background-color: $grey-black; padding: rem-calc(20 10); text-align: center; - - @include responsive(right, rem-calc(22), rem-calc(26), rem-calc(44)); + width: rem-calc(134); height: rem-calc(134); + position: absolute; top: 0; + + @include breakpoint ($small) { + width: rem-calc(150); height: rem-calc(150); + + right: rem-calc(26); + } + + @include breakpoint ($medium) { right: rem-calc(44); } } &__icon { @@ -46,22 +55,29 @@ } &__number { - @include responsive(font-size, rem-calc(20), rem-calc(30), rem-calc(40)); color: $primary; + font-size: rem-calc(20); font-weight: $bold; line-height: 1; margin-top: rem-calc(10); display: block; + + @include breakpoint ($small) { font-size: rem-calc(30); } + @include breakpoint ($medium) { font-size: rem-calc(40); } } &__number-text { - @include responsive(font-size, rem-calc(16), rem-calc(18), rem-calc(18)); + font-size: rem-calc(16); line-height: 1; + + @include breakpoint ($small) { font-size: rem-calc(18); } } &__summary { - @include responsive(display, none, block, block); + display: none; + + @include breakpoint($small) { display: block; } } &__title { diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss index a70faf698..fe2c27058 100644 --- a/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss @@ -1,7 +1,7 @@ //-------------------------------------------------- // classes //-------------------------------------------------- -&--stats-affliations { +&--stats-affiliations { @include card-stats; .card { diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-growth-chart.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-growth-chart.scss new file mode 100644 index 000000000..91ec5fafe --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-growth-chart.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-growth-chart { + @include card-stats; + + .card { + &__chart-wrapper { @include card-chart-wrapper; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss index 3fa68696e..016d8007d 100644 --- a/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss @@ -3,8 +3,4 @@ //-------------------------------------------------- &--stats-iucn { @include card-stats; - - .card { - &__h2 { @include card-stats-h2; } - } } \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-overlap.scss similarity index 100% rename from app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss rename to app/assets/stylesheets/components/cards/card/stats/_card-stats-overlap.scss diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss index db86c263b..a4368a994 100644 --- a/app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss @@ -1,18 +1,60 @@ +//-------------------------------------------------- +// mixins +//-------------------------------------------------- +@mixin card-stats-overview-section { + margin-top: rem-calc(20); + + @include breakpoint($small) { margin-top: rem-calc(30); } +} + +@mixin card-stats-overview-subtitle { + font-size: rem-calc(16); + font-weight: $bold; + + display: block; +} + //-------------------------------------------------- // classes //-------------------------------------------------- &--stats-overview { @include bg-grey-black; @include card-stats-padding; - margin-right: rem-calc(30); width: 100%; - @include breakpoint($small) { width: 33%; } + @include breakpoint($small) { + @include flex-no-shrink; + margin-right: rem-calc(30); + width: calc(50% - 15px); + } + + @include breakpoint($medium) { + margin-right: rem-calc(30); + width: 33%; + } .card { - &__flag { - margin-right: rem-calc(14); + &__external-button { + @extend .button--link-external; + line-height: 1; + } + + &__external-label { + margin-right: 4%; + width: 74%; + } + + &__external-link { + @include flex; + @include flex-h-between; + @include flex-v-start; + font-size: rem-calc(16); + margin-bottom: rem-calc(20); } + + &__external-title { font-weight: $bold; } + + &__flag { margin-right: rem-calc(14); } &__heading { @include flex; @@ -25,80 +67,39 @@ font-size: rem-calc(20); margin: 0; - @include breakpoint($small) { font-size: rem-calc(22); } - @include breakpoint($medium) { font-size: rem-calc(30); } + @include breakpoint($medium) { font-size: rem-calc(25); } } &__number { @include card-stats-number; - font-size: rem-calc(18); - - display: block; - - @include breakpoint($small) { font-size: rem-calc(20); } - @include breakpoint($medium) { font-size: rem-calc(30); } - } - - &__number--small { - @include card-stats-number; - font-size: rem-calc(18); + font-size: rem-calc(30); margin-right: rem-calc(10); - @include breakpoint($small) { font-size: rem-calc(20); } - @include breakpoint($medium) { font-size: rem-calc(30); } - } + display: block; - &__section { - margin-top: rem-calc(30); + @include breakpoint($medium) { font-size: rem-calc(40); } } - &__story-map-links { - margin-top: 3rem; - .story-map-link { - font-size: rem-calc(16); - margin-bottom: rem-calc(8); - - @include flex; - @include flex-h-between; - - &__label { - padding-right: rem-calc(8); - } - - &__link { - @include button-with-icon; - @include breakpoint($small) { font-size: rem-calc(16); } - - &::after { - @include icon-arrow-external; - display: inline-block; - } - } - - @include breakpoint-down($medium) { - @include flex-column; - - &__label { - margin-bottom: rem-calc(8); - } - } - - &__title { - font-weight: $bold; - } - } + &__section { @include card-stats-overview-section; } + + &__section-with-border { + @include card-stats-overview-section; + border-bottom: solid 1px $grey-light; + padding-bottom: rem-calc(20); } &__text { font-size: rem-calc(16); } - &__text-bold { - font-size: rem-calc(16); - font-weight: $bold; + &__subtitle-margined { + @include card-stats-overview-subtitle; margin-bottom: rem-calc(6); + } - display: block; + &__text { + font-size: rem-calc(16); + width: 68%; } } } \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-related.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-related.scss new file mode 100644 index 000000000..c4439a705 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-related.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-related { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/cards/_cards-articles.scss b/app/assets/stylesheets/components/cards/cards/_cards-articles.scss index 443e327d5..dbd6f99e4 100644 --- a/app/assets/stylesheets/components/cards/cards/_cards-articles.scss +++ b/app/assets/stylesheets/components/cards/cards/_cards-articles.scss @@ -2,6 +2,8 @@ // classes //-------------------------------------------------- &--articles { + @include card-news; + .cards { &__cards { @include flex; @@ -9,34 +11,4 @@ @include flex-wrap; } } - - .card { - @include responsive(margin-bottom, rem-calc(20), rem-calc(30), rem-calc(30)); - @include responsive(width, 100%, 48.5%, 48.5%); - text-decoration: none; - - &__content { - @include responsive(padding, rem-calc(26 20), rem-calc(28 20), rem-calc(30 20)); - } - - &__date { - font-size: rem-calc(14); - margin: 0; - } - - &__h3 { margin: .5em 0; } - &__summary { margin: 0 } - - &__image { - @include flex-center; - background-color: $grey-light; - background-position: center; - background-size: cover; - width: 100%; height: rem-calc(265); - } - - &__icon { - @include image-placeholder(); - } - } -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/cards/_cards-facts.scss b/app/assets/stylesheets/components/cards/cards/_cards-facts.scss index 91ca196f1..5b6da70bd 100644 --- a/app/assets/stylesheets/components/cards/cards/_cards-facts.scss +++ b/app/assets/stylesheets/components/cards/cards/_cards-facts.scss @@ -4,6 +4,7 @@ $cards-facts-margin: rem-calc(10); $cards-facts-width-mobile: rem-calc(240); $cards-facts-width-tablet: rem-calc(274); +$cards-facts-height-tablet: rem-calc(294); //-------------------------------------------------- // classes @@ -24,7 +25,7 @@ $cards-facts-width-tablet: rem-calc(274); @include breakpoint($small) { padding: rem-calc(22); - width: $cards-facts-width-tablet; height: $cards-facts-width-tablet; + width: $cards-facts-width-tablet; height: $cards-facts-height-tablet; } } diff --git a/app/assets/stylesheets/components/cards/cards/_cards-resources.scss b/app/assets/stylesheets/components/cards/cards/_cards-resources.scss index 732f97347..850f150bd 100644 --- a/app/assets/stylesheets/components/cards/cards/_cards-resources.scss +++ b/app/assets/stylesheets/components/cards/cards/_cards-resources.scss @@ -2,6 +2,8 @@ // classes //-------------------------------------------------- &--resources { + @include card-resource; + .cards { &__cards { @include flex; @@ -15,23 +17,4 @@ } } } - - .card { - @include responsive(margin-bottom, rem-calc(20), rem-calc(50), rem-calc(50)); - @include responsive(width, 100%, 50%, 25%); - padding: rem-calc(12 10); - - &--link { - border: solid 1px $white; - cursor: pointer; - text-decoration: none; - - &:hover { border-color: $grey-dark; } - } - - &__date { - @include text-small; - margin-top: 0; - } - } } \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/cards/_cards-themes.scss b/app/assets/stylesheets/components/cards/cards/_cards-themes.scss index 4da930725..fb58e9ea6 100644 --- a/app/assets/stylesheets/components/cards/cards/_cards-themes.scss +++ b/app/assets/stylesheets/components/cards/cards/_cards-themes.scss @@ -11,8 +11,14 @@ } .card--theme { - @include responsive(width, 100%, 100%, calc(50% - 10px)); + width: 100%; + + @include breakpoint($medium) { width: calc(50% - 10px); }; - &:nth-child(3n) { width: 100%; height: rem-calc(460); } + &:nth-child(3n) { + width: 100%; height: rem-calc(460); + + @include breakpoint($medium) { padding-right: 50%; }; + } } } \ No newline at end of file diff --git a/app/assets/stylesheets/components/charts/_chart-legend.scss b/app/assets/stylesheets/components/charts/_chart-legend.scss index b6ac22492..028f1075e 100644 --- a/app/assets/stylesheets/components/charts/_chart-legend.scss +++ b/app/assets/stylesheets/components/charts/_chart-legend.scss @@ -7,14 +7,13 @@ @mixin chart-legend-item { @include flex; - @include flex-v-center; } -@mixin chart-legend-key { +@mixin chart-legend-key($size: 24) { @include flex-no-shrink; border-radius: 100%; margin-right: rem-calc(8); - width: rem-calc(24); height: rem-calc(24); + width: rem-calc($size); height: rem-calc($size); display: block; } @@ -68,6 +67,7 @@ @include flex; @include flex-wrap; @include ul-unstyled; + font-size: rem-calc(14); margin: rem-calc(14 0); .chart__legend-li { margin-right: rem-calc(14); } @@ -77,6 +77,50 @@ .chart__legend-title { line-height: 1; } } +//-------------------------------------------------- +// points polygon ratio +//-------------------------------------------------- +.chart--legend--points-poly { + @include flex; + font-size: rem-calc(14); + margin: rem-calc(14 0); + + .chart__legend-item { + @include chart-legend-item; + @include flex-v-center; + margin-right: rem-calc(20); + } + + .chart__legend-key { @include chart-legend-key($size: 16); } + .chart__legend-title { line-height: 1; } +} + + +//-------------------------------------------------- +// map +//-------------------------------------------------- +.chart--legend--map { + font-size: rem-calc(14); + margin: rem-calc(14 0); + + .chart__legend-item { + @include chart-legend-item; + margin-bottom: rem-calc(10); + } + + .chart__legend-key { + @include chart-legend-key($size: 15); + border: solid 1px $white; + + transform: translateY(1px); + } + + .chart__legend-title { + line-height: 1; + width: rem-calc(220); + } +} + //-------------------------------------------------- // vertical //-------------------------------------------------- @@ -95,7 +139,6 @@ } .chart__legend-item { - // @include chart-legend-item; line-height: 1; margin: 0; } diff --git a/app/assets/stylesheets/components/charts/_horizontal-bar-chart.scss b/app/assets/stylesheets/components/charts/_horizontal-bar-chart.scss deleted file mode 100644 index 189bfedd9..000000000 --- a/app/assets/stylesheets/components/charts/_horizontal-bar-chart.scss +++ /dev/null @@ -1,64 +0,0 @@ -.d3-horizontal-bar-chart { - - // hack to get the svg to scale in IE11 - width: 100%; - - position: relative; - // end hack - - &-animate { - .bar { animation: fullScaleX .8s forwards linear; } - .bar-label { animation: fullOpacity .2s .8s forwards linear; } - } - - &__svg { - // hack to get the svg to scale in IE11 - display: block; - position: absolute; - top: 0; - left: 0; - // end hack - } - - .background { fill: rgba($blue--marine-1, 0.4); } - - .bar { - fill: rgba(0, 0, 0, .4); - transform: scaleX(0); - } - - .bar-label { - //@extend .u-text-sans; - fill: $white; - font-size: rem-calc(14); - opacity: 0; - - &--dark { fill: #666666; } - } - - .gridlines { - .domain { stroke-width: 0; } - - .tick { - line { stroke: $white; } - } - } - - .xaxis { - .domain { stroke-width: 0; } - - text { - fill: $blue--marine-5; - font-size: rem-calc(12); - } - } - - .yaxis { - .domain { stroke-width: 0; } - - text { - fill: $blue--marine-5; - font-size: rem-calc(16); - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/components/charts/_interactive-treemap.scss b/app/assets/stylesheets/components/charts/_interactive-treemap.scss deleted file mode 100644 index 394fa8727..000000000 --- a/app/assets/stylesheets/components/charts/_interactive-treemap.scss +++ /dev/null @@ -1,139 +0,0 @@ -.v-interactive-treemap { - - //---------------------------------------- - // grid - //---------------------------------------- - .flex-2-fiths, - .flex-3-fiths { - @media only screen and (max-width: $large){ - flex: 0 0 100%; - } - } - - //---------------------------------------- - // info panel - //---------------------------------------- - &__info-panel { - display: none; - - @include breakpoint($medium){ display: block; } - } - - &__list { - @include breakpoint($medium){ display: none; } - } - - &__list-item { - font-size: rem-calc(14); - padding: rem-calc(14 12 16 12); - - &:nth-child(even){ background-color: $grey-light; } - - @include breakpoint($medium){ padding: rem-calc(14 12 2 12); } - } - - &__info { - line-height: 1.2; - - @include breakpoint($medium){ - margin-bottom: rem-calc(16); - } - - @include breakpoint($large){ margin-right: rem-calc(24); } - } - - &__title { - border-bottom: solid rem-calc(1) $grey-xdark; - color: $blue--marine-4; - font-size: rem-calc(24); - line-height: 1; - margin-bottom: rem-calc(16); - padding-bottom: rem-calc(6); - - @include breakpoint($medium){ - font-size: rem-calc(28); - margin-bottom: rem-calc(20); - padding-bottom: rem-calc(8); - } - - @include breakpoint($large){ - font-size: rem-calc(34); - margin-bottom: rem-calc(26); - padding-bottom: rem-calc(10); - } - } - - &__stat { - margin-top: rem-calc(10); - flex: 0 0 50%; - - @include breakpoint($medium){ margin-top: rem-calc(20); } - @include breakpoint($large){ flex: 0 0 100%; } - } - - &__percent { - color: $marine-accent-color; - font-size: rem-calc(20); - - display: block; - - @include breakpoint($medium){ font-size: rem-calc(34); } - @include breakpoint($large){ font-size: rem-calc(46); } - } - - &__km { - color: $marine-accent-color; - font-size: rem-calc(14); - margin-bottom: rem-calc(8); - - display: block; - - @include breakpoint($medium){ font-size: rem-calc(22); } - @include breakpoint($large){ font-size: rem-calc(28); } - } - - //---------------------------------------- - // treemap - //---------------------------------------- - &__treemap { - margin-bottom: rem-calc(20); - - @include breakpoint($medium){ margin-bottom: 0; } - } - - &__cell { - text { font-size: rem-calc(16); } - - &-active { - text { font-weight: bold; } - } - } - - //---------------------------------------- - // instruction - //---------------------------------------- - &__instruction { - font-size: rem-calc(15); - margin-top: rem-calc(10); - } -} - -//---------------------------------------- -// treemap component -//---------------------------------------- -.d3-treemap { - // hack to get the svg to scale in IE11 - width: 100%; - - position: relative; - // end hack - - &__svg { - // hack to get the svg to scale in IE11 - display: block; - position: absolute; - top: 0; - left: 0; - // end hack - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/components/charts/_sunburst.scss b/app/assets/stylesheets/components/charts/_sunburst.scss deleted file mode 100644 index a2609017d..000000000 --- a/app/assets/stylesheets/components/charts/_sunburst.scss +++ /dev/null @@ -1,63 +0,0 @@ -.d3-sunburst { - position: relative; - - &-wrapper { - margin: 0 auto rem-calc(16) auto; - width: 60%; - - @include breakpoint($medium){ - margin: 0 auto; - width: 100%; - } - } - - &__svg { - // hack to get the svg to scale in IE11 - display: block; - position: absolute; - top: 0; - left: 0; - // end hack - } - - &__info-wrapper { - display: flex; - - align-items: center; - } - - &__info { - margin: 0 auto; - padding: rem-calc(12); - text-align: center; - - display: none; - - @include breakpoint($medium){ - margin: 0 0 0 rem-calc(14); - text-align: left; - } - - @include breakpoint($large){ margin-left: rem-calc(22); } - - &--active { display: block; } - } - - &__title { - color: $blue--marine-3; - font-size: rem-calc(22); - margin-bottom: rem-calc(12); - - @include breakpoint($large){ font-size: rem-calc(28); } - } - - &__subtitle { - font-weight: bold; - line-height: 1.3; - margin-top: rem-calc(12); - - display: block; - - @include breakpoint($large){ font-size: rem-calc(20); } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/components/form/_checkbox.scss b/app/assets/stylesheets/components/form/_checkbox.scss index 0fdbd5003..223acc53e 100644 --- a/app/assets/stylesheets/components/form/_checkbox.scss +++ b/app/assets/stylesheets/components/form/_checkbox.scss @@ -24,16 +24,17 @@ @include input-hidden; &:checked + .checkbox__input-fake { - // @include input-custom-checkbox-selected(); background-color: $primary; } - &:focus + .checkbox__input-fake { @include input-custom-focus; } + &:focus + .checkbox__input-fake { + @include input-custom-focus; + } } &__input-fake { - // @include input-custom-checkbox(rem-calc(20)); background-color: $white; + border: solid 1px $grey-light; border-radius: $radius-global; width: 100%; height: calc(100% - 5px); diff --git a/app/assets/stylesheets/components/hero/_hero-area-type.scss b/app/assets/stylesheets/components/hero/_hero-area-type.scss index 0c687f440..92d47cd72 100644 --- a/app/assets/stylesheets/components/hero/_hero-area-type.scss +++ b/app/assets/stylesheets/components/hero/_hero-area-type.scss @@ -3,6 +3,7 @@ //-------------------------------------------------- &--area-type { @include hero-medium; + @include hero-padding; @include hero-stat-bubble; z-index: 0; diff --git a/app/assets/stylesheets/components/hero/_hero-basic.scss b/app/assets/stylesheets/components/hero/_hero-basic.scss index efc9933d5..1f75ab93f 100644 --- a/app/assets/stylesheets/components/hero/_hero-basic.scss +++ b/app/assets/stylesheets/components/hero/_hero-basic.scss @@ -3,6 +3,7 @@ //-------------------------------------------------- &--basic { @include hero-medium; + @include hero-padding; @include flex; @include flex-v-center; z-index: 0; diff --git a/app/assets/stylesheets/components/hero/_hero-small.scss b/app/assets/stylesheets/components/hero/_hero-small.scss new file mode 100644 index 000000000..a275c9777 --- /dev/null +++ b/app/assets/stylesheets/components/hero/_hero-small.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--small { + @include hero-padding; + min-height: rem-calc(150); + + @include breakpoint($small) { min-height: rem-calc(210); } + @include breakpoint($medium) { min-height: rem-calc(315); } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/hero/_hero-thematic.scss b/app/assets/stylesheets/components/hero/_hero-thematic.scss index a50f599d2..c610f1887 100644 --- a/app/assets/stylesheets/components/hero/_hero-thematic.scss +++ b/app/assets/stylesheets/components/hero/_hero-thematic.scss @@ -3,6 +3,7 @@ //-------------------------------------------------- &--thematic { @include hero-medium; + @include hero-padding; .hero__container { @include hero-container; } diff --git a/app/assets/stylesheets/components/table/_table-pame.scss b/app/assets/stylesheets/components/table/_table-pame.scss index 439fb6092..682b57fa6 100644 --- a/app/assets/stylesheets/components/table/_table-pame.scss +++ b/app/assets/stylesheets/components/table/_table-pame.scss @@ -41,7 +41,7 @@ &:first-child { border-left: none; } &:before { - font-weight: bold; + font-weight: $bold; margin-right: rem-calc(6); @include breakpoint($medium){ display: none; } @@ -61,6 +61,15 @@ &:nth-child(9) { &:before { content: 'Metadata ID:'; } } } + &__cell-modal-trigger { + color: $primary; + cursor: pointer; + font-weight: $bold; + text-decoration: underline; + + &:hover { text-decoration: none; } + } + &__sorting { opacity: .7; vertical-align: middle; diff --git a/app/assets/stylesheets/helpers/_form-fields.scss b/app/assets/stylesheets/helpers/_form-fields.scss index 7159522cd..39a1ad0c1 100644 --- a/app/assets/stylesheets/helpers/_form-fields.scss +++ b/app/assets/stylesheets/helpers/_form-fields.scss @@ -25,14 +25,8 @@ } @mixin input-custom-focus { - outline-width: rem-calc(2); - outline-style: solid; - outline-color: Highlight; - - @media (-webkit-min-device-pixel-ratio:0) { - outline-color: -webkit-focus-ring-color; - outline-style: auto; - } + border: solid 2px $black; + outline: 0; } //-------------------------------------------------- diff --git a/app/assets/stylesheets/helpers/_helpers.scss b/app/assets/stylesheets/helpers/_helpers.scss index d960682af..328d7ad73 100644 --- a/app/assets/stylesheets/helpers/_helpers.scss +++ b/app/assets/stylesheets/helpers/_helpers.scss @@ -28,7 +28,7 @@ height: 100vh; } -.flex-stack-mobile { +@mixin flex-stack-mobile { display: flex; flex-wrap: wrap; diff --git a/app/assets/stylesheets/pages/_country.scss b/app/assets/stylesheets/pages/_country.scss new file mode 100644 index 000000000..ed18c63ca --- /dev/null +++ b/app/assets/stylesheets/pages/_country.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +.page--country { + .page { + &__section--overview-map { + @include flex-stack-mobile; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/_marine.scss b/app/assets/stylesheets/pages/_marine.scss deleted file mode 100644 index d25b50cb0..000000000 --- a/app/assets/stylesheets/pages/_marine.scss +++ /dev/null @@ -1,137 +0,0 @@ -//---------------------------------------- -// marine page utility classes -//---------------------------------------- -.marine-4 { color: $blue--marine-4; } -.u-marine-accent-color { color: $marine-accent-color; } - -//---------------------------------------- -// marine page template -//---------------------------------------- -.template--marine { - color: $blue--marine-5; - - //---------------------------------------- - // html elements - //---------------------------------------- - - - h4 { - border-bottom: solid rem-calc(1) $blue--marine-5; - color: $blue--marine-5; - margin-bottom: rem-calc(14); - padding-bottom: rem-calc(4); - - @include breakpoint($medium){ - margin-bottom: rem-calc(18); - padding-bottom: rem-calc(6); - } - - @include breakpoint($large){ - margin-bottom: rem-calc(22); - padding-bottom: rem-calc(8); - } - } - - a { - color: $blue--marine-3; - text-decoration: underline; - - &:hover { text-decoration: none; } - - &.button--basic-link { - text-decoration: none; - - &:hover { text-decoration: underline; } - } - - &.social--share { text-decoration: none; } - } - - //---------------------------------------- - // sections - //--------------------------------------- - - .section--block-color { - //@extend .u-bg--marine-2; - - a { - color: $blue--marine-5; - text-decoration: underline; - - &:hover { text-decoration: none; } - - &.leaflet-control-zoom-in, - &.leaflet-control-zoom-out { - text-decoration: none; - - &:hover { background-color: lighten($blue--marine-1, 12%); } - } - - &.leaflet-popup-close-button { - text-decoration: none; - - &:hover { color: lighten($blue--marine-5, 12%); } - } - } - - .leaflet-popup-content a { - text-decoration: none; - - &:hover { color: lighten($blue--marine-5, 10%); } - } - } - - &__section__introduction { - //@extend .text--standard; - line-height: 1.7; - margin-bottom: 2.25em; - - @include breakpoint($medium){ margin-bottom: 3.25em; } - - - } - - &__fact-padding-top { - margin-top: rem-calc(86); - - @include breakpoint($medium){ margin-top: 0; } - } - - &__fact-padding-bottom { - padding-bottom: rem-calc(44); - - @include breakpoint($medium){ padding-bottom: 0; } - } - - //---------------------------------------- - // sticky nav - //---------------------------------------- - .v-sticky-nav { - position: absolute; - right: 0; - bottom: 0; - left: 0; - } - - //---------------------------------------- - // page sections - //---------------------------------------- - - @import 'marine/map'; - @import 'marine/ecoregions'; - @import 'marine/distribution'; - @import 'marine/pledges'; - @import 'marine/greenlist'; - - //---------------------------------------- - // footer - //---------------------------------------- - &__footer { - a { - color: $green; - text-decoration: none; - } - - .reference__body { margin-bottom: rem-calc(14); } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/_region.scss b/app/assets/stylesheets/pages/_region.scss new file mode 100644 index 000000000..d42de1245 --- /dev/null +++ b/app/assets/stylesheets/pages/_region.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +.page--region { + .page { + &__section--overview-map { + @include flex-stack-mobile; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/_site.scss b/app/assets/stylesheets/pages/_site.scss index f87adbc67..d2952b386 100644 --- a/app/assets/stylesheets/pages/_site.scss +++ b/app/assets/stylesheets/pages/_site.scss @@ -4,11 +4,14 @@ .page--site { .page { + &__section--overview-map { + @include flex-stack-mobile; + } + &__container { @include breakpoint($small) { @include flex; @include flex-wrap; - } } diff --git a/app/assets/stylesheets/pages/marine/_distribution.scss b/app/assets/stylesheets/pages/marine/_distribution.scss deleted file mode 100644 index f9d755e85..000000000 --- a/app/assets/stylesheets/pages/marine/_distribution.scss +++ /dev/null @@ -1,166 +0,0 @@ -.infographic { - padding: rem-calc(16 18 10 18); - - @include breakpoint($medium){ padding: rem-calc(30 24); } - - &__left { - @include breakpoint($medium){ padding-right: rem-calc(12); } - @include breakpoint($large){ padding-right: rem-calc(60); } - } - - &__right { - margin-top: rem-calc(22); - - @include breakpoint($medium){ - margin-top: 0; - padding-left: rem-calc(12); - text-align: right; - } - - @include breakpoint($large){ padding-left: rem-calc(60); } - } - - &__header { - font-size: rem-calc(22); - border-bottom: solid rem-calc(1) $blue--marine-5; - padding-bottom: rem-calc(8); - margin-bottom: rem-calc(14); - - @include breakpoint($medium){ margin-bottom: rem-calc(22); } - - &--fancy { - @include breakpoint($medium){ - border-bottom: none; - padding: 0; - text-align: center; - - position: relative; - } - - &:before, - &:after { - @include breakpoint($medium){ - background-color: $blue--marine-5; - content: ''; - width: 30%; height: rem-calc(1); - - position: absolute; - top: 50%; - } - - @include breakpoint($large){ width: 36%; } - } - - &:before { left: 0; } - &:after { right: 0; } - } - } - - &__intro { - margin-bottom: rem-calc(30); - - @include breakpoint($medium){ margin-bottom: rem-calc(50); } - - p { margin-bottom: rem-calc(14); } - } - - &__bar { - background-color: $blue--marine-1; - margin: rem-calc(14 0 14 0); - width: 100%; height: rem-calc(58); - - position: relative; - - @include breakpoint($medium){ - margin: rem-calc(34 0 20 0); - height: rem-calc(96); - } - - @include breakpoint($large){ - height: rem-calc(106); - margin: rem-calc(34 0 26 0); - } - - &--national { background-color: $blue--marine-4; } - - &--pa { - background-color: $marine-accent-color; - - transform-origin: left; - transform: scaleX(0); - - &--animate { animation: fullScaleX .8s linear forwards; } - } - - &--global { - margin-bottom: rem-calc(40); - - @include breakpoint($medium){ margin-bottom: rem-calc(60); } - } - } - - &__bar-layer { - height: 100%; - - display: block; - position: absolute; - left: 0; - - &--highseas { - @include breakpoint($medium){ - left: auto; - right: 0; - } - } - } - - &__pa { - margin-bottom: rem-calc(2); - - display: block; - } - - &__km { - font-size: rem-calc(14); - - @include breakpoint($medium){ font-size: rem-calc(22); } - @include breakpoint($large){ font-size: rem-calc(28); } - - sup { font-size: .6em; } - } - - &__percent { - height: 100%; - - position: absolute; - top: rem-calc(6); - - @include breakpoint($medium){ top: rem-calc(12); } - - &--national { - color: $blue--marine-1; - - left: rem-calc(4); - - @include breakpoint($medium){ left: rem-calc(14); } - } - - &--highseas { - color: $blue--marine-4; - text-align: right; - - right: rem-calc(4); - - @include breakpoint($medium){ right: rem-calc(14); } - } - - &__title { - font-size: rem-calc(12); - margin-bottom: rem-calc(10); - - display: block; - - @include breakpoint($medium){ font-size: rem-calc(22); } - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/marine/_ecoregions.scss b/app/assets/stylesheets/pages/marine/_ecoregions.scss deleted file mode 100644 index 0b912e3d4..000000000 --- a/app/assets/stylesheets/pages/marine/_ecoregions.scss +++ /dev/null @@ -1,14 +0,0 @@ -//---------------------------------------- -// fact -//---------------------------------------- -&__fact { - position: absolute; - top: rem-calc(-150); - right: rem-calc(20); - - @include breakpoint($medium){ - flex: 0 0 25%; - - position: static; - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/marine/_greenlist.scss b/app/assets/stylesheets/pages/marine/_greenlist.scss deleted file mode 100644 index c248f5d7c..000000000 --- a/app/assets/stylesheets/pages/marine/_greenlist.scss +++ /dev/null @@ -1,46 +0,0 @@ -&__greenlist { - - // overwrite styles used in the partial so that it looks better on mobile etc. - &-result { - padding-bottom: rem-calc(30); - flex: 0 0 100%; - width: auto; - - @include breakpoint($medium){ - padding-right: rem-calc(30); - flex: 0 1 50%; - } - - @media (min-width: ($medium + 1)\0) { - flex-basis: calc(50% - 30px); //target IE11 - } - - @include breakpoint($large){ - padding: rem-calc(0 40 40 0); - flex: 0 0 33%; - } - - @media (min-width: ($large + 1)\0) { - flex-basis: calc(33% - 40px); //target IE11 - } - } -} - -.result { - margin: 0; - width: 100%; - - img { width: 100%; } -} - -.inner-result { - a { - color: $green; - text-decoration: none; - } - - p a { - color: $white; - text-decoration: none; - } -} diff --git a/app/assets/stylesheets/pages/marine/_map.scss b/app/assets/stylesheets/pages/marine/_map.scss deleted file mode 100644 index 6299c0302..000000000 --- a/app/assets/stylesheets/pages/marine/_map.scss +++ /dev/null @@ -1,23 +0,0 @@ -&__counter { - background: rgba(white, .4); - margin-top: rem-calc(40); - padding: rem-calc(20 0 20 24); - width: rem-calc(290); - - position: absolute; - top: 0; - right: 0; - - @include breakpoint($medium){ width: rem-calc(430); } -} - -&__map-disclaimer { - color: $blue--marine-4; - font-family: 'MuseoSans'; - font-size: rem-calc(8); - padding-top: rem-calc(14); - padding-bottom: rem-calc(14); - text-align: center; - - @include breakpoint($medium){ font-size: rem-calc(13); } -} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/marine/_pledges.scss b/app/assets/stylesheets/pages/marine/_pledges.scss deleted file mode 100644 index b9b903d6d..000000000 --- a/app/assets/stylesheets/pages/marine/_pledges.scss +++ /dev/null @@ -1,55 +0,0 @@ -&__pledges { - position: relative; - - &-title { - //@extend .u-text-sans; - border-bottom: solid rem-calc(1) $blue--marine-5; - color: $blue--marine-5; - margin-bottom: rem-calc(20); - padding-bottom: rem-calc(4); - - @include breakpoint($medium){ - margin-bottom: rem-calc(24); - padding-top: rem-calc(21); - padding-bottom: rem-calc(6); - } - - @include breakpoint($large){ - margin-bottom: rem-calc(36); - padding-bottom: rem-calc(8); - } - - h4 { - border: none; - margin: 0; - padding: 0; - } - - a { text-decoration: none; } - } - - &-counter { - padding: rem-calc(20 0 20 24); - - width: rem-calc(226); - - position: absolute; - top: 0; - right: 0; - - @include breakpoint($medium){ width: rem-calc(320); } - @include breakpoint($large){ width: rem-calc(394); } - } - - &-sunburst { - padding-top: rem-calc(138); - width: 100%; - - @include breakpoint($medium){ - padding-top: 0; - width: 60%; - } - - @include breakpoint($large){ width: 64%; } - } -} \ No newline at end of file diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 592dba2f2..d9a27eedd 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -140,6 +140,7 @@ def store_location def set_host_for_local_storage Rails.application.routes.default_url_options[:host] = request.base_url if Rails.application.config.active_storage.service == :local - #ActiveStorage::Current.host = request.base_url if Rails.application.config.active_storage.service == :local + # TODO Check why this is not set automatically + ActiveStorage::Current.host = request.base_url if Rails.application.config.active_storage.service == :local end end diff --git a/app/controllers/concerns/searchable.rb b/app/controllers/concerns/searchable.rb index 956e44efa..d0b3e53b2 100644 --- a/app/controllers/concerns/searchable.rb +++ b/app/controllers/concerns/searchable.rb @@ -35,9 +35,13 @@ def search_options 'country' => Search::COUNTRY_INDEX, 'region' => Search::REGION_INDEX, 'all' => Search::DEFAULT_INDEX_NAME, - 'areas' => Search::PA_INDEX + 'areas' => Search::PA_INDEX, + 'cms' => Search::CMS_INDEX }.freeze def search_index + _index = search_params[:search_index] + return INDEX_BY_TYPE[_index] if _index.present? + _index = INDEX_BY_TYPE[parsed_filters['ancestor']] if parsed_filters return _index if _index @@ -82,6 +86,7 @@ def sanitise_filters _filters = sanitise_db_type_filter(_filters) _filters = sanitise_type_filter(_filters) _filters = sanitise_ancestor_filter(_filters) + _filters = sanitise_categories_filter(_filters) sanitise_special_status_filter(_filters) end @@ -135,6 +140,17 @@ def sanitise_special_status_filter(filters) filters end + def sanitise_categories_filter(filters) + topics = filters.delete('topics') + types = filters.delete('types') + + return filters if topics.blank? && types.blank? + + filters[:topic] = topics if topics.present? + filters[:page_type] = types if types.present? + filters + end + def load_filters return if @filter_groups diff --git a/app/controllers/country_controller.rb b/app/controllers/country_controller.rb index da8b4188f..902ea13e4 100644 --- a/app/controllers/country_controller.rb +++ b/app/controllers/country_controller.rb @@ -30,9 +30,9 @@ def show } ] - @total_oecm = 0 # #TODO + @total_oecm = @country.protected_areas.oecms.count @total_pame = @country.protected_areas.with_pame_evaluations.count - @total_wdpa = @country.protected_areas.count + @total_wdpa = @country.protected_areas.wdpas.count @map = { overlays: MapOverlaysSerializer.new(map_overlays, map_yml).serialize diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index be8bc38c4..9acd88121 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -2,6 +2,8 @@ class HomeController < ApplicationController include MapHelper def index + @presenter = HomePresenter.new + @pa_coverage_percentage = 9999 #TODO Total PA coverage in % @config_search_areas = { @@ -13,60 +15,7 @@ def index @pas_button = home_yml[:pas][:button] @pas_levels = levels - @site_facts = [ - { - percentage: 00, #total percentage coverage of terrestrial pas - theme: I18n.t('home.facts')[0][:theme], - title: I18n.t('home.facts')[0][:title], - totals: [ - { - number: 00, #total terrestrial pas - text: I18n.t('home.total_pas') - } - ] - }, - { - percentage: 00, #total percentage coverage of marine pas - theme: I18n.t('home.facts')[1][:theme], - title: I18n.t('home.facts')[1][:title], - totals: [ - { - number: 00, #total marine pas - text: I18n.t('home.total_pas') - } - ] - }, - { - percentage: 00, #total percentage coverage of terrestrial pas and OECMs - theme: I18n.t('home.facts')[2][:theme], - title: I18n.t('home.facts')[2][:title], - totals: [ - { - number: 00, #total terrestrial pas - text: I18n.t('home.total_pas') - }, - { - number: 00, #total terrestrial oecms - text: I18n.t('home.total_oecms') - } - ] - }, - { - percentage: 00, #total percentage coverage of marine pas and OECMs - theme: I18n.t('home.facts')[3][:theme], - title: I18n.t('home.facts')[3][:title], - totals: [ - { - number: 00, #total marine pas - text: I18n.t('home.total_pas') - }, - { - number: 00, #total marine oecms - text: I18n.t('home.total_oecms') - } - ] - } - ] + @site_facts = @presenter.fact_card_stats comfy_themes = Comfy::Cms::Page.find_by_slug("thematical-areas") @themes_title = comfy_themes.label diff --git a/app/controllers/region_controller.rb b/app/controllers/region_controller.rb index 747c89844..5431f8d99 100644 --- a/app/controllers/region_controller.rb +++ b/app/controllers/region_controller.rb @@ -22,8 +22,9 @@ def show } ] - @total_oecm = 0 ##TODO - @total_wdpa = @region.protected_areas.count + @total_oecm = @region.protected_areas.oecms.count + @total_pame = @region.protected_areas.with_pame_evaluations.count + @total_wdpa = @region.protected_areas.wdpas.count @wdpa = pas_sample diff --git a/app/controllers/resources_controller.rb b/app/controllers/resources_controller.rb deleted file mode 100644 index 5ab936596..000000000 --- a/app/controllers/resources_controller.rb +++ /dev/null @@ -1,28 +0,0 @@ -class ResourcesController < ApplicationController - before_action :load_category - - def index - @all_resources = Comfy::Cms::Page.for_category(@category.label) - @resources = search(@all_resources).reject(&:root?).reject { |p| p.parent.label != "Index" } - end - - private - - def load_category - @category = if params[:category_id] - Comfy::Cms::Category.find(params[:category_id]) - else - Comfy::Cms::Category.first - end - rescue - @category = Comfy::Cms::Category.first - end - - def search resources - if params[:year] - resources.where("date_part('year', created_at) = ?", params[:year]) - else - resources - end - end -end diff --git a/app/controllers/search_areas_controller.rb b/app/controllers/search_areas_controller.rb index 9defe5561..b0c43b2c7 100644 --- a/app/controllers/search_areas_controller.rb +++ b/app/controllers/search_areas_controller.rb @@ -49,7 +49,7 @@ def search_overlays def search_params params.permit( - :search_term, :geo_type, :items_per_page, :requested_page, :filters, + :search_term, :geo_type, :items_per_page, :requested_page, :search_index, :filters, filters: [db_type: [], is_type: [], special_status: [], designation: [], governance: [], location: [:type, options: []]] ) diff --git a/app/controllers/search_cms_controller.rb b/app/controllers/search_cms_controller.rb new file mode 100644 index 000000000..8e9b9993a --- /dev/null +++ b/app/controllers/search_cms_controller.rb @@ -0,0 +1,21 @@ +class SearchCmsController < ApplicationController + include Concerns::Searchable + + before_action :load_search, only: [:index] + + def index + _options = { + page: search_params[:requested_page], + per_page: search_params[:items_per_page] + } + @results = Search::CmsSerializer.new(@search, _options).serialize + + render json: @results + end + + private + + def search_params + params.permit(:search_term, :type, :requested_page, :items_per_page, :search_index, :filters) + end +end \ No newline at end of file diff --git a/app/controllers/search_controller.rb b/app/controllers/search_controller.rb index 7137a415c..f3530b652 100644 --- a/app/controllers/search_controller.rb +++ b/app/controllers/search_controller.rb @@ -38,14 +38,14 @@ def map def autocomplete db_type = search_params[:type] - @results = Autocompletion.lookup(search_params[:search_term], db_type, search_index(db_type)) + @results = Autocompletion.lookup(search_params[:search_term], db_type, autocomplete_search_index(db_type)) render json: @results end private - def search_index db_type + def autocomplete_search_index db_type case db_type when 'country' Search::COUNTRY_INDEX @@ -57,6 +57,6 @@ def search_index db_type end def search_params - params.permit(:search_term, :type, :requested_page, :items_per_page, :filters) + params.permit(:search_term, :type, :requested_page, :items_per_page, :search_index, :filters) end end diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 7ef92e6ab..7f9a23f97 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -175,12 +175,12 @@ def get_resource_cards(all=false) url = file.present? || link.present? ? nil : get_cms_url(page.full_path) c.merge( - published_date: cms_fragment_render(:published_date, page), + date: DateTime.parse(cms_fragment_render(:published_date, page)).strftime('%d %B %y'), url: url, summary: cms_fragment_render(:summary, page), - file: file, - link: link, - link_title: cms_fragment_render(:link_title, page) + fileUrl: file, + linkUrl: link, + linktTile: cms_fragment_render(:link_title, page) ) end diff --git a/app/helpers/cms_helper.rb b/app/helpers/cms_helper.rb index 5de2606a2..ed37a808d 100644 --- a/app/helpers/cms_helper.rb +++ b/app/helpers/cms_helper.rb @@ -36,6 +36,24 @@ def cms_page_path page "#" end + def get_category_filters + category_groups = load_categories + + [ + { + title: I18n.t('search.filter-by'), + filters: category_groups.map do |group| + { + id: group[:id], + options: group[:items], + title: group[:title], + type: 'checkbox' + } + end + } + ].to_json + end + def get_cms_tabs total_tabs tabs = [] @@ -98,27 +116,29 @@ def load_categories # can be different from the layout used in the child pages if layouts_categories.blank? children_layouts = @cms_page.children.map(&:layout_id) - layouts_categories = Comfy::Cms::LayoutsCategory.where(layout_id: children_layouts) + layout_categories = Comfy::Cms::LayoutsCategory.where(layout_id: children_layouts) + .map(&:layout_category).uniq end categories_yml = I18n.t('search')[:custom_categories] - layouts_categories.map do |lc| - name = categories_yml[lc.layout_category.label.to_sym][:name] - page_categories = lc.layout_category.page_categories + layout_categories.map do |lc| + name = categories_yml[lc.label.to_sym][:name] + page_categories = lc.page_categories localised_pcs = categories_yml[name.to_sym][:items] items = page_categories.map do |pc| { id: pc.id, - name: localised_pcs[pc.label.to_sym] + title: localised_pcs[pc.label.to_sym] } end # frontend should return the list of selected categories as follows: # 'group_name' => [category_ids] ; e.g. 'topics' => [1,2,3] { - name: name, - items: items + id: name, + items: items, + title: name } end end diff --git a/app/helpers/countries_helper.rb b/app/helpers/countries_helper.rb index 98000f6f7..ca1a4e2e6 100644 --- a/app/helpers/countries_helper.rb +++ b/app/helpers/countries_helper.rb @@ -3,6 +3,10 @@ def is_malaysia? @country && @country.iso_3 == "MYS" end + def has_related_countries? + @country.children.any? || @country.parent.present? + end + def has_restricted_sites? restricted_iso3 = ["RUS", "EST", "CHN", "GBR"] diff --git a/app/helpers/map_helper.rb b/app/helpers/map_helper.rb index b575af776..50369bd6c 100644 --- a/app/helpers/map_helper.rb +++ b/app/helpers/map_helper.rb @@ -1,62 +1,76 @@ -OVERLAYS = [ - { - id: 'terrestrial_wdpa', - isToggleable: false, - layers: ["https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_of_Protected_Areas/MapServer/tile/{z}/{y}/{x}"], - color: "#38A800", - isShownByDefault: true - }, - { - id: 'marine_wdpa', - isToggleable: false, - layers: ["https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_of_Protected_Areas/MapServer/tile/{z}/{y}/{x}"], - color: "#004DA8", - isShownByDefault: true - }, - { - id: 'oecm', - isToggleable: true, - layers: ["https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_other_effective_area_based_conservation_measures/MapServer/tile/{z}/{y}/{x}"], - color: "#D9B143", - isShownByDefault: true - } -].freeze +module MapHelper + OVERLAYS = [ + { + id: 'terrestrial_wdpa', + isToggleable: false, + layers: ["https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_of_Protected_Areas/MapServer/tile/{z}/{y}/{x}"], + color: "#38A800", + isShownByDefault: true + }, + { + id: 'marine_wdpa', + isToggleable: false, + layers: ["https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_of_Protected_Areas/MapServer/tile/{z}/{y}/{x}"], + color: "#004DA8", + isShownByDefault: true + }, + { + id: 'oecm', + isToggleable: true, + layers: ["https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_other_effective_area_based_conservation_measures/MapServer/tile/{z}/{y}/{x}"], + color: "#D9B143", + isShownByDefault: true + } + ].freeze -WDPA_FEATURE_SERVER_URL = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_of_Protected_Areas/FeatureServer' -OECM_FEATURE_SERVER_LAYER_URL = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_other_effective_area_based_conservation_measures/FeatureServer/0/' + WDPA_FEATURE_SERVER_URL = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_of_Protected_Areas/FeatureServer' + OECM_FEATURE_SERVER_LAYER_URL = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_other_effective_area_based_conservation_measures/FeatureServer/0/' -SERVICES_FOR_POINT_QUERY = [ - { url: OECM_FEATURE_SERVER_LAYER_URL, isPoint: false }, - { url: WDPA_FEATURE_SERVER_URL + '/0/', isPoint: true }, - { url: WDPA_FEATURE_SERVER_URL + '/1/', isPoint: false } -].freeze + SERVICES_FOR_POINT_QUERY = [ + { url: OECM_FEATURE_SERVER_LAYER_URL, isPoint: false }, + { url: WDPA_FEATURE_SERVER_URL + '/0/', isPoint: true }, + { url: WDPA_FEATURE_SERVER_URL + '/1/', isPoint: false } + ].freeze + + def country_extent_url (iso3) + { + url: "https://data-gis.unep-wcmc.org/server/rest/services/AdministrativeUnits/GADM_EEZ_Layer/FeatureServer/0/query?where=GID_0+%3D+%27#{iso3}%27&returnGeometry=false&returnExtentOnly=true&outSR=4326&f=pjson", + padding: 5 + } + end -module MapHelper def overlays (ids, options={}) includedOverlays = OVERLAYS.select {|o| ids.include?(o[:id])} - + includedOverlays.map do |defaultOptions| overlayOptions = options[defaultOptions[:id].to_sym] overlayOptions.nil? ? defaultOptions : defaultOptions.merge(overlayOptions) end + end + + def map_legend + [ + { theme: 'theme--terrestrial', title: I18n.t('map.overlays.terrestrial_wdpa.title') }, + { theme: 'theme--marine', title: I18n.t('map.overlays.marine_wdpa.title') }, + { theme: 'theme--oecm', title: I18n.t('map.overlays.oecm.title') } + ] end - def map_yml - I18n.t('map') - end + def map_search_types + arr = [] - def services_for_point_query - SERVICES_FOR_POINT_QUERY + t('map.search_types').each do |id, translations| + arr.push(translations.merge({id: id})) + end + + arr end - def country_extent_url (iso3) - { - url: "https://data-gis.unep-wcmc.org/server/rest/services/AdministrativeUnits/GADM_EEZ_Layer/FeatureServer/0/query?where=GID_0+%3D+%27#{iso3}%27&returnGeometry=false&returnExtentOnly=true&outSR=4326&f=pjson", - padding: 5 - } + def map_yml + I18n.t('map') end - + def region_extent_url (name) { url: "https://data-gis.unep-wcmc.org/server/rest/services/AdministrativeUnits/GADM_EEZ_Layer/FeatureServer/0/query?where=region+%3D+%27#{CGI.escape(name)}%27&returnGeometry=false&returnExtentOnly=true&outSR=4326&f=pjson", @@ -64,13 +78,7 @@ def region_extent_url (name) } end - def map_search_types - arr = [] - - t('map.search_types').each do |id, translations| - arr.push(translations.merge({id: id})) - end - - arr + def services_for_point_query + SERVICES_FOR_POINT_QUERY end -end +end \ No newline at end of file diff --git a/app/helpers/protected_areas_helper.rb b/app/helpers/protected_areas_helper.rb index 32314f6f8..6655ff66f 100644 --- a/app/helpers/protected_areas_helper.rb +++ b/app/helpers/protected_areas_helper.rb @@ -51,4 +51,14 @@ def has_pame_statistics_for(presenter, area=:land) def management_plan_document MP_DOCUMENTS[@protected_area.wdpa_id] end + + def map_layer_type + if @protected_area.is_oecm + I18n.t('map.overlays.oecm.title') + elsif @protected_area.marine + I18n.t('map.overlays.marine_wdpa.title') + else + I18n.t('map.overlays.terrestrial_wdpa.title') + end + end end diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb index 19dea2be6..7fd437f1c 100644 --- a/app/helpers/search_helper.rb +++ b/app/helpers/search_helper.rb @@ -52,6 +52,17 @@ def search_title params, only_text=false only_text ? strip_tags(title) : title end + def cms_pages_for_search + _filters = {filters: {ancestor: @cms_page.id } } + _options = { + page: 1, + size: Search::CmsSerializer::DEFAULT_PAGE_SIZE[@cms_page.slug.underscore.to_sym] + } + _search = Search.search('', _options.merge(_filters), Search::CMS_INDEX) + + Search::CmsSerializer.new(_search, _options).serialize + end + private def title_with_query query diff --git a/app/javascript/components/autocomplete/Autocomplete.vue b/app/javascript/components/autocomplete/Autocomplete.vue index acd3abf91..6fb46cc19 100644 --- a/app/javascript/components/autocomplete/Autocomplete.vue +++ b/app/javascript/components/autocomplete/Autocomplete.vue @@ -18,7 +18,7 @@ @input="onInput" @keyup.enter.prevent.stop="onInputEnter" @keyup.esc.prevent.stop="onEscape" - > + />