From 21ead5dd0a1eddb4a7e81e95e538afd06476aba2 Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Tue, 14 Jul 2020 16:33:59 +0100 Subject: [PATCH 01/10] Add in info for Green List affiliation on the site page --- app/assets/stylesheets/components/_cards.scss | 10 ---- .../components/cards/card/_card-stats.scss | 56 ++++++++++++------- .../card/stats/_card-stats-affiliations.scss | 40 +++++++++++++ .../{ => stats}/_card-stats-overview.scss | 0 app/presenters/protected_area_presenter.rb | 5 +- .../partials/stats/_stats-external.html.erb | 17 ++++-- config/locales/global/en.yml | 1 + config/locales/stats/en.yml | 6 ++ 8 files changed, 98 insertions(+), 37 deletions(-) create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss rename app/assets/stylesheets/components/cards/card/{ => stats}/_card-stats-overview.scss (100%) 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/cards/card/_card-stats.scss b/app/assets/stylesheets/components/cards/card/_card-stats.scss index 8c7f8545d..3e137a5e9 100644 --- a/app/assets/stylesheets/components/cards/card/_card-stats.scss +++ b/app/assets/stylesheets/components/cards/card/_card-stats.scss @@ -1,3 +1,35 @@ +//-------------------------------------------------- +// mixins +//-------------------------------------------------- +@mixin card-stats-padding { + padding: rem-calc(28 30); +} + +@mixin card-stats-number { + color: $primary; + font-weight: $bold; + 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-button-external { + @include button-with-icon; + @include flex-no-shrink; + + &::after { + @include icon-circle-chevron-black; + height: rem-calc(21); + width: rem-calc(21); + } +} + //-------------------------------------------------- // classes //-------------------------------------------------- @@ -11,10 +43,11 @@ } } +@import './stats/card-stats-affiliations'; +@import './stats/card-stats-overview'; + &--stats { - @include card-stats-padding; - background-color: $white; - margin-top: rem-calc(30); + @include card-stats; &--half { width: 100%; @@ -41,23 +74,6 @@ @include breakpoint($small) { @include flex-row; } } - &__logos { - @include flex; - @include ul-unstyled; - } - - &__logo { - margin-left: rem-calc(24); - - &:first-child { margin-left: 0; } - } - - &__logo-image { - width: rem-calc(100); height: auto; - - display: block; - } - &__number { font-size: rem-calc(16); font-weight: $bold; 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..426775c28 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss @@ -0,0 +1,40 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-affliations { + @include card-stats; + + .card { + &__button { + @include card-button-external; + margin-top: auto; + padding-top: rem-calc(14); + } + + &__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/_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/presenters/protected_area_presenter.rb b/app/presenters/protected_area_presenter.rb index 14cef4209..e7327a56b 100644 --- a/app/presenters/protected_area_presenter.rb +++ b/app/presenters/protected_area_presenter.rb @@ -112,13 +112,14 @@ def attributes def external_links [ { - title: 'View more', + affiliation: 'greenlist', + date: '00/00/00', ## TODO status date -- should already be in CSV thats provided image_url: ActionController::Base.helpers.image_url('logos/green-list.png'), link_title: "View the Green List page for #{protected_area.name}", + type: 'TODO TYPE', ## TODO type = Green Listed/Relisted/Candidate needed from CSV provided by IUCN 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) diff --git a/app/views/partials/stats/_stats-external.html.erb b/app/views/partials/stats/_stats-external.html.erb index efb0f1586..64afe91dc 100644 --- a/app/views/partials/stats/_stats-external.html.erb +++ b/app/views/partials/stats/_stats-external.html.erb @@ -1,13 +1,20 @@ -
-

Lorem Ipsum

+
+

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

    <% external_links.each do |link| %> <% end %>
