Merge branch 'refresh' into sync-seeds

Gemfile

@@ -1,13 +1,8 @@
 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"
 
@@ -35,6 +30,7 @@ gem 'vuejs-rails', '~> 2.3.2'
 gem 'sprockets-vue', '~> 0.1.0'
 
 gem 'rails-controller-testing'
+
 gem 'gdal', '~> 2.0'
 #
 group :production, :staging do

Gemfile.lock

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

@@ -48,25 +48,19 @@ $purple: #7B1977;
 $purple-dark: #794B9D;
 
 $alert: $red;
+
 $primary: $green;
 $primary-dark: $green--darker;
 
 $global: $purple;
+$oecm: $orange;
 $marine: $blue;
 $terrestrial: $green-bright;
 
 $pin-marine: $marine;
-$pin-oecm: $orange;
+$pin-oecm: $oecm;
 $pin-terrestrial: $terrestrial;
 
-//used on marine insights page
-$blue--marine-1: #bfe5e9; 
-$blue--marine-2: #A1D8DE;
-$blue--marine-3: #90BDC4;
-$blue--marine-4: #729099;
-$blue--marine-5: #444955;
-$marine-accent-color: $orange--lighest;
-
 $theme-designation: [$chart-purple, $chart-aqua, $chart-blue];
 
 //--------------------------------------------------
@@ -127,6 +121,7 @@ $large: 1200px;
 $z-100: 100;
 $z-200: 200;
 $z-300: 300;
+$z-400: 400;
 
 //--------------------------------------------------
 // padding

app/assets/stylesheets/application.scss

@@ -4,157 +4,4 @@
 @import './helpers/helpers';
 @import './base/*';
 @import './components/*';
-@import './pages/*';
-
-// grids
-// @import 'bourbon';
-// @import 'neat';
-
-// maps
-// @import 'leaflet/dist/leaflet';
-
-// development mixins
-// @import 'utilities/flexbox';
-// @import 'utilities/accessibility';
-// @import 'utilities/bem';
-
-// // variables
-// @import 'variables/colors';
-// @import 'variables/dimensions';
-// // @import 'variables/font-faces';
-// // @import 'variables/fonts';
-// // @import 'variables/z-index';
-// // variables
-
-// // atoms
-// @import 'atoms/fonts';
-// @import 'atoms/fa';
-// @import 'atoms/colors';
-// @import 'atoms/buttons';
-// @import 'atoms/disclaimer';
-// @import 'atoms/headers';
-// @import 'atoms/label';
-// @import 'atoms/leaflet-controls';
-// @import 'atoms/links';
-// @import 'atoms/logos';
-// @import 'atoms/overlay';
-// @import 'atoms/small-text';
-// @import 'atoms/text';
-// // atoms
-
-// // molecules
-// @import 'molecules/accordion';
-// @import 'molecules/animated-loader';
-// @import 'molecules/alert';
-// @import 'molecules/attribute';
-// @import 'molecules/big-button';
-// @import 'molecules/breadcrumbs';
-// @import 'molecules/burger';
-// @import 'molecules/circle-story';
-// @import 'molecules/close-button';
-// @import 'molecules/counter';
-// @import 'molecules/cube';
-// @import 'molecules/dropdown';
-// @import 'molecules/expandable-section'; // DEPRECATED, use accordion
-// @import 'molecules/fullscreen';
-// @import 'molecules/fullscreen-message';
-// @import 'molecules/header-with-image';
-// @import 'molecules/home-banner';
-// @import 'molecules/home-carousel';
-// @import 'molecules/horizontal-bar';
-// @import 'molecules/horizontal-bars';
-// @import 'molecules/key';
-// @import 'molecules/link-with-icon';
-// @import 'molecules/map';
-// @import 'molecules/modal';
-// @import 'molecules/pa-card';
-// @import 'molecules/rectangles';
-// @import 'molecules/reference';
-// @import 'molecules/select-with-content';
-// @import 'molecules/search-bar';
-// @import 'molecules/social';
-// @import 'molecules/stats';
-// @import 'molecules/sticky-nav';
-// @import 'molecules/sticky-tab';
-// @import 'molecules/table';
-// @import 'molecules/tooltip-old';
-// @import 'molecules/twitter-share';
-// @import 'molecules/uservoice';
-// @import 'molecules/value';
-// // molecules
-
-// // organisms
-// @import 'organisms/hero';
-// @import 'organisms/cover-story';
-// @import 'organisms/section';
-// @import 'organisms/navbar';
-// @import 'organisms/autocompletion';
-// @import 'organisms/fact';
-// @import 'organisms/filter-bar';
-// @import 'organisms/footer';
-// @import 'organisms/form';
-// @import 'organisms/info-box';
-// @import 'organisms/gallery';
-// @import 'organisms/key-records';
-// @import 'organisms/search-result';
-// @import 'organisms/stats-card';
-// @import 'organisms/row';
-// @import 'organisms/article';
-// @import 'organisms/vertical-nav';
-// @import 'organisms/container';
-// @import 'organisms/tabs';
-// // organisms
-
-// old pp assets
-// @import 'old/neat-grid';
-// @import 'old/transitions';
-// @import 'old/leaflet_overrides';
-// @import 'old/map';
-// @import 'old/base';
-// @import 'old/search_bar';
-// @import 'old/buttons';
-// @import 'old/home';
-// @import 'old/protected_areas';
-// @import 'old/projects';
-// @import 'old/search';
-// @import 'old/devise';
-// @import 'old/static_pages';
-// old pp assets
-
-// scopes
-// @import 'scopes/article';
-// @import 'scopes/form';
-// // scopes
-
-// // utilities
-// // @import 'utilities/keyframes';
-// // @import 'utilities/reset';
-// @import 'utilities/grid';            
-// // @import 'utilities/html-elements';
-// // utilities
-
-//templates
-// @import 'templates/site';
-//templates
-
-// @import 'custom';
-
-// @import './map/custom-leaflet';
-
-
-
-// @import './resources/variables/**/*';
-
-
-// @import './components/carousel';
-// @import './components/charts';
-// @import './components/hero';
-// @import './components/form';
-// @import './components/sticky';
-// @import './components/table';
-// @import './components/tooltip';
-// @import './components/vue-agile';
-
-
-
-// @import 'utilities/u-classes';
+@import './pages/*';

