From 46108d9c3f3c5397cc83d01584c584c19907ed0c Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Wed, 13 Feb 2019 19:16:02 +0100
Subject: [PATCH] Better scroll that also works with mobile?

---
 src/components/Home.vue    |  2 +-
 src/components/Popover.vue | 33 ++++++++++++++++++++++++---------
 src/scss/main.scss         |  1 +
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 9c07bbf..9b4a631 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -11,7 +11,7 @@
     <Popover class="popup" v-if="popoverShow" :image="popoverImage"></Popover>
     <router-link to="edit">Edit Page</router-link>
 
-    <event-page></event-page>
+    <event-page style="height: 100%; overflow: auto;"></event-page>
   </div>
 </template>
 
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index 7e9f30f..7d61d6b 100644
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -1,9 +1,11 @@
 <template>
-  <div>
-    <div class="popover" @click="close" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
+  <div class="popover" @click="close" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
+    <div class="popover-content">
       <div class="image-container">
         <img :src="image.url" />
       </div>
+
+      <div class="other-elements"></div>
     </div>
     <div style="position: fixed; width: 100%; bottom: 2rem">
       <div style="display: block; width: max-content; margin: 0 auto;">
@@ -55,15 +57,23 @@ export default {
 
 <style lang="scss" scoped>
   .popover {
-    height: 100%;
-    width: 100%;
     position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
     background-color: rgba(0,0,0,0.7);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    flex-direction: column;
+
+    &-content {
+      height: 100%;
+      // margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      // flex-direction: column;
+      overflow: auto;
+    }
    
     img {
       max-height: 90vh;
@@ -74,6 +84,11 @@ export default {
       }
     }
 
+    .other-elements {
+      // height: 2000px;
+      background-color: NavajoWhite;
+    }
+
     .hover-options {
       position: relative;
       background-color: rgba(0,0,0,0.4);
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 6557bf9..9abb55a 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -3,6 +3,7 @@
 // @import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 html, body {
+  height: 100%;
   margin: 0px;
   padding: 0px;
   line-height: 1;