diff --git a/config/locales/global/en.yml b/config/locales/global/en.yml index 8e1477363..1021d1f0d 100644 --- a/config/locales/global/en.yml +++ b/config/locales/global/en.yml @@ -8,6 +8,7 @@ en: download-pdf: PDF Download download: Download link: Link + more: More info footer: copyright: "ProtectedPlanet 2014-%{date}. All rights reserved" title1: Explore diff --git a/config/locales/stats/en.yml b/config/locales/stats/en.yml index 7021197fd..bbdf83e0e 100644 --- a/config/locales/stats/en.yml +++ b/config/locales/stats/en.yml @@ -6,8 +6,14 @@ en: coverage: Coverage designatons: title: Designations + external: + title: Affiliations governance: title: Governance types + green-list: + intro: This site is part of the IUCN Green List Community + type: Governance Type + date: Certification Expiry Date iucn-categories: title: IUCN Management Categories location: Location From 7d63a25486b311d6e3b56e6ceb19b5d628e65f79 Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Tue, 14 Jul 2020 17:16:43 +0100 Subject: [PATCH 02/10] Refactor some of the card stats styles --- app/assets/stylesheets/base/_buttons.scss | 20 ++- app/assets/stylesheets/components/_lists.scss | 11 +- .../components/cards/card/_card-stats.scss | 107 +++------------ .../card/stats/_card-stats-attributes.scss | 10 ++ .../card/stats/_card-stats-coverage.scss | 51 +++++++ .../card/stats/_card-stats-designations.scss | 12 ++ .../card/stats/_card-stats-governance.scss | 10 ++ .../cards/card/stats/_card-stats-iucn.scss | 10 ++ .../card/stats/_card-stats-management.scss | 10 ++ .../cards/card/stats/_card-stats-sources.scss | 25 ++++ .../card/stats/_cards-stats-overlap.scss | 10 ++ app/views/country/show.html.erb | 51 +------ .../partials/stats/_stats-attributes.html.erb | 4 +- .../partials/stats/_stats-coverage.html.erb | 4 +- .../stats/_stats-designations.html.erb | 4 +- .../partials/stats/_stats-governance.html.erb | 4 +- .../stats/_stats-iucn-categories.html.erb | 4 +- .../partials/stats/_stats-overlap.html.erb | 3 + app/views/partials/stats/_stats-pame.html.erb | 4 +- .../partials/stats/_stats-sources.html.erb | 4 +- app/views/protected_areas/show.html.erb | 128 ++---------------- 21 files changed, 206 insertions(+), 280 deletions(-) create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss create mode 100644 app/views/partials/stats/_stats-overlap.html.erb diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss index b3d3cf820..1de9f7593 100644 --- a/app/assets/stylesheets/base/_buttons.scss +++ b/app/assets/stylesheets/base/_buttons.scss @@ -91,6 +91,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; @@ -180,11 +194,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/_lists.scss b/app/assets/stylesheets/components/_lists.scss index c2f28d2bd..cdfdf134c 100644 --- a/app/assets/stylesheets/components/_lists.scss +++ b/app/assets/stylesheets/components/_lists.scss @@ -64,16 +64,7 @@ } - &__a { - @include button-with-icon; - @include flex-no-shrink; - - &::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 3e137a5e9..eb9c9c35c 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(28 30); } @@ -19,16 +26,9 @@ @mixin card-stats-h2 { margin-top: 0; } -@mixin card-button-external { - @include button-with-icon; - @include flex-no-shrink; - - &::after { - @include icon-circle-chevron-black; - height: rem-calc(21); - width: rem-calc(21); - } -} +@mixin card-stats-third { width: calc(33% - 16px); } + +@mixin card-button-external { @include button-all($small: true); } //-------------------------------------------------- // classes @@ -43,81 +43,18 @@ } } -@import './stats/card-stats-affiliations'; -@import './stats/card-stats-overview'; - -&--stats { - @include card-stats; - - &--half { - width: 100%; - - @include breakpoint($small) { width: calc(50% - 15px); } - } - - .card { - &__chart { - margin-bottom: rem-calc(14); - width: 50%; +&--stats-half { + width: 100%; - @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; } - } - - &__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-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/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/views/country/show.html.erb b/app/views/country/show.html.erb index 6fe108630..789b00f7d 100644 --- a/app/views/country/show.html.erb +++ b/app/views/country/show.html.erb @@ -49,15 +49,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? %> @@ -118,41 +112,4 @@ data-control-position="bottomleft"> <% end %> -<% end %> - - - - - - - +<% end %> \ No newline at end of file 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') %>