From 2504f479cca81cf620084c47564e28a7ecc4fca7 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Sun, 27 Jan 2019 18:26:13 +0000
Subject: [PATCH] form styling

---
 TODO.md                    |   4 ++
 assets/scss/_buefy.scss    |  17 +++++
 components/ContentPage.vue |   1 +
 pages/contact.vue          | 134 +++++++++++++++++++++++++++++--------
 4 files changed, 127 insertions(+), 29 deletions(-)

diff --git a/TODO.md b/TODO.md
index 0a2e1ec..4e1b2fb 100644
--- a/TODO.md
+++ b/TODO.md
@@ -6,6 +6,10 @@
 ## Menu
 * Proper background images for hover effect
 
+## contact
+* social icons at bottom right of form
+* form background image
+
 ## General
 * loading transitions
 * nav buttons
diff --git a/assets/scss/_buefy.scss b/assets/scss/_buefy.scss
index 262ce06..1627f78 100644
--- a/assets/scss/_buefy.scss
+++ b/assets/scss/_buefy.scss
@@ -2,7 +2,24 @@ $link: $color__primary-500;
 $link-hover: $color__primary-700;
 
 $primary: #f00;
+$white: $color__neutral-900;
+$danger: $color__accent-danger-300;
+$success: $color__accent-success-300;
 
 @import "~bulma/sass/utilities/_all.sass";
 @import "~bulma/bulma.sass";
 @import "~buefy/src/scss/buefy";
+
+.label {
+  color: $color__neutral-700;
+  @include font-title(600);
+}
+
+.input, .textarea {
+  font-weight: 600;
+}
+
+.help {
+  font-weight: 600;
+  font-size: .8em;
+}
diff --git a/components/ContentPage.vue b/components/ContentPage.vue
index b81c199..092c525 100644
--- a/components/ContentPage.vue
+++ b/components/ContentPage.vue
@@ -72,6 +72,7 @@ $z-index-top: 10;
 .content {
   position: absolute;
   width: 100%;
+  min-height: 100%;
   top: 0;
   right: 0;
 
diff --git a/pages/contact.vue b/pages/contact.vue
index c227494..263ff6f 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -1,49 +1,73 @@
 <template>
-  <ContentPage heading="The Contact Page Heading">
+  <ContentPage heading="Contact Me">
 
-    <b-field label="Name">
-      <b-input v-model.trim="form.name"
-               placeholder="Your name ...">
-      </b-input>
-    </b-field>
+    <form class="contact-form">
+      <div class="form-content">
+        <b-field label="Name"
+                 :type="attemptedSubmit && form.name.length < 1 ? 'is-danger' : ''"
+                 :message="attemptedSubmit && form.name.length < 1 ? 'Please include your name.' : ''"
+        >
+          <b-input v-model.trim="form.name"
+                   @input="$v.form.name.$touch()"
+                   placeholder="Your name ...">
+          </b-input>
+        </b-field>
 
-    <b-field label="Email">
-      <b-input v-model="form.email"
-               type="email"
-               placeholder="Your email ...">
-      </b-input>
-    </b-field>
+        <b-field label="Email"
+                 :type="attemptedSubmit && form.email.length < 1 ? 'is-danger' : ''"
+                 :message="attemptedSubmit && form.email.length < 1 ? 'Please include your email address.' : ''"
+        >
+          <b-input v-model="form.email"
+                   type="email"
+                   placeholder="Your email ...">
+          </b-input>
+        </b-field>
 
-    <b-field label="Subject">
-      <b-input v-model="form.subject"
-               placeholder="Your subject ...">
-      </b-input>
-    </b-field>
+        <b-field label="Subject">
+          <b-input v-model="form.subject"
+                   placeholder="Your subject ...">
+          </b-input>
+        </b-field>
 
-    <b-field label="Message">
-      <b-input v-model="form.message"
-               placeholder="Your message ..."
-               type="textarea">
-      </b-input>
-    </b-field>
+        <b-field label="Message"
+                 :type="attemptedSubmit && form.message.length < 1 ? 'is-danger' : ''"
+                 :message="attemptedSubmit && form.message.length < 1 ? 'Please include a message.' : ''"
+        >
+          <b-input v-model="form.message"
+                   placeholder="Your message ..."
+                   type="textarea">
+          </b-input>
+        </b-field>
 
-    <button class="button is-success is-outlined"
-            @click.prevent="onSubmit"
-            :disabled="isDisabled">
-      Send
-    </button>
+        <button class="btn-submit"
+                type="button"
+                @click.prevent="onSubmit"
+                :disabled="isDisabled">
+          Send
+        </button>
+      </div>
+    </form>
+
+    <BackgroundImageLoader slot="background"
+                           class="background"
+                           image-url="https://via.placeholder.com/1920x1080"
+    >
+      <div slot="overlay" class="background-tint background-overlay"></div>
+    </BackgroundImageLoader>
   </ContentPage>
 </template>
 
 <script>
 import ContentPage from '@/components/ContentPage'
 import { required, email } from 'vuelidate/lib/validators'
+import BackgroundImageLoader from '@/components/BackgroundImageLoader'
 
 export default {
   name: 'HomePage',
 
   components: {
-    ContentPage
+    ContentPage,
+    BackgroundImageLoader,
   },
 
   data() {
@@ -104,5 +128,57 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+.contact-form {
+  padding: 1rem 1rem 2rem;
+  border-radius: 2px;
+  background-color: rgba(#fff, .95);
+  background: linear-gradient(
+                to bottom right,
+                rgba(#fff, .9),
+                rgba($color__neutral-800, .9)
+              ),
+              url(https://via.placeholder.com/800x800);
+  background-size: cover;
+  background-position: center center;
+  
+  @media (min-width: $bp__layout) {
+    padding: 2rem;
+  }
+}
+
+.form-content {
+  max-width: 30em;
+  margin: 0 auto;
+}
+
+.background-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.btn-submit {
+  font-size: 1.2em;
+  border: 2px solid $color__neutral-300;
+  padding: .2em .8em;
+  @include font-title(600);
+  color: $color__neutral-500;
+  cursor: pointer;
+
+  transition: opacity .3s;
+  opacity: .7;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: .1;
+    cursor: auto;
+  }
+}
 </style>