From ad6478edf8622bcb8121b9b488dfafe9315535dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Fri, 14 Feb 2020 15:00:54 +0100
Subject: [PATCH] Large image when on mobile.

---
 src/ui/Wine.vue  | 14 ++++++++++++--
 src/ui/Wines.vue |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/ui/Wine.vue b/src/ui/Wine.vue
index c3906c6..47d6a5a 100644
--- a/src/ui/Wine.vue
+++ b/src/ui/Wine.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="inner-wine-container">
     <div class="left">
-      <img :src="wine.image" class="wine-image" />
+      <img :src="wine.image" class="wine-image" :class="{ 'fullscreen': fullscreen }"/>
     </div>
     <div class="right">
       <h2>{{ wine.name }}</h2>
       <span v-if="wine.rating">{{ wine.rating }} rating</span>
 
       <a :href="wine.vivinoLink" class="wine-link">Les mer</a>
-      <span class="name-wins">
+      <span class="name-wins" v-if="wine.winners">
         Vunnet av:
         {{wine.winners.join(", ")}}
       </span>
@@ -28,6 +28,10 @@ export default {
     wine: {
       type: Object,
       required: true
+    },
+    fullscreen: {
+      type: Boolean,
+      required: false
     }
   }
 };
@@ -37,6 +41,12 @@ export default {
 @import "./src/styles/media-queries";
 .wine-image {
   height: 250px;
+
+  &.fullscreen {
+    @include desktop {
+      height: unset;
+    }
+  }
 }
 
 .name-wins,
diff --git a/src/ui/Wines.vue b/src/ui/Wines.vue
index a4d1af7..4bc8552 100644
--- a/src/ui/Wines.vue
+++ b/src/ui/Wines.vue
@@ -23,7 +23,7 @@
     <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" />
+        <Wine :wine="clickedWine" :fullscreen="true"/>
       </div>
     </div>
   </div>