Merge branch 'refresh' into sync-seeds

.eslintrc.js

@@ -0,0 +1,47 @@
+module.exports = {
+	'env': {
+		'browser': true,
+    'es6': true,
+    'node': true
+	},
+	'extends': [
+		'eslint:recommended',
+		'plugin:vue/recommended'
+	],
+	'globals': {
+		'Atomics': 'readonly',
+		'SharedArrayBuffer': 'readonly'
+	},
+	'parserOptions': {
+		'ecmaVersion': 2018,
+		'sourceType': 'module'
+	},
+	'plugins': [
+		'vue'
+	],
+	'rules': {
+		'indent': [
+			'error',
+			2
+		],
+		'linebreak-style': [
+			'error',
+			'unix'
+		],
+		'quotes': [
+			'error',
+			'single'
+		],
+		'semi': [
+			'error',
+			'never'
+    ],
+    'padding-line-between-statements': [
+      'error',
+      { 'blankLine': 'always', 'prev': '*', 'next': 'return' },
+      { 'blankLine': 'always', 'prev': ['const', 'let', 'var'], 'next': '*' },
+      { 'blankLine': 'any', 'prev': ['const', 'let', 'var'], 'next': ['const', 'let', 'var'] }
+    ],
+    'no-console': 'off'
+	}
+}

.gitignore

@@ -35,4 +35,7 @@ tmp/cache/webpacker
 
 .byebug_history
 
-.vscode/
+.vscode/
+
+# Special gemfile with GDAL v3
+Gemfile_GDALV3

.gitmodules

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

Gemfile

@@ -1,8 +1,13 @@
 source 'https://rubygems.org'
+source 'https://wcmc-gems:[email protected]/'
 
 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"
 

Gemfile.lock

@@ -7,6 +7,7 @@ GIT
 
 GEM
   remote: https://rubygems.org/
+  remote: https://wcmc-gems:[email protected]/
   specs:
     actioncable (5.2.0)
       actionpack (= 5.2.0)
@@ -1283,6 +1284,7 @@ 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)
@@ -1366,6 +1368,7 @@ 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

app/assets/stylesheets/_settings.scss

@@ -116,6 +116,7 @@ $fw-black: 900;
 // breakpoints
 //--------------------------------------------------
 // must be in px not rem!
+// IF MODIFIED, PLEASE CHECK ELSEWHERE IN PROJECT e.g. in mixin-responsive.js
 $small: 767px; 
 $medium: 1024px;
 $large: 1200px;
@@ -130,7 +131,7 @@ $z-300: 300;
 //--------------------------------------------------
 // padding
 //--------------------------------------------------
-$gutter-small: rem-calc(25);
+$gutter-small: rem-calc(20);
 $gutter-medium: rem-calc(25);
 $gutter-large: rem-calc(30);
 
@@ -165,6 +166,8 @@ $site-width-rem: rem-calc($site-width);
 // $site-width-medium-laptop: 78%;
 $site-width-medium-desktop: rem-calc(750);
 
+$filters-menu-max-height: rem-calc(300);
+
 //--------------------------------------------------
 // tables
 //--------------------------------------------------

app/assets/stylesheets/base/_buttons.scss

@@ -79,18 +79,33 @@ $padding-medium: rem-calc(27);
     display: inline-block;
   }
 }
-@mixin button-outline ($colour: $black) {
+@mixin button-outline ($colour: $black, $border-size: 1px) {
   @include button-basic;
   @include button-font;
   @include button-height;
   @include button-padding;
   @include button-radius;
-  border: solid 2px $colour;
+  border: solid $border-size $colour;
   color: $colour;
 }
+
 //--------------------------------------------------
 // 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;
@@ -121,6 +136,30 @@ $padding-medium: rem-calc(27);
   @include button-with-icon;
   &::after { @include icon-chevron-black-up; }
 }
