Merge branch 'release-2.1.0'

.gitignore

@@ -20,4 +20,5 @@
 /public/packs
 /public/packs-test
 /node_modules
-.DS_Store
+.DS_Store
+.env

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2.1.0
+
+* Addition of a contact form to submit metadata suggestions
+
 ### 2.0.0
 
 **Ocean+ Library:**

Gemfile

@@ -59,6 +59,7 @@ group :development do
   gem 'capistrano-passenger', '~> 0.1.1', require: false
   gem 'capistrano-yarn'
   gem 'capistrano-nvm'
+  gem 'letter_opener'
 end
 
 

Gemfile.lock

@@ -100,6 +100,10 @@ GEM
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
+    launchy (2.4.3)
+      addressable (~> 2.3)
+    letter_opener (1.7.0)
+      launchy (~> 2.2)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -229,6 +233,7 @@ DEPENDENCIES
   dotenv-rails
   font-awesome-rails
   jbuilder (~> 2.5)
+  letter_opener
   listen (>= 3.0.5, < 3.2)
   pg (~> 0.18)
   puma (~> 3.7)

README.md

@@ -10,12 +10,14 @@
 ## Local development
 
 - Clone repo
+- Request an `.env` file from the team
 - `bundle install`
 - `yarn install`
 - `rails s`
 
 ## Importing data
 
+- rails db:create db:migrate
 - Import metadata rake task
 - `rake import:metadata['lib/data/seed/OceanPlusLibrary-MetadataList-9Mar2019.csv']`
 - Check logs to see any errors

app/assets/stylesheets/application.scss

@@ -21,6 +21,7 @@
 @import './utilities/flexbox.scss';
 @import './utilities/base.scss';
 @import './utilities/helpers.scss';
+@import './utilities/form-helpers.scss';
 
 // components
 @import 'components/*';

app/assets/stylesheets/components-vue/_nav.scss

@@ -28,7 +28,7 @@
         top: 0;
         right: rem-calc(-10);
         bottom: 0;
-        z-index: 2000;
+        z-index: $z-100;
 
         transform: translateX(100%);
 

app/assets/stylesheets/components-vue/_v-form.scss

@@ -0,0 +1,72 @@
+.v-form {
+  &__error {
+    color: $red-required;
+    font-style: normal;
+    font-weight: bold;
+    margin-top: rem-calc(14);
+
+    display: inline-block;
+  }
+
+  &__overlay {
+    background-color: rgba($white, 0.8);
+
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: $z-200;
+  }
+
+    &__success {
+      @extend .item-center;
+
+      background-color: $blue-dark;
+      color: $white;
+      box-shadow: rem-calc(0 1 2 1) rgba($black, 0.5);
+      padding: rem-calc(30 20);
+      width: 80%;
+
+      position: fixed;
+
+      @include breakpoint($small) {
+        padding: rem-calc(20 130);
+        width: rem-calc(690); height: rem-calc(510);
+      }
+    }
+
+      &__success-icon {
+        background-size: rem-calc(50 50);
+        background-position: center;
+        background-repeat: no-repeat;
+        border: solid rem-calc(2) $white;
+        border-radius: 100%;
+        padding: rem-calc(20);
+        width: rem-calc(90); height: rem-calc(90);
+
+        @include breakpoint($medium) {
+          background-size: rem-calc(75 75);
+          padding: rem-calc(30);
+          width: rem-calc(130); height: rem-calc(130); 
+        }
+      }
+
+      &__success-title {
+        align-self: flex-start;
+        margin-top: rem-calc(30);
+        margin-bottom: rem-calc(14);
+      }
+
+      &__success-message {
+        align-self: flex-start;
+        margin-bottom: rem-calc(30);
+      } 
+
+      &__success-button {
+        border-radius: rem-calc(2);
+        font-size: rem-calc(16);
+        margin-top: rem-calc(20);
+        padding: rem-calc(12 65);
+      } 
+}

app/assets/stylesheets/components/_buttons.scss

@@ -39,6 +39,7 @@
 
   &--blue { @include button-background($blue); }
   &--green { @include button-background($green); }
+  &--grey { @include button-background($grey-dark); }
 
   &--line-white { border: solid white rem-calc(2); }
   &--line-orange { border: solid $secondary rem-calc(2); }

app/assets/stylesheets/components/_form.scss

