From 0a41a6be68b62496b2392ebc129f4c7ff8ee23f4 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Wed, 20 Feb 2019 01:39:22 +0100
Subject: [PATCH] Split up form and fine tuned navigation within the form

---
 src/components/EditEvent.vue                | 386 ++++----------------
 src/components/EventForm.vue                | 317 ++++++++++++++++
 src/components/EventPage.vue                |  35 +-
 src/components/Gallery.vue                  |   2 +-
 src/components/Home.vue                     |  21 +-
 src/components/Popover.vue                  |   4 +-
 src/components/form/FormElementLocation.vue | 342 +++++++++++++++++
 src/scss/typography.scss                    |   3 +-
 8 files changed, 778 insertions(+), 332 deletions(-)
 create mode 100644 src/components/EventForm.vue
 create mode 100644 src/components/form/FormElementLocation.vue

diff --git a/src/components/EditEvent.vue b/src/components/EditEvent.vue
index 99207f8..e2221b7 100644
--- a/src/components/EditEvent.vue
+++ b/src/components/EditEvent.vue
@@ -1,103 +1,42 @@
 <template>
   <div class="parent">
-    <h1 class="slipping-left">registrer en ny opplevelse</h1>
 
     <div class="container">
-      <div class="cont2">
-        <div class="form-item required">
-          <label class="title" for="email2-field">tittel <span class="required">*</span></label>
-          <input class="field-element" name="email" x-autocompletetype="email" type="email" spellcheck="false">
-        </div>
-
-        <fieldset class="form-item fields required">
-          <div class="title">dato <span class="required">*</span></div>
-          <div class="field first-name">
-            <label class="caption"><input class="field-element field-control" name="fname" x-autocompletetype="given-name" type="date" spellcheck="false" maxlength="30" data-title="First">
-                    fra dato</label>
-          </div>
-
-          <div class="field last-name">
-            <label class="caption"><input class="field-element field-control" name="lname" x-autocompletetype="surname" type="date" spellcheck="false" maxlength="30" data-title="Last">
-            til dato</label>
-          </div>
-        </fieldset>
-
-        <div class="form-item required">
-          <label class="title" for="text3-field">sted<span class="required">*</span></label>
-          <input class="field-element" v-model="locationInput" v-on:keydown.enter.prevent @click="show" type="text">
-
-          <ul class="field-autocompleted" v-click-outside="hide" v-if="showAutocompleted && features.length > 1">
-            <li v-for="result in features" @click="choosePlace(result)">{{ result.place_name_no }}</li>
-          </ul>
-        </div>
-
-        <div class="form-item field textarea required">
-          <label class="title" for="textarea4-field">love letter <span class="required">*</span></label>
-          
-          <textarea class="field-element "></textarea>
-        </div>
-
-        <input id="file-upload" type="file" multiple>
-
-        <div class="form-button-wrapper form-button-wrapper--align-left">
-          <input class="button sqs-system-button sqs-editable-button" type="submit" value="Registrer">
-        </div>
-
-<!--         <div class="form-button-wrapper form-button-wrapper--align-left">
-          <button class="button sqs-system-button sqs-editable-button" @click="gridSettings">Settings</button>
-        </div> -->
-
-
-        <div class="hidden form-submission-text">Thank you!</div>
-
-        <div class="hidden form-submission-html" data-submission-html=""></div>
-
-      </div>
+      <h1 class="slipping-left">registrer en ny opplevelse</h1>
+      
+      <event-form></event-form>
     </div>
 
+    <div class="image-grid">
+      <grid-layout
+        ref="imageGrid"
+        :layout.sync="layout"
+        :colNum="3"
+        :rowHeight="rowHeight"
+        :responsive="true"
+        :cols="grid.cols"
+        :breakpoints="grid.breakpoints"
+        :autoSize="true"
+        :is-draggable="reorder"
+        :is-resizable="false"
+        :is-mirrored="false"
+        :margin="[10, 10]"
+        :use-css-transforms="true">
 