+
+@mixin button-dropdown-filter {
+  @include button-dropdown;
+  @include button-outline($black, 1px);
+
+  @include breakpoint-down($medium) {
+    font-size: rem-calc(16);
+    padding: rem-calc(1 11);
+    height: rem-calc(34);
+  }
+
+  &:after {
+    @include breakpoint-down($medium) { display: none; }
+  }
+}
+
+@mixin button-external {
+  @include button-with-icon;
+  &::after { 
+    @include icon-arrow-external; 
+    display: inline-block;
+
+  }
+}
 @mixin button-filter-trigger {
   @include button-with-icon;
   @include button-outline;
@@ -134,8 +173,19 @@ $padding-medium: rem-calc(27);
 @mixin button-map-trigger {
   @include button-with-icon;
   @include button-outline;
+  white-space: nowrap;
+
   &::after { @include icon-pin-outline; }
+
+  &.active {
+    &::after { 
+      @include icon-cross-small; 
+
+      width: rem-calc(14);
+    }
+  }
 }
+@mixin button-primary { @include button-block; }
 @mixin button-next { @include button-basic; }
 @mixin button-prev { @include button-basic; }
 @mixin button-search {
@@ -180,13 +230,22 @@ $padding-medium: rem-calc(27);
 //--------------------------------------------------
 .button {
   &--accent { @include button-block; }
-  &--all {
+  &--all { @include button-all; }
+  &--download {
     @include button-with-icon;
-    @include flex-no-shrink;
-    &::after { @include icon-circle-chevron-black; }
+    &::after { 
+      @include icon-download; 
+      display: inline-block;
+    }
   }
-  &--download {
+  &--download-pdf {
     @include button-with-icon;
+    color: $primary;
+    font-size: rem-calc(16);
+    font-weight: $bold;
+    @include breakpoint($small) { font-size: rem-calc(16); }
+    @include breakpoint($medium) { font-size: rem-calc(16); }
+
     &::after { 
       @include icon-download; 
       display: inline-block;
@@ -198,14 +257,16 @@ $padding-medium: rem-calc(27);
     font-weight: $bold;
     &::after { @include icon-arrow-external-white; }
   }
-  &--link-external {
-    @include button-with-icon;
-    &::after { 
-      @include icon-arrow-external; 
-      display: inline-block;
-    }
+  &--link-external { @include button-external; }
+  &--link-external-primary {
+    @include button-external;
+    color: $primary;
+    font-size: rem-calc(16);
+    font-weight: $bold;
+    @include breakpoint($small) { font-size: rem-calc(16); }
+    @include breakpoint($medium) { font-size: rem-calc(16); }
   }
   &--outline-black { @include button-outline($black); }
   &--outline-white { @include button-outline($white); }
-  &--primary { @include button-block; }
-}
+  &--primary { @include button-primary; }
+}

app/assets/stylesheets/base/_svgs.scss

@@ -0,0 +1,14 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+.svg {
+  &--info {
+    .circle { fill: $grey-dark; }
+    .i { fill: none; }
+  }
+
+  &--info-light {
+    .circle { fill: $grey-xlight; }
+    .i { fill: none; }
+  }
+}

app/assets/stylesheets/base/mixins/_icons.scss

@@ -82,6 +82,16 @@ $icon-search-width: rem-calc(21);
   @include icon-image('cross.svg', rem-calc(20), rem-calc(20));
 }
 
+@mixin icon-cross-small() {
+  @include icon-basic;
+  @include icon-image('cross.svg', rem-calc(11), rem-calc(11));
+}
+
+@mixin icon-cross-white() {
+  @include icon-basic;
+  @include icon-image('cross-white.svg', rem-calc(20), rem-calc(20));
+}
+
 @mixin icon-chevron-black-down() {
   @include icon-basic;
   @include icon-image('chevron-black-down.svg', rem-calc(14), rem-calc(8));
@@ -179,6 +189,11 @@ $icon-search-width: rem-calc(21);
   @include icon-image('loading-spinner.svg', rem-calc(40), rem-calc(40));
 }
 
+@mixin icon-minus-white() {
+  @include icon-basic;
+  @include icon-image('minus-white.svg', rem-calc(22), rem-calc(20));
+}
+
 @mixin icon-pin ($circle: #ccc, $outline: #000) {
   @include icon-basic;
   width: rem-calc(29); height: rem-calc(38);
@@ -200,6 +215,11 @@ $icon-search-width: rem-calc(21);
   @include icon-image('pin-outline.svg', rem-calc(14), rem-calc(20));
 }
 
+@mixin icon-pin-map {
+  @include icon-basic;
+  @include icon-image('pin.svg', rem-calc(13), rem-calc(18));
+}
+
 @mixin icon-placeholder-image() {
   @include icon-basic;
   @include icon-image('image.svg', rem-calc(114), rem-calc(91));