From 52f4df3e2cdbb5de03b526d0679a2d28c879a8d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?=
 <kasper.rynning-tonnesen@knowit.no>
Date: Wed, 12 Feb 2020 14:49:58 +0100
Subject: [PATCH] Pretty

---
 src/ui/Wines.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index 5f152f9..ee8a792 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -20,9 +20,11 @@
         >Les mer</a>
       </li>
     </ol>
-    <div class="wine-window" v-if="wineOpen">
-      <div class="close-modal" @click="closeWine">X</div>
-      <Wine :wine="clickedWine" />
+    <div class="wine-window-outer" v-if="wineOpen" @click="closeWine">
+      <div class="wine-window">
+        <div class="close-modal" @click="closeWine">X</div>
+        <Wine :wine="clickedWine" />
+      </div>
     </div>
   </div>
 </template>
@@ -74,9 +76,11 @@ export default {
         eventValue: `${wine.name} - ${wine.vivinoLink}`
       });
     },
-    closeWine: function() {
-      this.clickedWine = null;
-      this.wineOpen = false;
+    closeWine: function(event) {
+      if (event.toElement.className.includes("wine-window-outer")) {
+        this.clickedWine = null;
+        this.wineOpen = false;
+      }
     },
 
     predicate: function() {
@@ -145,6 +149,14 @@ export default {
 
 <style lang="scss" scoped>
 @import "../styles/media-queries.scss";
+.wine-window-outer {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: #000000aa;
+  top: 0;
+  left: 0;
+}
 .wine-window {
   top: 0;
   left: 0;