-
-     <!--    <div style="
-          width: 100%;
-          height: 5rem;
-          border: 1px solid red;
-          margin-bottom: 1rem;
-          margin-left: -0.5rem;
-          padding-right: 0.5rem;
-        ">
-
-        </div> -->
-
-         <div class="image-grid">
-          <grid-layout
-            ref="imageGrid"
-            :layout.sync="layout"
-            :colNum="3"
-            :rowHeight="rowHeight"
-            :responsive="true"
-            :cols="grid.cols"
-            :breakpoints="grid.breakpoints"
-            :autoSize="true"
-            :is-draggable="reorder"
-            :is-resizable="false"
-            :is-mirrored="false"
-            :margin="[10, 10]"
-            :use-css-transforms="true">
-
-            <grid-item class="grid-item" v-for="item in layout"
-              :x="item.x"
-              :y="item.y"
-              :w="item.w"
-              :h="item.h"
-              :i="item.i"
-              :key="item.i">
-              <div v-bind:style="{ 'background-image': 'url(' + item.img + ')' }">
-                <span>{{item.i}}</span>
-              </div>
-              <!-- <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Obama_portrait_crop.jpg"> -->
-            </grid-item>
-          </grid-layout>
-        </div>
+        <grid-item class="grid-item" v-for="item in layout"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          :i="item.i"
+          :key="item.i">
+        
+          <div v-bind:style="{ 'background-image': 'url(' + item.img + ')' }">
+            <span>{{item.i}}</span>
+          </div>
+        </grid-item>
+      </grid-layout>
+    </div>
 
     
     <div class="tools">
@@ -112,11 +51,13 @@
 import axios from 'axios'
 import VueGridLayout from 'vue-grid-layout';
 import ClickOutside from 'vue-click-outside'
