Merge branch 'release-2.6.0'

.gitmodules

@@ -1,4 +1,4 @@
 [submodule "db"]
   path = db
   url = https://github.com/unepwcmc/protectedplanet-db.git
-  branch = develop
+  branch = master

CHANGELOG.md

@@ -1,3 +1,8 @@
+### 2.6.0
+
+* Add National Report stats to countries
+* Update country_statistics csv structure to include National Report stats
+
 ### 2.5.3
 
 * Add country, pame_country and marine stats (WDPA August 2019 release).

Gemfile

@@ -6,6 +6,7 @@ gem 'pg'
 gem 'activerecord-postgis-adapter', '~> 3.1.0'
 gem 'gdal', '~> 0.0.5'
 gem 'dbf', '~> 2.0.7'
+gem 'rb-readline'
 
 gem 'elasticsearch', '~> 5.0.3'
 

Gemfile.lock

@@ -316,6 +316,7 @@ GEM
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rake (10.5.0)
+    rb-readline (0.5.5)
     redis (3.2.1)
     redis-namespace (1.5.2)
       redis (~> 3.0, >= 3.0.4)
@@ -451,6 +452,7 @@ DEPENDENCIES
   premailer-rails
   rack-cache (~> 1.2)
   rails (= 4.2.5.1)
+  rb-readline
   sass-rails (~> 5.0.4)
   selenium-webdriver
   sidekiq (~> 3.5.3)
@@ -468,3 +470,6 @@ DEPENDENCIES
   webmock (~> 1.18.0)
   whenever
   will_paginate (~> 3.0)
+
+BUNDLED WITH
+   1.16.1

app/assets/stylesheets/application.css.scss → app/assets/stylesheets/application.scss

@@ -13,6 +13,19 @@
  *
  *= require 'protectedplanet-frontend/dist/style/main'
  *= require 'custom'
+ *= require_self
  */
 
- @import './map/custom-leaflet';
+@import './resources/**/*';
+
+@import './map/custom-leaflet';
+
+@import './variables/*';
+
+@import './utilities/*';
+
+@import './atoms/*';
+
+@import './organisms/*';
+
+@import './helpers/*';

app/assets/stylesheets/atoms/colors.scss

@@ -0,0 +1,24 @@
+@mixin color($color) {
+  color: $color;
+}
+
+@mixin color-with-state($base-color, $states: (), $property: color) {
+  #{$property}: $base-color;
+
+  @each $state, $color in $states {
+    &:#{$state} {
+      #{$property}: $color;
+    }
+  }
+}
+
+%color-base { @include color($color--base); }
+%acts-as-link {
+  &:hover, &:active { text-decoration: underline; }
+  @include color-with-state($link__color, (
+    hover: $link__color--hover,
+    active: $link__color--pressed,
+    'visited:active': $link__color--pressed,
+    visited: $link__color--visited,
+  ));
+}

app/assets/stylesheets/atoms/fonts.scss

@@ -0,0 +1,32 @@
+@mixin text($form-factor, $weight: normal) {
+  font-family: 'MuseoSans';
+  @if($weight != null) {
+    @include font-weight($weight);
+  }
+
+  @include form-factor($form-factor);
+}
+
+@mixin text--alt($form-factor, $weight: normal) {
+  font-family: 'MuseoSlab';
+  @if($weight != null) {
+    @include font-weight($weight);
+  }
+
+  @include form-factor($form-factor);
+}
+
+@mixin text--icon($form-factor, $weight: normal) {
+  font-family: 'FontAwesome';
+  font-weight: weight($weight);
+
+  @include form-factor($form-factor);
+}
+
+@mixin line-height($line-height) {
+  line-height: $line-height;
+}
+
+@mixin font-weight($weight) {
+  font-weight: weight($weight);
+}

app/assets/stylesheets/helpers/_flexbox.scss

