Wine styling more predictable.

Wine now only uses inline slot when on desktop.
Wine link also parses the url for the name of the site, e.g. vivino.com
-> Les mer på vivino.
Moved around some DOM elements so scaling between screen sizes is more
predictable.

src/components/AllWinesPage.vue

@@ -5,11 +5,6 @@
       <div class="wines-container">
         <Wine :wine="wine" v-for="wine in wines" :key="wine" :fullscreen="true" :inlineSlot="true">
           <div class="winners-container">
-            <div class="name-wins" v-if="wine.winners">
-              <span class="label">Vunnet av:</span>
-              <span class="names" v-for="winner in wine.winners">- {{ winner }}</span>
-              </span>
-            </div>
             <div class="color-wins" :class="{ 'big': fullscreen }"
               v-if="wine.blue || wine.red || wine.green || wine.yellow">
               <span class="label">Vinnende lodd:</span>
@@ -18,6 +13,11 @@
               <span class="color-win green">{{wine.green == undefined ? 0 : wine.green}}</span>
               <span class="color-win yellow">{{wine.yellow == undefined ? 0 : wine.yellow}}</span>
             </div>
+            <div class="name-wins" v-if="wine.winners">
+              <span class="label">Vunnet av:</span>
+              <span class="names" v-for="winner in wine.winners">- {{ winner }}</span>
+              </span>
+            </div>
           </div>
         </Wine>
       </div>
@@ -62,26 +62,32 @@ h1 {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
+  align-items: center;
+  width: 100%;
+  margin: 0 auto;
+
+  @include desktop {
     margin: 0 2rem;
 
-  @media(min-width: 1500px) {
+    > div {
-    max-width: 1500px;
+      max-width: max-content;
-    margin: 0 auto;
     }
-
-  @include mobile {
-    flex-direction: column;
   }
 }
 
 .winners-container {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  margin-top: 2rem;
 
   @include mobile {
     flex-direction: row;
-    width: 100%;
+    width: max-content;
-    justify-content: space-between;
+    margin: 0.75rem;
+
+    &:not(&:first-child) {
+      margin-top: 0.5rem;
+    }
   }
 }
 
@@ -94,7 +100,7 @@ h1 {
 .name-wins {
   display: flex;
   flex-direction: column;
-
+  width: max-content;
 
   .names {
     margin-left: 0.5rem;
@@ -114,7 +120,7 @@ h1 {
     margin-left: -2px; // offset span.color-win margin
   }
   @include desktop {
-    margin-top: 1rem;
+    width: 30%;
   }
 }
 

src/components/RegisterPage.vue

@@ -393,6 +393,8 @@ hr {
 }
 .edit-container {
   margin-top: 2rem;
+  display: flex;
+  justify-content: center;
 }
 .edit {
   width: 100%;
@@ -405,10 +407,13 @@ hr {
   margin-bottom: 2rem;
 }
 .winner-element {
-  padding-top: 1.2rem;
   display: flex;
   flex-direction: row;
 
+  @include desktop {
+    margin-top: 1.5rem;
+  }
+
   @include mobile {
     width: 100%;
   }

src/ui/Wine.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="container" >
   <div class="wine-container" :class="{ 'big': fullscreen }">
     <div class="left">
       <img v-if="wine.image" :src="wine.image" class="wine-image" :class="{ 'fullscreen': fullscreen }" />
       <img v-else class="wine-placeholder" alt="Wine image" />
     </div>
     <div class="right">
+      <div>
         <h2 v-if="wine.name">{{ wine.name }}</h2><h2 v-else>(no name)</h2>
         <span v-if="wine.rating">{{ wine.rating }} rating</span>
         <span v-if="wine.price">{{ wine.price }} NOK</span>
         <span v-if="wine.country">{{ wine.country }}</span>
 
-        <a v-if="wine.vivinoLink" :href="wine.vivinoLink" class="wine-link">Les mer</a>
+        <a v-if="wine.vivinoLink" :href="wine.vivinoLink" class="wine-link">Les mer på {{ hostname(wine.vivinoLink) }}</a>
       </div>
 
-      <slot v-if="inlineSlot"></slot>
+      <slot v-if="shouldUseInlineSlot()"></slot>
     </div>
-    <slot v-if="!inlineSlot"></slot>
 
+    <slot v-if="!shouldUseInlineSlot()"></slot>
   </div>
 </template>
 
@@ -37,6 +37,15 @@ export default {
       required: false,
       default: false
     }
+  },
+  methods: {
+    shouldUseInlineSlot() {
+      return this.inlineSlot && window.innerWidth > 768
+    },
+    hostname(url) {
+      const urlHostname = new URL(url).hostname
+      return urlHostname.split(".")[(urlHostname.match(/\./g) || []).length - 1]
+    }
   }
 };
 </script>
@@ -76,13 +85,11 @@ h2 {
   }
 }
 
-.container {
+.wine-container {
   margin-bottom: 30px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   font-family: Arial;
   width: 100%;
+  max-width: max-content;
 
   &.big {
     align-items: center;
@@ -93,17 +100,6 @@ h2 {
   }
 }
 
-.wine-container {
-  width: 100%;
-  // display: flex;
-  // flex-direction: row;
-  // flex-wrap: wrap;
-
-  >* {
-    // flex: 1 1 auto;
-  }
-}
-
 .left {
   float: left;
   margin-right: 3rem;
@@ -114,10 +110,15 @@ h2 {
 }
 
 .right {
+  margin-bottom: 2rem;
   display: flex;
   flex-direction: column;
   height: max-content;
-  margin-bottom: 2rem;
+
+  > div:first-of-type {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 a,

src/ui/Wines.vue

@@ -25,8 +25,8 @@
     </ol>
     <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" :fullscreen="true" />
+        <div class="close-modal" @click="closeWine">X</div>
       </div>
     </div>
   </div>
@@ -178,7 +178,11 @@ export default {
   justify-content: center;
   align-items: center;
   @include desktop {
-    width: 60vw;
+    width: 80vw;
+  }
+
+  > *:first-child {
+    display: flex;
   }
 }
 
@@ -212,12 +216,6 @@ h3 {
     }
   }
 }
-div {
-  margin: 0;
-  font-family: arial;
-  display: inline-flex;
-  flex-direction: column;
-}
 
 ol {
   padding-left: 1.375rem !important;