Split up form and fine tuned navigation within the form

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">
+      <h1 class="slipping-left">registrer en ny opplevelse</h1>
-        <div class="form-item required">
+      
-          <label class="title" for="email2-field">tittel <span class="required">*</span></label>
+      <event-form></event-form>
-          <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>
     </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"
-     <!--    <div style="
+          :x="item.x"
-          width: 100%;
+          :y="item.y"
-          height: 5rem;
+          :w="item.w"
-          border: 1px solid red;
+          :h="item.h"
-          margin-bottom: 1rem;
+          :i="item.i"
-          margin-left: -0.5rem;
+          :key="item.i">
-          padding-right: 0.5rem;
+        
-        ">
+          <div v-bind:style="{ 'background-image': 'url(' + item.img + ')' }">
-
+            <span>{{item.i}}</span>
-        </div> -->
+          </div>
-
+        </grid-item>
-         <div class="image-grid">
+      </grid-layout>
-          <grid-layout
+    </div>
-            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>
 
     
     <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>

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>

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>
+        <div class="gallery--info">
-        <p class="gallery--info">{{ eventLocation }}. <a href="#">Se kart</a></p>
+          <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-size: 15px;
-    font-weight: 300;
-    font-style: italic;
-    font-size: 18px;
     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 {

src/components/Gallery.vue

@@ -107,6 +107,6 @@ export default {
     flex-direction: row;
     justify-content: space-evenly;
     flex-wrap: wrap;
-
+    padding: 1rem 0;
   }
 </style>

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>

src/components/Popover.vue

@@ -85,8 +85,8 @@ export default {
     }
    
     img {
-      max-height: 90vh;
+      max-height: 92vh;
-      max-width: 90vw;
+      max-width: 92vw;
 
       @media screen and (max-width: 600px) {
         max-width: 95vw;

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>

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;
 }