+import EventForm from './EventForm'
 
 export default {
   components: { 
     GridLayout: VueGridLayout.GridLayout,
-    GridItem: VueGridLayout.GridItem
+    GridItem: VueGridLayout.GridItem,
+    EventForm: EventForm
   },
   computed: {
     rowHeight: function() {
@@ -127,12 +68,17 @@ export default {
   },
   data() {
     return {
-      locationInput: undefined,
       timeout: undefined,
       features: [],
       showAutocompleted: false,
       selectedPlace: undefined,
       imageGrid: undefined,
+      title: '',
+      dateStart: '',
+      dateEnd: '',
+      subtext: '',
+      location: undefined,
+      files: [],
       reorder: false,
       grid: {
         cols: { lg: 6, md: 5, sm: 4, xs: 3, xxs: 2 },
@@ -173,7 +119,7 @@ export default {
     }
   },
   watch: {
-    locationInput: function(newVal, preVal) {      
+    location: function(newVal, preVal) {      
       console.log('input changed')
       let place = this.selectedPlace ? this.selectedPlace.place_name_no : false
 
@@ -187,6 +133,35 @@ export default {
     this.imageGrid = this.$refs.imageGrid;
   },
   methods: {
+    processForm: function() {
+      let data = {
+        title: this.title,
+        dateStart: this.dateStart,
+        dateEnd: this.dateEnd,
+        subtext: this.subtext,
+        locationName: this.location,
+        geoposition: this.selectedPlace.geometry.coordinates,
+        mapboxData: this.selectedPlace
+      }
+
+      fetch('http://localhost:5000/api/adventure', {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      })
+      // axios.post('localhost:5000/api/adventure', {
+      //   body: JSON.stringify(data)
+      // })
+      .then((resp) => console.log('response from posting to server:', resp))
+      .catch((error) => console.error('error from post request:', error))
+    },
+    processFile(event) {
+      this.files = event.target.files;
+      console.log('files', this.files)
+    },
     gridSettings() {
       let breakpoint = this.$refs.imageGrid.lastBreakpoint;
       let currentColCount = this.grid.cols[breakpoint];
@@ -200,7 +175,7 @@ export default {
     },
     choosePlace(place) {
       console.log('Chooosen');
-      this.locationInput = place.place_name_no;
+      this.location = place.place_name_no;
       this.selectedPlace = place;
       this.showAutocompleted = false;
     },
@@ -211,7 +186,7 @@ export default {
       this.showAutocompleted = true;
     },
     call() {
-      axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.locationInput}.json`, {
+      axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.location}.json`, {
         params: {
           access_token: 'pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w',
           autocomplete: true,
@@ -288,7 +263,7 @@ export default {
     // background-color: green;
 
     display: block;
-    width: 90vw;
+    width: 70vw;
     margin: 4rem auto;
 
     @media screen and (max-width: 650px) {
@@ -300,224 +275,15 @@ export default {
 
   .container {
     color: rgba(0, 0, 0, 0.701961);
-    display: block;
-    // margin: 0 auto;
-    font-family: 'Proxima Nova';
-    margin-top: 3rem;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 300;
-    height: 502px;
-    letter-spacing: normal;
     line-height: 22.399999618530273px;
     padding-right: 0px;
     width: 100%;
     max-width: 612px;
 
-
-  
+    margin: 0 auto;
 
 
-    margin-bottom: 4rem;
+    margin-bottom: 3rem;
   }
 
-  .cont2 {
-    box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
-    clear: both;
-    color: rgba(0, 0, 0, 0.701961);
-    display: block;
-    font-family: 'Proxima Nova';
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 300;
-    height: 485px;
-    letter-spacing: normal;
-    line-height: 22.399999618530273px;
-    outline-color: rgba(0, 0, 0, 0.701961);
-    outline-style: none;
-    outline-width: 0px;
-    padding: 0px 15px 17px;
-    position: relative;
-    transition-delay: 0s;
-    transition-duration: 0.2s;
-    transition-property: box-shadow;
-    transition-timing-function: ease-in-out;
-  }
-
-  .form-item {
-    border-width: 0px;
-    color: rgba(0, 0, 0, 0.701961);
-    display: block;
-    font-family: 'Proxima Nova';
-    font-size: 14px;
-    line-height: 17px;
-    margin: 0 0 1rem -12px;
-    min-width: min-content;
-    padding: 0px;
-    
-    & .title {
-      color: rgba(0, 0, 0, 0.701961);
-      display: block;
-      font-family: 'Proxima Nova';
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 300;
-      height: 17px;
-      letter-spacing: normal;
-      line-height: 17px;
-    }
-
-    & .field {
-      display: block;
-      float: left;
-      // margin-bottom: 24px;
-      position: relative;
-      width: 290.9375px;
-
-      @media screen and (max-width: 650px) {
-        max-width: 40vw;
-        min-width: 120px;
-      }
-
-      &:last-of-type {
-        margin-left: 11px;
-      }
-
-      & .caption {
-        cursor: pointer;
-        display: inline;
-        font-family: 'Proxima Nova';
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 300;
-        height: auto;
-        letter-spacing: normal;
-        line-height: 14px;
-      }
-    }
-
-    .field-autocompleted {
-      // width: 591.8px;
-      width: calc(100% - 1.26rem);
-      // height: 200px;
-      position: absolute;
-      padding: 0;
-      margin: 0;
-      margin-top: -6px;
-      background-color: white;
-
-      li {
-        list-style: none;
-        height: 2.3rem;
-        line-height: 2.3rem;
-        padding-left: 0.5rem;
-        white-space: nowrap;
-        overflow: hidden;
-
-        &:hover {
-          background-color: #e6e6e6;
-          cursor: pointer;
-        }
-      }
-      
-      border-color: rgb(204, 204, 204);
-      border-radius: 2px;
-      border-style: solid;
-      border-width: 1px;
-    }
-
-    & input {
-      -webkit-appearance: none;
-      -webkit-rtl-ordering: logical;
-      -webkit-user-select: text;
-      background-color: rgb(250, 250, 250);
-
-      border: 1px solid rgb(204, 204, 204);
-      border-radius: 3px;
-      border-image-outset: 0px;
-      border-image-repeat: stretch;
-      border-image-slice: 100%;
-      border-image-source: none;
-      border-image-width: 1;
-      box-sizing: border-box;
-      cursor: auto;
-      display: inline-block;
-     
-      height: 42px;
-      font-family: 'Proxima Nova';
-      letter-spacing: normal;
-      font-size: 14px;
-      line-height: 16px;
-      margin: 6px 0 4px;
-      padding: 12px;
-
-      width: 100%;
-    }
-
-    & textarea {
-      -webkit-appearance: none;
-      -webkit-rtl-ordering: logical;
-      -webkit-user-select: text;
-      border-color: rgb(204, 204, 204);
-      border-left-radius: 2px;
-      border-right-radius: 2px;
-      border-style: solid;
-      border-width: 1px;
-
-      font-family: 'Proxima Nova';
-      letter-spacing: normal;
-      font-size: 14px;
-
-      box-sizing: border-box;
-
-      line-height: 14px;
-      margin: 6px 0px 4px;
-      min-height: 100px;
-      overflow-x: auto;
-      overflow-y: auto;
-      padding: 12px;
-      resize: vertical;
-      text-align: start;
-      text-indent: 0px;
-      text-shadow: none;
-      text-transform: none;
-      vertical-align: top;
-      white-space: pre-wrap;
-      width: 100%;
-      word-spacing: 0px;
-      word-wrap: break-word;
-      writing-mode: horizontal-tb;
-    }
-  }
-
-
-  .button {
-    -webkit-appearance: none;
-    -webkit-backface-visibility: none;
-    background-color: rgb(39, 39, 39);
-    border-color: rgb(39, 39, 39);
-    border-style: outset;
-    border-width: 0px;
-    border-radius: 3px;
-    color: rgb(255, 255, 255);
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    height: 42px;
-    letter-spacing: 1px;
-    line-height: 14px;
-    margin-left: -10px;
-    padding: 0 1rem;
-    text-align: center;
-    text-decoration: none;
-    text-shadow: none;
-    text-transform: uppercase;
-    transition-delay: 0s;
-    transition-duration: 0.1s;
-    transition-property: opacity;
-    transition-timing-function: linear;
-    vertical-align: baseline;
-    white-space: pre;
-    writing-mode: horizontal-tb;
-  }
 </style>
\ No newline at end of file
diff --git a/src/components/EventForm.vue b/src/components/EventForm.vue
new file mode 100644
index 0000000..9f994b9
--- /dev/null
+++ b/src/components/EventForm.vue
@@ -0,0 +1,317 @@
+<template>
+  <form class="form" @submit.prevent="">
+  <!-- <form class="form" @submit.prevent="processForm"> -->
+    <div class="form-item required">
+      <label class="title">tittel <span class="required">*</span></label>
+      <input class="field-element" v-model="title" type="text" :tabindex="1">
+    </div>
+
+    <fieldset class="form-item">
+      <div class="title">dato <span class="required">*</span></div>
+      <div class="field first-name">
+        <label class="caption">
+          <input v-model="dateStart" type="date" spellcheck="false" maxlength="30" :tabindex="2">
+          fra dato
+        </label>
+      </div>
+
+      <div class="field last-name">
+        <label class="caption">
+          <input v-model="dateEnd" type="date" spellcheck="false" maxlength="30" :tabindex="3">
+          til dato
+        </label>
+      </div>
+    </fieldset>
+
+    <form-element-location @newLocation="setLocation"></form-element-location>
+
+    <div class="form-item">
+      <label class="title">love letter <span class="required">*</span></label>
+      
+      <textarea v-model="subtext"></textarea>
+    </div>
+
+    <div class="form-item">
+      <label class="title">last opp bilder</label>
+      <input id="file-upload" type="file" @change="processFile" multiple>
+      {{ files.length }}
+    </div>
+
+    <div>
+      <button class="button" type="submit">Legg til</button>
+    </div>
+
+<!--         <div class="form-button-wrapper form-button-wrapper--align-left">
+      <button class="button sqs-system-button sqs-editable-button" @click="gridSettings">Settings</button>
+    </div> -->
+
+
+    <div class="hidden form-submission-text">Thank you!</div>
+
+    <div class="hidden form-submission-html" data-submission-html=""></div>
+
+  </form>
+</template>
+
+<script>
+import axios from 'axios'
+import ClickOutside from 'vue-click-outside'
+import FormElementLocation from './form/FormElementLocation'
+
+export default {
+  components: {
+    FormElementLocation
+  },
+  data() {
+    return {
+      title: '',
+      dateStart: '',
+      dateEnd: '',
+      chosenLocation: undefined,
+      subtext: '',
+      files: [],
+    }
+  },
+  computed: {
+    LocationName() {
+      return this.chosenLocation ? this.chosenLocation.place_name_no : undefined;
+    },
+    LocationGeoposition() {
+      return this.chosenLocation ? this.chosenLocation.geometry.coordinates : undefined;
+    }
+  },
+  methods: {
+    setLocation(inputLocation) {
+      console.log('detected location changed')
+      console.log('inputLocation', inputLocation)
+      this.chosenLocation = inputLocation;
+    },
+    processForm: function() {
+      let data = {
+        title: this.title,
+        dateStart: this.dateStart,
+        dateEnd: this.dateEnd,
+        subtext: this.subtext,
+        locationName: this.LocationName,
+        geoposition: this.LocationGeoposition,
+        mapboxData: this.chosenLocation
+      }
+
+      fetch('http://localhost:5000/api/adventure', {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      })
+      // axios.post('localhost:5000/api/adventure', {
+      //   body: JSON.stringify(data)
+      // })
+      .then((resp) => console.log('response from posting to server:', resp))
+      .catch((error) => console.error('error from post request:', error))
+    },
+    processFile(event) {
+      this.files = event.target.files;
+      console.log('files', this.files)
+    },
+  }
+}
+  
+</script>
+
+<style lang="scss" scoped>
+.form {
+  box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+  clear: both;
+  color: rgba(0, 0, 0, 0.701961);
+  letter-spacing: normal;
+  line-height: 22.399999618530273px;
+  outline-color: rgba(0, 0, 0, 0.701961);
+  outline-style: none;
+  outline-width: 0px;
+  padding: 0px 15px 17px;
+  position: relative;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-property: box-shadow;
+  transition-timing-function: ease-in-out;
+
+
+  &-item {
+    border-width: 0px;
+    color: rgba(0, 0, 0, 0.701961);
+    display: block;
+    font-family: 'Proxima Nova';
+    font-size: 14px;
+    line-height: 17px;
+    margin: 0 0 1rem -12px;
+    min-width: min-content;
+    padding: 0px;
+
+    & .title {
+      color: rgba(0, 0, 0, 0.701961);
+      display: block;
+      font-family: 'Proxima Nova';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 300;
+      height: 17px;
+      letter-spacing: normal;
+      line-height: 17px;
+    }
+
+    & .field {
+      display: block;
+      float: left;
+      // margin-bottom: 24px;
+      position: relative;
+      width: 290.9375px;
+
+      @media screen and (max-width: 650px) {
+        max-width: 40vw;
+        min-width: 120px;
+      }
+
+      &:last-of-type {
+        margin-left: 11px;
+      }
+
+      & .caption {
+        cursor: pointer;
+        display: inline;
+        font-family: 'Proxima Nova';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 300;
+        height: auto;
+        letter-spacing: normal;
+        line-height: 14px;
+      }
+    }
+  }
+
+  & input {
+    -webkit-appearance: none;
+    -webkit-rtl-ordering: logical;
+    -webkit-user-select: text;
+    background-color: rgb(250, 250, 250);
+
+    border: 1px solid rgb(204, 204, 204);
+    border-radius: 3px;
+    border-image-outset: 0px;
+    border-image-repeat: stretch;
+    border-image-slice: 100%;
+    border-image-source: none;
+    border-image-width: 1;
+    box-sizing: border-box;
+    cursor: auto;
+    display: inline-block;
+   
+    height: 42px;
+    font-family: 'Proxima Nova';
+    letter-spacing: normal;
+    font-size: 14px;
+    line-height: 16px;
+    margin: 6px 0 4px;
+    padding: 12px;
+
+    width: 100%;
+  }
+
+  & textarea {
+    -webkit-appearance: none;
+    -webkit-rtl-ordering: logical;
+    -webkit-user-select: text;
+    border-color: rgb(204, 204, 204);
+    border-left-radius: 2px;
+    border-right-radius: 2px;
+    border-style: solid;
+    border-width: 1px;
+
+    font-family: 'Proxima Nova';
+    letter-spacing: normal;
+    font-size: 14px;
+
+    box-sizing: border-box;
+
+    line-height: 14px;
+    margin: 6px 0px 4px;
+    min-height: 100px;
+    overflow-x: auto;
+    overflow-y: auto;
+    padding: 12px;
+    resize: vertical;
+    text-align: start;
+    text-indent: 0px;
+    text-shadow: none;
+    text-transform: none;
+    vertical-align: top;
+    white-space: pre-wrap;
+    width: 100%;
+    word-spacing: 0px;
+    word-wrap: break-word;
+    writing-mode: horizontal-tb;
+  }
+}
+
+.field-autocompleted {
+  width: calc(100% - 1.26rem);
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  margin-top: -6px;
+  background-color: white;
+
+  li {
+    list-style: none;
+    height: 2.3rem;
+    line-height: 2.3rem;
+    padding-left: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+      background-color: #e6e6e6;
+      cursor: pointer;
+    }
+  }
+  
+  border-color: rgb(204, 204, 204);
+  border-radius: 2px;
+  border-style: solid;
+  border-width: 1px;
+}
+
+
+.button {
+  -webkit-appearance: none;
+  -webkit-backface-visibility: none;
+  background-color: rgb(39, 39, 39);
+  border-color: rgb(39, 39, 39);
+  border-style: outset;
+  border-width: 0px;
+  border-radius: 3px;
+  color: rgb(255, 255, 255);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  height: 42px;
+  letter-spacing: 1px;
+  line-height: 14px;
+  margin-left: -10px;
+  padding: 0 1rem;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: uppercase;
+  transition-delay: 0s;
+  transition-duration: 0.1s;
+  transition-property: opacity;
+  transition-timing-function: linear;
+  vertical-align: baseline;
+  white-space: pre;
+  writing-mode: horizontal-tb;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/EventPage.vue b/src/components/EventPage.vue
index 23d502f..be3c96f 100644
--- a/src/components/EventPage.vue
+++ b/src/components/EventPage.vue
@@ -9,8 +9,12 @@
     <div class="gallery">
       <div class="gallery--header">
         <h1>Topptur til gaustadtoppen æøå {{ id }}</h1>
-        <p class="gallery--info">{{ eventDate.from }} - {{ eventDate.until }}</p>
-        <p class="gallery--info">{{ eventLocation }}. <a href="#">Se kart</a></p>
+        <div class="gallery--info">
+          <p>{{ eventDate.from }} - {{ eventDate.until }}</p>
+          <p>{{ eventLocation }}. <a href="#">Se kart</a></p>
+
+          <p>{{ subtext }}</p>
+        </div>
       </div>
 
       <!-- <map-view :cords="cords"></map-view> -->
@@ -34,7 +38,8 @@ export default {
     return {
       eventLocation: 'Oslo, Gardermoen, Norge',
       startDate: undefined,
-      endDate: undefined
+      endDate: undefined,
+      subtext: 'On November 1, 2018, we embarked on our tour with Triathalon. Thank you so much to everyone who came to see us, for buying our merch, for saying hello after the shows, to the amazing hard-working people at the venues, and of course to our team + Live Nation, Ones to Watch, for booking us on our favorite tour this year. And thank you to Claud, Girl Ultra and Kevin Krauter for playing these shows with us. \n\n Here are some of our favorite moments captured by one of our favorite people, Meghan Cummings (@meghancummings). '
     }
   },
   computed: {
@@ -49,29 +54,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.popover {
-  width: 100%;
-  height: 100vh;
-  position: absolute;
-  background-color: rgba(0,0,0,0.7);
-}
 
 .gallery {
-  padding: 2.1rem;
+  // padding: 2.1rem;
 
   &--header {
-    padding-bottom: 4rem;
+    padding-bottom: 1rem;
     // background-color: NavajoWhite;
   }
 
   &--info {
-    font-family: 'Proxima Nova';
-    font-weight: 300;
-    font-style: italic;
-    font-size: 18px;
+    font-size: 15px;
     line-height: 1.6rem;
     letter-spacing: 0rem;
-    color: rgba(0, 0, 0, .7);
+    color: rgba(0, 0, 0, .8);
 
     &:first-of-type {
       margin-top: 0.8rem;
@@ -86,6 +82,13 @@ export default {
       }
     }
   }
+
+  &--subtext {
+    font-size: 15px;
+    line-height: 1.6rem;
+    letter-spacing: 0rem;
+    color: rgba(0, 0, 0, .8);
+  }
 }
 
 .form {
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 491243b..2a5dff4 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -107,6 +107,6 @@ export default {
     flex-direction: row;
     justify-content: space-evenly;
     flex-wrap: wrap;
-
+    padding: 1rem 0;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
index a859453..e026263 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -10,7 +10,10 @@
 
     <Popover class="popup" v-if="popoverShow" :image="popoverImage"></Popover>
 
-    <event-page style="height: 100%; overflow: auto;"></event-page>
+    <div class="container">
+      <h1 class="header">leifs opplevelser</h1>
+      <event-page style="height: 100%; overflow: auto;"></event-page>
+    </div>
   </div>
 </template>
 
@@ -53,10 +56,24 @@
   }
 </script>
 
-<style language="scss">
+<style language="scss" scoped>
+
+  .header {
+    margin-bottom: 5rem;
+  }
 
   h2 {
     text-align: center;
     font-weight: normal;
   }
+
+  .container {
+    min-height: 1029px;
+
+    margin: 25px auto 85px;
+    padding: 4em;
+    max-width: 888px;
+    /*max-width: 100%;*/
+    background-color: #fff;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index fb2b2fc..5a240ea 100644
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -85,8 +85,8 @@ export default {
     }
    
     img {
-      max-height: 90vh;
-      max-width: 90vw;
+      max-height: 92vh;
+      max-width: 92vw;
 
       @media screen and (max-width: 600px) {
         max-width: 95vw;
diff --git a/src/components/form/FormElementLocation.vue b/src/components/form/FormElementLocation.vue
new file mode 100644
index 0000000..fc662ad
--- /dev/null
+++ b/src/components/form/FormElementLocation.vue
@@ -0,0 +1,342 @@
+<template>
+  <div class="form-item required" style="overflow: hidden">
+    {{ highlightedLocation }}
+
+    <label class="title">sted<span class="required">*</span></label>
+    <input 
+      v-model="locationInput" 
+      @keyup.down="highlightNext" 
+      @keyup.enter="getMapboxPlaces"
+      @click="show"
+      :tabindex="4"
+      ref="listInput"
+      type="text">
+
+    <ul class="field-autocompleted" v-click-outside="hide" v-if="showAutocompleted && resultMapboxLocations.length > 1">
+        <!-- :style="{ selected: highlightedLocation === index }" -->
+      <li 
+        v-for="(location, index) in resultMapboxLocations"
+        @click="locationSelected(location)"
+        :tabindex="5 + index"
+        @keyup.enter="locationSelected(location)"
+        @keyup.down="highlightNext" 
+        @keyup.up="highlightPrev"
+        ref="listElement">
+        
+        {{ location.place_name_no }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import ClickOutside from 'vue-click-outside'
+
+export default {
+  data() {
+    return {
+      timeout: undefined,
+      resultMapboxLocations: [],
+      showAutocompleted: false,
+      chosenLocation: undefined,
+      locationInput: undefined,
+      highlightedLocation: -1
+    }
+  },
+  watch: {
+    locationInput: function(newVal, preVal) {
+      if (newVal === '') {
+        this.resultMapboxLocations = []
+        return
+      }      
+      console.log('input changed')
+      let place = this.chosenLocation ? this.LocationName : false
+
+      if (place !== newVal) {
+        this.debounce(this.getMapboxPlaces)
+      }
+    }
+  },
+  computed: {
+    LocationName() {
+      return this.chosenLocation ? this.chosenLocation.place_name_no : undefined;
+    },
+    tabIndex(index) {
+      return 4 + index;
+    }
+  },
+  methods: {
+    highlightNext() {
+      let curr = this.highlightedLocation;
+      const max = this.resultMapboxLocations.length -1;
+
+      if (curr < max) {
+        curr++
+        console.log('curr', curr, this.$refs.listElement[curr])
+        this.$refs.listElement[curr].focus({preventScroll: true})
+
+        this.highlightedLocation = curr;
+        return 
+      }
+
+      this.$refs.listInput.focus({preventScroll: true})
+      this.highlightedLocation = -1;
+    },
+    highlightPrev() {
+      let curr = this.highlightedLocation;
+
+      if (curr > 0) {
+        curr--
+        console.log('curr', curr, this.$refs.listElement[curr])
+        this.$refs.listElement[curr].focus()
+
+        this.highlightedLocation = curr;
+        return
+      }
+      
+      this.$refs.listInput.focus()
+      this.highlightedLocation = -1;
+    },
+    debounce(fn, time=1000) {
+      const functionCall = () => fn.apply(this, arguments);
+      
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(functionCall, time);
+    },
+    locationSelected(place) {
+      console.log('Chosen');
+      this.chosenLocation = place;
+      this.locationInput = this.LocationName
+      this.showAutocompleted = false;
+      this.$emit('newLocation', place)
+    },
+    hide() {
+      this.showAutocompleted = false;
+    },
+    show() {
+      this.showAutocompleted = true;
+    },
+    getMapboxPlaces() {
+      axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.locationInput}.json`, {
+        params: {
+          access_token: 'pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w',
+          autocomplete: true,
+          language: 'no'
+        }
+
+      })
+      .then((resp) => {
+        this.resultMapboxLocations = resp.data.features;
+        this.showAutocompleted = true;
+      })
+      console.log('CALLING')
+    }
+  },
+  directives: {
+    ClickOutside
+  }
+}
+  
+</script>
+
+<style lang="scss" scoped>
+.form {
+  box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+  clear: both;
+  color: rgba(0, 0, 0, 0.701961);
+  letter-spacing: normal;
+  line-height: 22.399999618530273px;
+  outline-color: rgba(0, 0, 0, 0.701961);
+  outline-style: none;
+  outline-width: 0px;
+  padding: 0px 15px 17px;
+  position: relative;
+  transition-delay: 0s;
+  transition-duration: 0.2s;
+  transition-property: box-shadow;
+  transition-timing-function: ease-in-out;
+
+
+  &-item {
+    border-width: 0px;
+    color: rgba(0, 0, 0, 0.701961);
+    display: block;
+    font-family: 'Proxima Nova';
+    font-size: 14px;
+    line-height: 17px;
+    margin: 0 0 1rem -12px;
+    min-width: min-content;
+    padding: 0px;
+
+    & .title {
+      color: rgba(0, 0, 0, 0.701961);
+      display: block;
+      font-family: 'Proxima Nova';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 300;
+      height: 17px;
+      letter-spacing: normal;
+      line-height: 17px;
+    }
+
+    & .field {
+      display: block;
+      float: left;
+      // margin-bottom: 24px;
+      position: relative;
+      width: 290.9375px;
+
+      @media screen and (max-width: 650px) {
+        max-width: 40vw;
+        min-width: 120px;
+      }
+
+      &:last-of-type {
+        margin-left: 11px;
+      }
+
+      & .caption {
+        cursor: pointer;
+        display: inline;
+        font-family: 'Proxima Nova';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 300;
+        height: auto;
+        letter-spacing: normal;
+        line-height: 14px;
+      }
+    }
+  }
+
+  & input {
+    -webkit-appearance: none;
+    -webkit-rtl-ordering: logical;
+    -webkit-user-select: text;
+    background-color: rgb(250, 250, 250);
+
+    border: 1px solid rgb(204, 204, 204);
+    border-radius: 3px;
+    border-image-outset: 0px;
+    border-image-repeat: stretch;
+    border-image-slice: 100%;
+    border-image-source: none;
+    border-image-width: 1;
+    box-sizing: border-box;
+    cursor: auto;
+    display: inline-block;
+   
+    height: 42px;
+    font-family: 'Proxima Nova';
+    letter-spacing: normal;
+    font-size: 14px;
+    line-height: 16px;
+    margin: 6px 0 4px;
+    padding: 12px;
+
+    width: 100%;
+  }
+
+  & textarea {
+    -webkit-appearance: none;
+    -webkit-rtl-ordering: logical;
+    -webkit-user-select: text;
+    border-color: rgb(204, 204, 204);
+    border-left-radius: 2px;
+    border-right-radius: 2px;
+    border-style: solid;
+    border-width: 1px;
+
+    font-family: 'Proxima Nova';
+    letter-spacing: normal;
+    font-size: 14px;
+
+    box-sizing: border-box;
+
+    line-height: 14px;
+    margin: 6px 0px 4px;
+    min-height: 100px;
+    overflow-x: auto;
+    overflow-y: auto;
+    padding: 12px;
+    resize: vertical;
+    text-align: start;
+    text-indent: 0px;
+    text-shadow: none;
+    text-transform: none;
+    vertical-align: top;
+    white-space: pre-wrap;
+    width: 100%;
+    word-spacing: 0px;
+    word-wrap: break-word;
+    writing-mode: horizontal-tb;
+  }
+}
+
+.field-autocompleted {
+  width: calc(100% - 1.26rem);
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  margin-top: -6px;
+  background-color: white;
+
+  li {
+    list-style: none;
+    height: 2.3rem;
+    line-height: 2.3rem;
+    padding-left: 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover, &:focus {
+      background-color: #e6e6e6;
+      cursor: pointer;
+    }
+  }
+  
+  border-color: rgb(204, 204, 204);
+  border-radius: 2px;
+  border-style: solid;
+  border-width: 1px;
+
+  & .selected {
+    background-color: #e6e6e6;
+  }
+}
+
+
+
+.button {
+  -webkit-appearance: none;
+  -webkit-backface-visibility: none;
+  background-color: rgb(39, 39, 39);
+  border-color: rgb(39, 39, 39);
+  border-style: outset;
+  border-width: 0px;
+  border-radius: 3px;
+  color: rgb(255, 255, 255);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  height: 42px;
+  letter-spacing: 1px;
+  line-height: 14px;
+  margin-left: -10px;
+  padding: 0 1rem;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: uppercase;
+  transition-delay: 0s;
+  transition-duration: 0.1s;
+  transition-property: opacity;
+  transition-timing-function: linear;
+  vertical-align: baseline;
+  white-space: pre;
+  writing-mode: horizontal-tb;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/scss/typography.scss b/src/scss/typography.scss
index 594924f..39cb15c 100644
--- a/src/scss/typography.scss
+++ b/src/scss/typography.scss
@@ -37,10 +37,11 @@ h1 {
   font-family: 'Ambroise std demi', sans-serif;
   font-weight: 400;
   line-height: 1.2em;
-  font-size: 36px;
+  font-size: 34px;
   text-transform: lowercase;
   text-decoration: none;
   text-align: left;
   letter-spacing: .01em;
   color: #cb0b0b;
+  margin-bottom: 2rem;
 }
\ No newline at end of file