app/assets/stylesheets/base/_base.scss

@@ -70,6 +70,10 @@ sup {
   font-size: .6em;
 }
 
+input {
+  &:focus { @include input-custom-focus; }
+}
+
 //--------------------------------------------------
 // site structure
 //--------------------------------------------------

app/assets/stylesheets/base/_buttons.scss

@@ -20,6 +20,7 @@ $padding-medium: rem-calc(27);
   font-family: $body-font;
   padding: 0;
   text-decoration: none;
+  &:focus { @include input-custom-focus; }
   &:hover { text-decoration: none; }
 }
 @mixin button-font {
@@ -257,7 +258,9 @@ $padding-medium: rem-calc(27);
     font-weight: $bold;
     &::after { @include icon-arrow-external-white; }
   }
+
   &--link-external { @include button-external; }
+
   &--link-external-primary {
     @include button-external;
     color: $primary;

app/assets/stylesheets/base/_themes.scss

@@ -0,0 +1,11 @@
+.theme--aqua { background-color: $chart-aqua; }
+.theme--blue { background-color: $chart-blue; }
+.theme--green { background-color: $chart-green; }
+.theme--purple { background-color: $chart-purple; }
+
+.theme--primary { background-color: $primary; }
+.theme--primary-dark { background-color: $primary-dark; }
+
+.theme--oecm { background-color: $oecm; }
+.theme--marine { background-color: $marine; }
+.theme--terrestrial { background-color: $terrestrial; }

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

@@ -0,0 +1,72 @@
+//--------------------------------------------------
+// shared mixins
+//--------------------------------------------------
+@mixin card-news {
+  .card {
+    background-color: $grey-xlight;
+    margin-bottom: rem-calc(20);
+    text-decoration: none;
+    width: 100%;
+
+    @include breakpoint($small) {
+      margin-bottom: rem-calc(30);
+      width: 48.5%;
+    }
+  }
+
+  .card__content {
+    @include responsive(padding, rem-calc(26 20), rem-calc(28 20), rem-calc(30 20));
+  }
+
+  .card__date { 
+    font-size: rem-calc(14);
+    margin: 0; 
+  }
+
+  .card__h3 { margin: .5em 0; }
+
+  .card__icon { @include image-placeholder(); }
+
+  .card__image {
+    @include flex-center;
+    background-color: $grey-light;
+    background-position: center;
+    background-size: cover;
+    width: 100%; height: rem-calc(265);
+  }
+
+  .card__summary { margin: 0 }
+}
+
+@mixin card-resource($per-row: 4) {
+  .card {
+    margin-bottom: rem-calc(20);
+    padding: rem-calc(12 10);
+    width: 100%;
+
+    @include breakpoint($small) {
+      margin-bottom: rem-calc(50);
+      width: 50%;
+    }
+
+    @include breakpoint($medium) { 
+      @if $per-row == 3 { width: 33%; }
+      @if $per-row == 4 { width: 25%; }
+      min-height: rem-calc(200);
+    }
+  }
+
+  .card--link {
+    border: solid 1px $white;
+    cursor: pointer;
+
+    &:hover { border-color: $grey-dark; }
+  }
+
+  .card__date { 
+    @include text-small; 
+    margin-top: 0;
+  }
+
+  .card__link { text-decoration: none; }
+}

app/assets/stylesheets/components/_cards.scss

@@ -4,6 +4,17 @@
 //--------------------------------------------------
 // mixins
 //--------------------------------------------------
+@mixin card-stats-padding {
+  padding: rem-calc(24 25); 
+  @include breakpoint($small) { padding: rem-calc(28 30); }
+}
+
+@mixin card-stats-number {
+  color: $primary;
+  font-weight: $bold;
+  line-height: 1;
+}
+
 //--------------------------------------------------
 // classes
 //--------------------------------------------------

app/assets/stylesheets/components/_charts.scss

@@ -135,15 +135,4 @@ $chart-target-stroke-width: rem-calc(3);
   @import './charts/chart-square';
 }
 
-@import './charts/chart-legend';
-@import './charts/horizontal-bar-chart';
-@import './charts/interactive-treemap';
-@import './charts/sunburst';
-
-//--------------------------------------------------
-// chart helpers
-//--------------------------------------------------
-.theme--aqua { background-color: $chart-aqua; }
-.theme--blue { background-color: $chart-blue; }
-.theme--green { background-color: $chart-green; }
-.theme--purple { background-color: $chart-purple; } 
+@import './charts/chart-legend';