From 23a84f146225ce702547696b2608c11c2ea3ce2a Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Mon, 6 Jul 2020 18:05:55 +0100 Subject: [PATCH 001/103] replace responsive mixin with breakpoint ones --- .../components/cards/card/_card-theme.scss | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/components/cards/card/_card-theme.scss b/app/assets/stylesheets/components/cards/card/_card-theme.scss index 9ef2a395b..6606f5657 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,12 @@ margin-left: 0; padding: rem-calc(32 30); text-decoration: none; + height: rem-calc(460); position: relative; + @include breakpoint($medium) { height: rem-calc(760); } + &:hover::before { background-color: rgba(0,0,0,0.7); } &::before { @include border-radius; } @@ -26,15 +28,23 @@ @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(244); + } } &__icon { @@ -46,22 +56,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 { From 837fbe837c2300e097b304cb8d3918e877d1da68 Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Mon, 6 Jul 2020 18:14:06 +0100 Subject: [PATCH 002/103] Add restrictions on the width of the content on tablet --- .../stylesheets/components/cards/card/_card-theme.scss | 5 ++--- .../components/cards/cards/_cards-themes.scss | 10 ++++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/components/cards/card/_card-theme.scss b/app/assets/stylesheets/components/cards/card/_card-theme.scss index 6606f5657..afd870e04 100644 --- a/app/assets/stylesheets/components/cards/card/_card-theme.scss +++ b/app/assets/stylesheets/components/cards/card/_card-theme.scss @@ -16,6 +16,7 @@ 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); } @@ -42,9 +43,7 @@ right: rem-calc(26); } - @include breakpoint ($medium) { - right: rem-calc(244); - } + @include breakpoint ($medium) { right: rem-calc(44); } } &__icon { 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 From 6d89da148485d53bfa3357ee0f1b648d5769a8f3 Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Tue, 28 Jul 2020 15:50:24 +0100 Subject: [PATCH 003/103] Add new component for related countries --- app/helpers/countries_helper.rb | 4 ++ app/views/country/show.html.erb | 64 +++---------------- .../stats/_stats-related-countries.html.erb | 27 ++++++++ config/locales/stats/en.yml | 2 + db | 2 +- 5 files changed, 43 insertions(+), 56 deletions(-) create mode 100644 app/views/partials/stats/_stats-related-countries.html.erb 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/views/country/show.html.erb b/app/views/country/show.html.erb index 66058746c..ee706ec98 100644 --- a/app/views/country/show.html.erb +++ b/app/views/country/show.html.erb @@ -52,67 +52,21 @@

<%= t('stats.coverage-chart-smallprint') %>

+ + <% if has_related_countries? %> + + <%= render partial: "partials/stats/stats-related-countries", locals: { + country_children: @country.children.any? ? @country.children : nil, + country_parent: @country.parent.present? ? @country.parent : nil + } %> + + <% end %> <%= 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? %> -
-

Related countries & territories

-
- - <% if @country.children.any? %> -

Child countries & territories

- - - - - - - - - <% @country.children.each do |child_country| %> - - - - - <% end %> - - -
NameCode
<%= link_to child_country.name, country_path(child_country.iso) %><%= link_to child_country.iso_3, country_path(child_country.iso) %>
- <% end %> - - <% if @country.parent.present? %> -

Parent countries & territories

- - - - - - - - - - - - - -
NameCode
<%= link_to @country.parent.name, country_path(@country.parent.iso) %><%= link_to @country.parent.iso_3, country_path(@country.parent.iso) %>
- <% end %> -
-
-<% end %>