Popover when image pressed.

src/components/Calendar.vue

@@ -10,7 +10,10 @@
 
 export default {
   props: {
-    longList: Boolean,
+    short: {
+      default: true,
+      type: Boolean
+    }
   },
   data() {
     return {

src/components/EditEvent.vue

@@ -132,7 +132,6 @@ export default {
 <style lang="scss" scoped>
   .parent {
     display: block;
-
     margin: 4rem 1rem;
   }
 
@@ -151,6 +150,7 @@ export default {
     line-height: 22.399999618530273px;
     padding-right: 0px;
     width: 100%;
+    max-width: 612px;
   }
 
   .cont2 {
@@ -246,7 +246,8 @@ export default {
       width: 290.9375px;
 
       @media screen and (max-width: 650px) {
-        width: 40vw;
+        max-width: 40vw;
+        min-width: 120px;
       }
 
       &:last-of-type {

src/components/EventPage.vue

@@ -1,15 +1,17 @@
 <template>
-  <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>
+    <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>
+
+      <!-- <map-view :cords="cords"></map-view> -->
+      <!-- <calendar></calendar> -->
+
+      <gallery :short="false"></gallery>
     </div>
-
-    <!-- <map-view :cords="cords"></map-view> -->
-    <!-- <calendar></calendar> -->
-
-    <gallery></gallery>
   </div>
 </template>
 
@@ -48,8 +50,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.popover {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  background-color: rgba(0,0,0,0.7);
+}
+
 .gallery {
-  margin: 2.1rem;
+  padding: 2.1rem;
 
   &--header {
     padding-bottom: 4rem;

src/components/Gallery.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="gallery-container">
+
     <div v-for="item in gallery">
       <gallery-image v-if="item.type === 'image'" :image="item"></gallery-image> 
       <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> 
@@ -14,6 +15,12 @@ import GalleryText from '@/components/GalleryText'
 export default {
   name: 'Gallery-Item',
   components: { GalleryImage, GalleryText },
+  props: {
+    short: {
+      default: false,
+      type: Boolean
+    }
+  },
   data() {
     return {
       gallery: [
@@ -32,11 +39,11 @@ export default {
           name: 'Nice jacket',
           url: 'https://static1.squarespace.com/static/585040955016e131e74667b0/5a4eeae7ec212d38915e64cd/5a4eeae8ec212d38915e64d2/1515121386336/The-Marias-Art-3.jpg?format=500w'
         },
-        {
-          type: 'text',
-          title: 'title',
-          subtext: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-        },
+        // {
+        //   type: 'text',
+        //   title: 'title',
+        //   subtext: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+        // },
         {
           type: 'image',
           name: 'plants 4 life',
@@ -61,7 +68,7 @@ export default {
     display: flex;
     width: 100%;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-evenly;
     flex-wrap: wrap;
 
   }

src/components/GalleryImage.vue

@@ -19,13 +19,14 @@ export default {
   },
   data() {
     return {
-
     }
   },
   created() {},
   beforeMount() {},
   methods: {
-
+    popOver(image) {
+      eventHub.$emit('openPopover', image);
+    }
   }
 }
 </script>
@@ -34,6 +35,7 @@ export default {
   img {
     height: 300px;
     cursor: pointer;
+    margin: 0 0.5rem;
 
     @media screen and (max-width: 600px) {
       background-color: red;

src/components/Home.vue

@@ -1,10 +1,15 @@
 <template>
-  <div class="site-header">
+  <div>
+    <!-- <div class="site-header"></div> -->
 <!--     <h1>{{ title }}</h1>
     <h2>Han har ikke hatt nok etter 60 år!</h2>
     {{ date }} -->
     <!-- <Header></Header> -->
-    <router-link to="edit">Edit Page</router-link>
+    
+
+    <!-- <router-link to="edit">Edit Page</router-link> -->
+
+    <Popover class="popup" v-if="popoverShow" :image="popoverImage"></Popover>
 
     <event-page></event-page>
   </div>
@@ -13,20 +18,32 @@
 <script>
   import Header from '@/components/Header'
   import EventPage from '@/components/EventPage'
+  import Popover from '@/components/Popover'
 
   export default {
-    components: { Header, EventPage },
+    components: { Header, EventPage, Popover },
     data() {
       return {
         title: 'Leifs opplevelser',
         date: undefined,
-        bool: false
+        bool: false,
+        popoverImage: undefined,
+        popoverShow: false
       }
     },
     created() {
       this.date = new Date();
+      eventHub.$on('openPopover', this.openPopover)
+      eventHub.$on('closePopover', this.closePopover)
     },
     methods: {
+      openPopover(image) {
+        this.popoverImage = image;
+        this.popoverShow = true;
+      },
+      closePopover(image) {
+        this.popoverShow = false;
+      },
       navigate: function() {
         console.log(this.$router)
         this.$router.push('/edit');

src/components/Popover.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="popover" @click="close">
+    <div class="image-container">
+      <img @click="close" :src="image.url" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {
+
+  },
+  props: {
+    image: {
+      type: Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {},
+  beforeMount() {},
+  methods: {
+    close() {
+      eventHub.$emit('closePopover')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .popover {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: rgba(0,0,0,0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+   
+    img {
+      max-height: 80%;
+    }
+
+    .hover-options {
+      position: relative;
+      background-color: rgba(0,0,0,0.4);
+      font-family: 'Proxima Nova Bold';
+      font-weight: 600;
+      width: calc(100% - 2rem);
+      padding: 0.6rem 1rem;
+      margin-top: -38px;
+      z-index: 3;
+
+      span {
+        cursor: pointer;
+        padding: 0.1rem 0.2rem;
+      }
+
+      span:not(:first-child) {
+        margin-left: 2rem;
+      }
+    }
+  }
+</style>