Some fonts have moved, popover has navigation and other minor changes

src/components/EditEvent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="parent">
-    <h1>opprett nytt arrangement</h1>
+    <h1 class="slipping-left">registrer en ny opplevelse</h1>
 
 <div class="container">
   <div class="cont2" data-block-type="9">
@@ -132,7 +132,13 @@ export default {
 <style lang="scss" scoped>
   .parent {
     display: block;
-    margin: 4rem 1rem;
+    width: max-content;
+    margin: 4rem auto;
+
+    @media screen and (max-width: 650px) {
+      margin: 4rem 1rem;
+      width: unset;
+    }
   }
 
 
@@ -270,6 +276,7 @@ export default {
 
     .field-autocompleted {
       // width: 591.8px;
+      width: calc(100% - 1.26rem);
       // height: 200px;
       position: absolute;
       padding: 0;
@@ -282,6 +289,8 @@ export default {
         height: 2.3rem;
         line-height: 2.3rem;
         padding-left: 0.5rem;
+        white-space: nowrap;
+        overflow: hidden;
 
         &:hover {
           background-color: #e6e6e6;

src/components/EventPage.vue

@@ -38,13 +38,6 @@ export default {
         until: this.endDate || '12.10.19'
       }
     }
-  },
-  created() {},
-  beforeMount() {
-    console.log('routes', this.$router, this.id)
-  },
-  methods: {
-
   }
 }
 </script>
@@ -66,9 +59,9 @@ export default {
   }
 
   &--info {
-    font-family: 'proxima-nova-thin';
+    font-family: 'Proxima Nova';
     font-weight: 300;
-    font-style: normal;
+    font-style: italic;
     font-size: 18px;
     line-height: 1.6rem;
     letter-spacing: 0rem;
@@ -77,6 +70,15 @@ export default {
     &:first-of-type {
       margin-top: 0.8rem;
     }
+
+    a {
+      font-family: 'Ambroise std demi';
+      font-style: normal;
+
+      &:visited {
+        color: #3b70a2;
+      }
+    }
   }
 }
 </style>

src/components/Gallery.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="gallery-container">
 
-    <div v-for="item in gallery">
+    <div v-for="(item, key) in gallery">
-      <gallery-image v-if="item.type === 'image'" :image="item"></gallery-image> 
+      <gallery-image v-if="item.type === 'image'" :image="item" @click="imageSelected"></gallery-image> 
       <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> 
     </div>
   </div>
@@ -23,6 +23,7 @@ export default {
   },
   data() {
     return {
+      selected: undefined,
       gallery: [
         {
           type: 'image',
@@ -48,16 +49,52 @@ export default {
           type: 'image',
           name: 'plants 4 life',
           url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeaee0852296d709ba5a6/1515121396456/The-Marias-Art-10.PNG?format=500w'
+        },
+        {
+          type: 'image',
+          name: 'Two brothers meant for each other',
+          url: 'http://localhost:3000/uploads/avatars/responsive/eea452299eba7225036aa836f35d86d0_lg.png'
+        },
+        {
+          type: 'image',
+          name: 'Two brothers meant for each other',
+          url: 'http://localhost:3000/uploads/avatars/responsive/eea452299eba7225036aa836f35d86d0_xs.png'
         }
       ]
     }
   },
-  created() {},
+  created() {
-  beforeMount() {},
+    eventHub.$on('iteratePopoverImage', this.iteratePopoverImage)
+  },
   methods: {
-    popOver(image) {
+    imageSelected(image) {
-      console.log('Emitting to popover Image', JSON.stringify(image));
+      this.selected = image;
-      this.$emit('popover', image);
+      console.log(this.selected.name)
+    },
+    selectedIndexInGallery() {
+      const gallery = this.gallery;
+      const selected = this.selected;
+
+      for(var i = 0; i < gallery.length; i += 1) {
+        if(gallery[i] === selected) {
+          return i;
+        }
+      }
+      return -1;
+    },
+    iteratePopoverImage(direction) {
+      let i = this.selectedIndexInGallery() + direction;
+
+      // Overflow handler
+      if (i >= this.gallery.length) {
+        i = 0;
+      } else if (i == -1) {
+        i = this.gallery.length - 1;
+      }
+
+      let image = this.gallery[i];
+      eventHub.$emit('openPopover', image);
+      this.selected = image;
     }
   }
 }

src/components/GalleryImage.vue

@@ -14,7 +14,7 @@ export default {
   props: {
     image: {
       type: Object,
-      required: false
+      required: true
     }
   },
   data() {
@@ -26,6 +26,7 @@ export default {
   methods: {
     popOver(image) {
       eventHub.$emit('openPopover', image);
+      this.$emit('click', image)
     }
   }
 }

src/components/Popover.vue

@@ -1,7 +1,15 @@
 <template>
-  <div class="popover" @click="close">
+  <div>
-    <div class="image-container">
+    <div class="popover" @click="close">
-      <img @click="close" :src="image.url" />
+      <div class="image-container">
+        <img :src="image.url" />
+      </div>
+    </div>
+    <div style="position: absolute; width: 100%; bottom: 2rem">
+      <div style="display: block; width: max-content; margin: 0 auto;">
+        <button @click="backwards">Backwards</button>
+        <button @click="forwards">Forwards</button>
+      </div>
     </div>
   </div>
 </template>
@@ -18,13 +26,13 @@ export default {
       required: true,
     }
   },
-  data() {
-    return {
-    }
-  },
-  created() {},
-  beforeMount() {},
   methods: {
+    forwards() {
+      eventHub.$emit('iteratePopoverImage', 1)
+    },
+    backwards() {
+      eventHub.$emit('iteratePopoverImage', -1)
+    },
     close() {
       eventHub.$emit('closePopover')
     }
@@ -41,12 +49,15 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-wrap: wrap;
+    flex-direction: column;
    
     img {
-      max-height: 80%;
+      max-height: 90vh;
+      max-width: 90vw;
 
       @media screen and (max-width: 600px) {
-        max-width: 90vw;
+        max-width: 95vw;
       }
     }
 

src/scss/typography.scss

@@ -2,27 +2,22 @@
 
 @font-face {
   font-family: "Proxima Nova";
-  src: url("assets/fonts/proxima-nova.ttf");
+  src: url("assets/fonts/Proxima-Nova.ttf");
-}
-
-@font-face {
-  font-family: "proxima-nova-thin";
-  src: url("assets/fonts/proxima-nova-thin.ttf");
 }
 
 @font-face {
   font-family: "Proxima Nova Bold";
-  src: url("assets/fonts/nova.ttf");
+  src: url("assets/fonts/Proxima-Nova-Bold.ttf");
 }
 
 
 @font-face {
   font-family: "Ambroise std demi";
-  src: url("assets/fonts/ambroise-std-demi.ttf");
+  src: url("assets/fonts/Ambroise-std-Demi.ttf");
 }
 
 html {
-  font-family: 'Arial', sans-serif;
+  font-family: 'Proxima Nova', sans-serif;
 }
 
 h1, h2, h3, h4, h5, p {
@@ -30,6 +25,12 @@ h1, h2, h3, h4, h5, p {
   font-style: normal;
   margin: 0;
   padding: 0;
+
+  &.slipping-left {
+    @media screen and (min-width: calc(650px + 6rem)) {
+      margin-left: -5rem;
+    }
+  }
 }
 
 h1 {