@@ -0,0 +1,80 @@
+//--------------------------------------------------
+// columns
+//--------------------------------------------------
+// N.B. flex-basis doesn't work properly in IE11, so be careful using these classes!
+
+.flex-1-half { flex: 0 1 50%; }
+
+.flex-1-third { flex: 0 1 33%; }
+.flex-2-thirds { flex: 0 1 66%; }
+
+.flex-1-quarter { flex: 0 1 25%; }
+.flex-2-quarters { flex: 0 1 50%; }
+.flex-3-quarters { flex: 0 1 75%; }
+
+.flex-1-fith { flex: 0 1 20%; }
+.flex-2-fiths { flex: 0 1 40%; }
+.flex-3-fiths { flex: 0 1 60%; }
+.flex-4-fiths { flex: 0 1 80%; }
+
+.flex-1-sixth { flex: 0 1 16%; }
+.flex-2-sixths { flex: 0 1 33%; }
+.flex-3-sixths { flex: 0 1 50%; }
+.flex-4-sixths { flex: 0 1 66%; }
+.flex-5-sixths { flex: 0 1 83%; }
+
+//--------------------------------------------------
+// columns with gutters
+//--------------------------------------------------
+.flex-1-third-gutters { flex: 0 1 30%; }
+.flex-2-thirds-gutters { flex: 0 1 63%; }
+
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+.flex { @include flex(); }
+.flex-inline { @include flex-inline(); }
+.flex-row { @include flex-row(); }
+.flex-row-reverse { @include flex-row-reverse(); }
+.flex-column { @include flex-column(); }
+.flex-column-reverse { @include flex-column-reverse(); }
+.flex-nowrap { @include flex-nowrap(); }
+.flex-wrap { @include flex-wrap(); }
+.flex-wrap-reverse { @include flex-wrap-reverse(); }
+.flex-1 { @include flex-1(); }
+.flex-grow { @include flex-grow(); }
+.flex-no-grow { @include flex-no-grow(); }
+.flex-shrink { @include flex-shrink(); }
+.flex-no-shrink { @include flex-no-shrink(); }
+.flex-h-start { @include flex-h-start(); }
+.flex-h-center { @include flex-h-center(); }
+.flex-h-between { @include flex-h-between(); }
+.flex-h-around { @include flex-h-around(); }
+.flex-h-end { @include flex-h-end(); }
+.flex-hs-start {@include flex-hs-start(); }  
+.flex-hs-center { @include flex-hs-center(); }
+.flex-hs-between { @include flex-hs-between(); }
+.flex-hs-around { @include flex-hs-around(); }
+.flex-hs-end { @include flex-hs-end(); }
+.flex-v-start { @include flex-v-start(); }
+.flex-v-end { @include flex-v-end(); }
+.flex-v-center {@include flex-v-center(); }
+.flex-v-baseline { @include flex-v-baseline(); }
+.flex-v-stretch { @include flex-v-stretch(); }
+.flex-vs-start { @include flex-vs-start(); }
+.flex-vs-center { @include flex-vs-center(); }
+.flex-vs-baseline { @include flex-vs-baseline(); }
+.flex-vs-stretch { @include flex-vs-stretch(); }
+.flex-vs-end { @include flex-vs-end(); }  
+.flex-vm-start { @include flex-vm-start(); }
+.flex-vm-end { @include flex-vm-end(); }
+.flex-vm-center { @include flex-vm-center(); }
+.flex-vm-between { @include flex-vm-between(); }
+.flex-vm-around { @include flex-vm-around(); }
+.flex-vm-stretch { @include flex-vm-stretch(); }
+
+.flex-center {
+  @include flex();
+  @include flex-h-center();
+  @include flex-v-center();
+}

app/assets/stylesheets/helpers/_helpers.scss

@@ -0,0 +1,150 @@
+//--------------------------------------------------
+// helpers
+//--------------------------------------------------
+// - fouc
+// - font
+// - lists
+// - display
+// - dimensions
+// - positioning
+// - margin & padding
+// - backgrounds
+// - user interaction
+// - shapes
+//
+//--------------------------------------------------
+// fouc (flash of unstyled content)
+//--------------------------------------------------
+[v-cloak] { display: none; }
+
+//--------------------------------------------------
+// font
+//--------------------------------------------------
+.red { color: red; }
+.bold { font-weight: bold; }
+
+//--------------------------------------------------
+// lists
+//--------------------------------------------------
+.ul--inline li { display: inline-block; }
+
+//--------------------------------------------------
+// display
+//--------------------------------------------------
+.block { display: block; }
+.inline-block { display: inline-block; }
+
+.full-height {
+  height: 100vh;
+}
+
+//--------------------------------------------------
+// positioning
+//--------------------------------------------------
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-left { text-align: left; }
+
+.relative { position: relative; }
+
+.bottom-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.center-right {
+  position: absolute;
+  top: 50%;
+  right: 0;
+
+  transform: translate(0, -50%);
+}
+
+.top-right {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+//--------------------------------------------------
+// margin & padding
+//--------------------------------------------------
+.no-margin--top { margin-top: 0; }
+.no-margin { margin: 0; }
+.margin-center { margin: 0 auto; }
+
+.margin-space--right { margin-right: rem-calc(14); }
+.margin-space--left { margin-left: rem-calc(14); }
+
+.no-padding { padding: 0; }
+
+//--------------------------------------------------
+// backgrounds
+//--------------------------------------------------
+$image-placeholder: black;
+
+.bg-img {
+  background-color: $image-placeholder;
+  background-size: cover;
+  background-position: center;
+}
+
+.bg-image-overlay {
+  position: relative;
+  z-index: 1;
+
+  &:before {
+    background-color: rgba(black, 0.4);
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+  }
+}
+
+//--------------------------------------------------
+// screen overlay
+//--------------------------------------------------
+.screen-overlay {
+  background: rgba(black, 0.5);
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 300;
+}
+
+//--------------------------------------------------
+// user interaction
+//--------------------------------------------------
+.no-select {
+  -webkit-touch-callout: none; 
+  -webkit-user-select: none; 
+  -moz-user-select: none; 
+  -ms-user-select: none; 
+  user-select: none; 
+}
+
+.hover--pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.screen-reader {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: rem-calc(1);
+  margin: rem-calc(-1);
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: rem-calc(1);
+}