diff --git a/.gitmodules b/.gitmodules index e9e019370..fa9550625 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,4 +1,4 @@ [submodule "db"] path = db url = https://github.com/unepwcmc/protectedplanet-db.git - branch = refresh + branch = ticket-13 \ No newline at end of file diff --git a/app/assets/images/logos/green-list-black.png b/app/assets/images/logos/green-list-black.png new file mode 100644 index 000000000..bed241a46 Binary files /dev/null and b/app/assets/images/logos/green-list-black.png differ diff --git a/app/assets/images/logos/green-list.png b/app/assets/images/logos/green-list.png index 140d43def..66e1670b5 100644 Binary files a/app/assets/images/logos/green-list.png and b/app/assets/images/logos/green-list.png differ diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss index 8878e2ef5..ff0a42bfc 100644 --- a/app/assets/stylesheets/base/_buttons.scss +++ b/app/assets/stylesheets/base/_buttons.scss @@ -92,6 +92,20 @@ $padding-medium: rem-calc(27); //-------------------------------------------------- // mixins for classes //-------------------------------------------------- +@mixin button-all($small: false) { + @include button-with-icon; + @include flex-no-shrink; + &::after { @include icon-circle-chevron-black; } + + @if $small { + @include breakpoint($medium) { font-size: rem-calc(16); } + + &::after { + height: rem-calc(21); + width: rem-calc(21); + } + } +} @mixin button-burger { @include button-basic; @include icon-burger; @@ -216,11 +230,7 @@ $padding-medium: rem-calc(27); //-------------------------------------------------- .button { &--accent { @include button-block; } - &--all { - @include button-with-icon; - @include flex-no-shrink; - &::after { @include icon-circle-chevron-black; } - } + &--all { @include button-all; } &--download { @include button-with-icon; &::after { diff --git a/app/assets/stylesheets/components/_cards.scss b/app/assets/stylesheets/components/_cards.scss index ae5186669..649339b72 100644 --- a/app/assets/stylesheets/components/_cards.scss +++ b/app/assets/stylesheets/components/_cards.scss @@ -4,16 +4,6 @@ //-------------------------------------------------- // mixins //-------------------------------------------------- -@mixin card-stats-padding { - 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/_lists.scss b/app/assets/stylesheets/components/_lists.scss index 0335ddf44..2f062cfee 100644 --- a/app/assets/stylesheets/components/_lists.scss +++ b/app/assets/stylesheets/components/_lists.scss @@ -87,17 +87,7 @@ 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); - } - } + &__a { @include button-all($small: true); } } } } diff --git a/app/assets/stylesheets/components/cards/card/_card-stats.scss b/app/assets/stylesheets/components/cards/card/_card-stats.scss index 0fa020175..393b4cda3 100644 --- a/app/assets/stylesheets/components/cards/card/_card-stats.scss +++ b/app/assets/stylesheets/components/cards/card/_card-stats.scss @@ -1,6 +1,13 @@ //-------------------------------------------------- // mixins //-------------------------------------------------- +@mixin card-stat-content { + @include flex; + @include flex-column; + + @include breakpoint($small) { @include flex-row; } +} + @mixin card-stats-padding { padding: rem-calc(16 18); @@ -13,9 +20,27 @@ line-height: 1; } +@mixin card-stats { + @include card-stats-padding; + background-color: $white; + margin-top: rem-calc(30); +} + +@mixin card-stats-h2 { margin-top: 0; } + +@mixin card-stats-third { width: calc(33% - 16px); } + +@mixin card-button-external { @include button-all($small: true); } + //-------------------------------------------------- // classes //-------------------------------------------------- +&--stats-wrapper-chart { + @include container-medium; + + @include breakpoint-down($small) { padding: 0; } +} + &--stats-wrapper { display: flex; flex-wrap: wrap; @@ -26,103 +51,18 @@ } } -&--stats-wrapper-chart { - @include container-medium; - - @include breakpoint-down($small) { padding: 0; } -} - -&--stats { - @include card-stats-padding; - background-color: $white; - margin-top: rem-calc(30); - - &--half { - width: 100%; - - @include breakpoint($small) { width: calc(50% - 15px); } - } - - .card { - &__chart { - margin-bottom: rem-calc(14); - width: 50%; - - @include breakpoint($small) { - margin-right: rem-calc(20); - margin-bottom: 0; - width: 30%; - } - } - - &__content { - @include flex; - @include flex-column; - - @include breakpoint($small) { @include flex-row; } - } - - &__logos { - @include flex; - @include ul-unstyled; - } - - &__logo { - margin-left: rem-calc(24); +&--stats-half { + width: 100%; - &:first-child { margin-left: 0; } - } - - &__logo-image { - width: rem-calc(100); height: auto; - - display: block; - } - - &__number { - font-size: rem-calc(16); - font-weight: $bold; - line-height: .9; - } - - &__number-large { - font-size: rem-calc(40); - font-weight: $bold; - line-height: .9; - } - - &__stat-box { - @include bg-grey-xdark; - @include flex; - @include flex-center; - font-size: rem-calc(20); - font-weight: $bold; - margin-right: rem-calc(20); - height: rem-calc(280); - } - - &__stat { - font-size: rem-calc(14); - line-height: 1.3; - margin: rem-calc(6 0 14 0); - } - - &__stat-large { margin-bottom: rem-calc(14); } - - &__subsection { border-top: solid 1px $grey-light; } - - &__subtitle { - font-size: rem-calc(20); - font-weight: $bold; - margin: rem-calc(12 0 0 0); - } - - &__title { - margin-top: 0; - } - - &__third { width: calc(33% - 16px); } - &__two-thirds { width: calc(100% - 33%); } - } + @include breakpoint($small) { width: calc(50% - 15px); } } +@import './stats/card-stats-affiliations'; +@import './stats/card-stats-attributes'; +@import './stats/card-stats-coverage'; +@import './stats/card-stats-designations'; +@import './stats/card-stats-governance'; +@import './stats/card-stats-iucn'; +@import './stats/card-stats-management'; +@import './stats/card-stats-overview'; +@import './stats/card-stats-sources'; \ No newline at end of file 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 new file mode 100644 index 000000000..a70faf698 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss @@ -0,0 +1,42 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-affliations { + @include card-stats; + + .card { + &__button { + @include card-button-external; + margin-top: auto; + padding-top: rem-calc(14); + + display: none; //to be added later + } + + &__h2 { @include card-stats-h2; } + + &__logos { + @include flex; + @include ul-unstyled; + } + + &__logo { + margin-left: rem-calc(30); + max-width: rem-calc(200); + + &:first-child { margin-left: 0; } + } + + &__logo-image { + width: rem-calc(100); height: auto; + + display: block; + } + + &__subtitle { + font-weight: $bold; + line-height: 1.2; + margin: rem-calc(14 0 0 0); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss new file mode 100644 index 000000000..f423ac5f6 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-attributes { + @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/_card-stats-coverage.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss new file mode 100644 index 000000000..1ef6d507d --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss @@ -0,0 +1,51 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-coverage { + @include card-stats; + + .card { + &__chart { + margin-bottom: rem-calc(14); + width: 50%; + + @include breakpoint($small) { + margin-right: rem-calc(20); + margin-bottom: 0; + width: 30%; + } + } + + &__content { @include card-stat-content; } + + &__h2 { @include card-stats-h2; } + + &__number { + font-size: rem-calc(16); + font-weight: $bold; + line-height: .9; + } + + &__number-large { + font-size: rem-calc(40); + font-weight: $bold; + line-height: .9; + } + + &__stat { + font-size: rem-calc(14); + line-height: 1.3; + margin: rem-calc(6 0 14 0); + } + + &__stat-large { margin-bottom: rem-calc(14); } + + &__subsection { border-top: solid 1px $grey-light; } + + &__subtitle { + font-size: rem-calc(20); + font-weight: $bold; + margin: rem-calc(12 0 0 0); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss new file mode 100644 index 000000000..46082ddad --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss @@ -0,0 +1,12 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-designations { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + + &__third { @include card-stats-third; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss new file mode 100644 index 000000000..2e57cd8fa --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-governance { + @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/_card-stats-iucn.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss new file mode 100644 index 000000000..3fa68696e --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--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/_card-stats-management.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss new file mode 100644 index 000000000..5ef9f65d2 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-management { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/_card-stats-overview.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss similarity index 100% rename from app/assets/stylesheets/components/cards/card/_card-stats-overview.scss rename to app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss new file mode 100644 index 000000000..b6620baa8 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss @@ -0,0 +1,25 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-sources { + @include card-stats; + + .card { + &__content { @include card-stat-content; } + + &__h2 { @include card-stats-h2; } + + &__stat-box { + @include bg-grey-black; + @include flex; + @include flex-center; + font-size: rem-calc(20); + font-weight: $bold; + margin-right: rem-calc(20); + height: rem-calc(280); + } + + &__third { @include card-stats-third; } + &__two-thirds { width: calc(100% - 33%); } + } +} \ 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/_cards-stats-overlap.scss new file mode 100644 index 000000000..49c77fd75 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-overlap { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/models/green_list_status.rb b/app/models/green_list_status.rb new file mode 100644 index 000000000..37a488a99 --- /dev/null +++ b/app/models/green_list_status.rb @@ -0,0 +1,3 @@ +class GreenListStatus < ApplicationRecord + has_one :protected_area +end \ No newline at end of file diff --git a/app/models/protected_area.rb b/app/models/protected_area.rb index 09b304524..dc08b096c 100644 --- a/app/models/protected_area.rb +++ b/app/models/protected_area.rb @@ -19,6 +19,7 @@ class ProtectedArea < ApplicationRecord belongs_to :designation delegate :jurisdiction, to: :designation, allow_nil: true belongs_to :wikipedia_article + belongs_to :green_list_status after_create :create_slug @@ -30,7 +31,7 @@ class ProtectedArea < ApplicationRecord } scope :green_list_areas, -> { - where(is_green_list: true) + where.not(green_list_status_id: nil) } scope :most_protected_marine_areas, -> (limit) { @@ -76,6 +77,10 @@ def self.green_list_total_km green_list_areas.inject(0) { |_sum, pa| _sum + pa.gis_area } end + def is_green_list + green_list_status_id.present? + end + def wdpa_ids wdpa_id end diff --git a/app/presenters/protected_area_presenter.rb b/app/presenters/protected_area_presenter.rb index fd2cccc50..0d402181b 100644 --- a/app/presenters/protected_area_presenter.rb +++ b/app/presenters/protected_area_presenter.rb @@ -111,23 +111,42 @@ def attributes def external_links [ - { - title: 'View more', - image_url: ActionController::Base.helpers.image_url('logos/green-list.png'), - link_title: "View the Green List page for #{protected_area.name}", - url: '' ##TODO links needed from CSV provided by IUCN. - }, - { - title: 'View more', - image_url: ActionController::Base.helpers.image_url('logos/parcc.png'), - link_title: "View the climate change vulnerability assessments for #{protected_area.name}", - link_url: url_for_related_source('parcc_info', protected_area) - } - ] + green_list_status_info, + parcc_info + ].compact end private + def green_list_status_info + return unless protected_area.green_list_status_id + + gls = protected_area.green_list_status + { + affiliation: 'greenlist', + date: gls.expiry_date, + image_url: green_list_logo(gls.status), + link_title: "View the Green List page for #{protected_area.name}", + type: gls.status, + url: '' ##TODO links needed from CSV provided by IUCN. + } + end + + def green_list_logo(status) + logo = status.downcase == 'candidate' ? 'green-list-black' : 'green-list' + ActionController::Base.helpers.image_url("logos/#{logo}.png") + end + + def parcc_info + return unless protected_area.has_parcc_info + + { + image_url: ActionController::Base.helpers.image_url('logos/parcc.png'), + link_title: "View the climate change vulnerability assessments for #{protected_area.name}", + link_url: url_for_related_source('parcc_info', protected_area) + } + end + def protected_area @protected_area end @@ -161,12 +180,7 @@ def num_fields_with_data def parse_management_plan management_plan if (management_plan.is_a? String) && (management_plan.starts_with?("http")) - ActionController::Base.helpers.link_to( - I18n.t('stats.management-plan.button'), - management_plan, - target: '_blank', - title: I18n.t('stats.management-plan.button-title', site: @protected_area.name) - ) + ActionController::Base.helpers.link_to("View Management Plan", management_plan) else management_plan end diff --git a/app/presenters/thematical_areas_presenter.rb b/app/presenters/thematical_areas_presenter.rb index cb090af0a..9cca0ffa4 100644 --- a/app/presenters/thematical_areas_presenter.rb +++ b/app/presenters/thematical_areas_presenter.rb @@ -41,7 +41,7 @@ def pas_figure(label) when theme(:marine) pas.where(marine: true) when theme(:green_list) - pas.where(is_green_list: true) + pas.where.not(green_list_status_id: nil) when theme(:wdpa) pas.wdpas when theme(:oecm) diff --git a/app/views/country/show.html.erb b/app/views/country/show.html.erb index afd60a05b..9fd323311 100644 --- a/app/views/country/show.html.erb +++ b/app/views/country/show.html.erb @@ -57,10 +57,9 @@ <%= render partial: "partials/cards/sites", locals: { cards: @sites } %> <%= render partial: "partials/messages/message-citation", locals: { title: @country.name } %> - - -Download this dataset -<%= download_dropdown(@country.iso_3, 'general', (types rescue [:csv, :shp])) %> + + +

related countries

<% if @country.children.any? || @country.parent.present? %> @@ -110,38 +109,15 @@ <% end %> - - - +

malaysia docs

+<% if is_malaysia? %> +
+
Protected areas documentation
+ <% malaysia_documents.map do |doc| %> + + <%= doc[:name] %> + + <% end %>
- +<% end %> diff --git a/app/views/partials/stats/_stats-attributes.html.erb b/app/views/partials/stats/_stats-attributes.html.erb index 8c745cd77..06ccbf195 100644 --- a/app/views/partials/stats/_stats-attributes.html.erb +++ b/app/views/partials/stats/_stats-attributes.html.erb @@ -1,5 +1,5 @@ -
-

<%= t('stats.attributes.title') %>

+
+

<%= t('stats.attributes.title') %>