@@ -0,0 +1,88 @@
+$border: solid rem-calc(1) $grey;
+$checkbox-width: rem-calc(30);
+
+.form {
+  &__section-header {
+    margin-top: rem-calc(34);
+    padding-bottom: rem-calc(20);
+    border-bottom: $border;
+  }
+
+  &__field {
+    border-radius: rem-calc(3);
+    border: $border;
+    font-size: inherit;
+    padding: rem-calc(14);
+    width: 100%; height: rem-calc(50);
+
+    display: block;
+  }
+
+  &__label {
+    font-size: rem-calc(16);
+    font-weight: bold;
+    margin: rem-calc(16 0 10 0);
+
+    display: inline-block;
+  }
+
+    &__label-comment {
+      font-weight: normal;
+    }
+
+  &__checkbox-row {
+    margin: rem-calc(16 0 10 0);
+  }
+
+    &__default-checkbox {
+      @extend %hidden-input;
+      top: $checkbox-width;
+      left: $checkbox-width / 2;
+    }
+
+    &__checkbox {
+      border: $border;
+      cursor: pointer;
+      margin-right: rem-calc(8);
+      width: $checkbox-width; height: $checkbox-width;
+
+      display: inline-block;
+    }
+
+  &__submit {
+    border-radius: rem-calc(2);
+    font-size: rem-calc(16);
+    margin-top: rem-calc(20);
+    padding: rem-calc(12 65);
+  }
+
+  &__required {
+    color: $red-required;
+    font-weight: bold;
+    font-style: inherit;
+  }
+}
+
+@include custom_input_checked('.form__default-checkbox', '.form__checkbox') {
+  &::after {
+    background: $blue image-url('icons/tick.svg') center no-repeat;
+    content: '';
+    width: $checkbox-width;
+    height: $checkbox-width;
+
+    display: block;
+  }
+}
+
+@include custom_input_focus_default('.form__default-checkbox', '.form__checkbox');
+
+::-webkit-input-placeholder {
+  font-style: italic;
+} 
+
+:-ms-input-placeholder {
+  font-style: italic;
+}
+::placeholder {
+  font-style: italic;
+}

app/assets/stylesheets/components/_header.scss

@@ -76,4 +76,5 @@
   &--home { background-image: image-url('hero/turtle.jpg'); }
   &--metadata { background-image: image-url('hero/coral.jpg'); }
   &--data-limitations { background-image: image-url('hero/river.jpg'); }
+  &--contact { background-image: image-url('hero/shark.jpg'); }
 }

app/assets/stylesheets/components/_icons.scss

@@ -18,6 +18,8 @@
 
   &--share { background-image: image-url('icons/share.svg'); }
 
+  &--tick { background-image: image-url('icons/tick.svg'); }
+
   &--theme {
     background-position: center;
     background-repeat: no-repeat;

app/assets/stylesheets/utilities/_base.scss

@@ -11,6 +11,10 @@ body {
   margin: 0;
 }
 
+main {
+  display: block; //ie fix
+}
+
 h1 {
   color: white;
   font-size: rem-calc(26);
@@ -32,7 +36,16 @@ h3 {
   margin: rem-calc(0 0 16 0);
 }
 
-p { margin-top: 0; }
+p { 
+  margin-top: 0; 
+
+  a {
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover { text-decoration: underline; }
+  }
+}
 
 a { 
   color: $body-font-color; 

app/assets/stylesheets/utilities/_form-helpers.scss

@@ -0,0 +1,34 @@
+%hidden-input {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: rem-calc(1);
+  margin: - rem-calc(1);
+  overflow: hidden;
+  padding: 0;
+  white-space: nowrap;
+  width: rem-calc(1);
+  opacity: 0;
+  position: absolute;
+}
+
+@mixin custom_input_checked($default-input-selector, $custom-input-selector) {
+  #{$default-input-selector} {
+    &:checked + #{$custom-input-selector} {
+      @content;
+    }
+  }
+}
+@mixin custom_input_focus_default($default-input-selector, $custom-input-selector) {
+  #{$default-input-selector} {
+    &:focus + #{$custom-input-selector} {
+      outline-width: rem-calc(2);
+      outline-style: solid;
+      outline-color: Highlight;
+
+      @media (-webkit-min-device-pixel-ratio:0) {
+        outline-color: -webkit-focus-ring-color;
+        outline-style: auto;
+      }
+    }
+  }
+}

app/assets/stylesheets/utilities/_helpers.scss

@@ -69,6 +69,14 @@
 .inline-block { display: inline-block; }
 .float-left { float: left; }
 
+.item-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+}
+
 .vertical-center { 
   position: absolute;
   top: 50%;

app/assets/stylesheets/utilities/_variables.scss

@@ -3,6 +3,7 @@
 //--------------------------------------------------
 $black: #000000;
 $black-translucent: rgba(black, .5);
+$white: #ffffff;
 
 $blue-faint: #33548F;
 $blue-light: #EDEEF1;
@@ -11,6 +12,7 @@ $blue-dark: #293039;
 
 $grey-light: #FAFAFB;
 $grey: #D5D8E1;
+$grey-dark: #606060;
 
 $green: #398439;
 
@@ -22,6 +24,8 @@ $theme-3: #2e504e;
 $theme-4: #6e618e;
 $theme-5: #156d96;
 
+$red-required: #e75350;
+
 $primary: $blue-dark;
 $secondary: $orange;
 
@@ -40,6 +44,10 @@ $site-width: rem-calc(1200);
 $site-width-medium: $site-width * .80;
 $site-width-small: $site-width * .60;
 
+$z-100: 100;
+$z-200: 200;
+$z-300: 300;
+
 //--------------------------------------------------
 // buttons
 //--------------------------------------------------