From 6e0c4ff5b58440ee666c04e6097ff32180e099b9 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Tue, 12 Feb 2019 22:33:19 +0100
Subject: [PATCH] Popover when image pressed.

---
 src/components/Calendar.vue     |  5 ++-
 src/components/EditEvent.vue    |  5 ++-
 src/components/EventPage.vue    | 31 +++++++++------
 src/components/Gallery.vue      | 19 ++++++---
 src/components/GalleryImage.vue |  6 ++-
 src/components/Home.vue         | 25 ++++++++++--
 src/components/Popover.vue      | 69 +++++++++++++++++++++++++++++++++
 src/main.js                     |  3 +-
 src/routes.js                   |  2 +-
 src/scss/typography.scss        |  2 +-
 10 files changed, 138 insertions(+), 29 deletions(-)
 create mode 100644 src/components/Popover.vue

diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index b6c7c6d..fafc78d 100644
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -10,7 +10,10 @@
 
 export default {
   props: {
-    longList: Boolean,
+    short: {
+      default: true,
+      type: Boolean
+    }
   },
   data() {
     return {
diff --git a/src/components/EditEvent.vue b/src/components/EditEvent.vue
index e80a6a8..f0bf0f3 100644
--- a/src/components/EditEvent.vue
+++ b/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 {
diff --git a/src/components/EventPage.vue b/src/components/EventPage.vue
index f850a8e..321f34f 100644
--- a/src/components/EventPage.vue
+++ b/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;
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index c85dd27..3bbf3aa 100644
--- a/src/components/Gallery.vue
+++ b/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;
 
   }
diff --git a/src/components/GalleryImage.vue b/src/components/GalleryImage.vue
index 9a706f9..5b23953 100644
--- a/src/components/GalleryImage.vue
+++ b/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;
diff --git a/src/components/Home.vue b/src/components/Home.vue
index cbd5511..6818d5e 100644
--- a/src/components/Home.vue
+++ b/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');
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
new file mode 100644
index 0000000..9098675
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 7b57edd..d76094c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,9 +6,10 @@ import router from './routes'
 import axios from 'axios'
 import BootstrapVue from 'bootstrap-vue'
 
-
 Vue.config.productionTip = false
 
+window.eventHub = new Vue();
+
 new Vue({
   el: '#app',
   axios,
diff --git a/src/routes.js b/src/routes.js
index fcfe70b..bdb8219 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -24,7 +24,7 @@ let routes = [
     name: 'Calendar',
     path: '/calendar',
     props: { 
-      default: { longList: true },
+      default: { short: false },
     },
     components: require('@/components/Calendar')
   },
diff --git a/src/scss/typography.scss b/src/scss/typography.scss
index 85115c6..c1544e5 100644
--- a/src/scss/typography.scss
+++ b/src/scss/typography.scss
@@ -11,7 +11,7 @@
 }
 
 @font-face {
-  font-family: "Proxima-cocker";
+  font-family: "Proxima Nova Bold";
   src: url("assets/fonts/nova.ttf");
 }