fix styling and use new Wine slots

src/components/AllRequestedWines.vue

@@ -57,9 +57,8 @@ h1 {
 }
 
 .requested-wines-container{
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  justify-content: space-evenly;
+  grid-gap: 2rem;
-  align-items: flex-start;
 }
 </style>

src/ui/Wine.vue

@@ -10,8 +10,8 @@
     </div>
 
     <div class="wine-details">
-      <h2 v-if="wine.name">{{ wine.name }}</h2>
+      <span v-if="wine.name" class="wine-name">{{ wine.name }}</span>
-      <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }} rating</span>
+      <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }}</span>
       <span v-if="wine.price"><b>Pris:</b> {{ wine.price }} NOK</span>
       <span v-if="wine.country"><b>Land:</b> {{ wine.country }}</span>
     </div>
@@ -66,8 +66,8 @@ export default {
 @import "./src/styles/variables";
 
 .wine {
-  padding: 2rem;
+  padding: 1rem;
-  margin: 1rem 0rem;
+  box-sizing: border-box;
   position: relative;
   -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
@@ -76,13 +76,13 @@ export default {
   @include tablet {
     width: 250px;
     height: 100%;
-    margin: 1rem 2rem;
   }
 }
 
 .wine-image {
   display: flex;
   justify-content: center;
+  margin-top: 10px;
 
   img {
     height: 250px;
@@ -97,6 +97,7 @@ export default {
   }
 }
 
+
 .wine-details {
   display: flex;
   flex-direction: column;
@@ -106,6 +107,11 @@ export default {
   }
 }
 
+.wine-name{
+  font-size: 20px;
+  margin: 1em 0;
+}
+
 .wine-details {
   display: flex;
   flex-direction: column;

src/ui/Wines.vue

@@ -9,20 +9,16 @@
       </router-link>
     </div>
     <div class="wine-container">
-      <div v-for="wine in wines" :key="wine" class="single-item">
+      <Wine v-for="wine in wines" :key="wine" :wine="wine">
-        <!-- <span class="wine-occurences">{{ index + 1}}.</span> -->
+        <template v-slot:top>
-        <div class="hearts-container">
+          <div class="flex justify-end">
-          <span>{{wine.occurences}}</span>
+            <div class="requested-count cursor-pointer">
-          <i class="icon icon--heart"></i>
+              <span> {{ wine.occurences }} </span>
+              <i class="icon icon--heart" />
             </div>
-        <img :src="wine.image" class="wine-image">
-        <!-- <span class="wine-win-info"> {{ wine.occurences }} {{amount(wine.occurences)}}</span> -->
-        <span class="wine-name">{{ wine.name }}</span>
-        <!-- <a
-          class="wine-link"
-          :href="wine.vivinoLink"
-          >Les mer</a> -->
           </div>
+        </template>
+      </Wine>
     </div>
   </div>
 </template>
@@ -63,9 +59,6 @@ export default {
     this.wines = response.slice(0, 5);
   },
   methods: {
-    amount(occurences){
-      return occurences > 1 ? "ganger" : "gang";
-    },
     predicate: function() {
       var fields = [],
         n_fields = arguments.length,
@@ -149,47 +142,26 @@ export default {
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 2rem;
 
-  .single-item{
+  .requested-count {
-    height: 400px;
-    display: grid;
-    grid-template-rows: .3fr 1fr .3fr;
-
-    grid-gap: 1em;
-    -webkit-box-shadow: 0px 2px 21px -1px rgba(127,127,127,0.5);
-    -moz-box-shadow: 0px 2px 21px -1px rgba(127,127,127,0.5);
-    box-shadow: 0px 2px 21px -1px rgba(127,127,127,0.5);
-
-    .hearts-container{
-      margin: 10px 10px 0 0;
     display: flex;
     align-items: center;
-      justify-content: space-evenly;
+    margin-top: -0.5rem;
-      justify-self: end;
+    background-color: rgb(244,244,244);
-
+    border-radius: 1.1rem;
-      width: 80px;
+    padding: 0.25rem 1rem;
-      height: 30px;
+    font-size: 1.25em;
-      background-color: #f4f4f4;
-      border-radius: 20px;
 
+    span {
+      padding-right: 0.5rem;
+      line-height: 1.25em;
+    }
     .icon--heart{
-        font-size: 30px;
+      font-size: 1.5rem;
       color: $link-color;
     }
   }
-
-    .wine-image {
-      width: 60px;
-      height: 200px;
-      align-self: center;
-      justify-self: center;
 }
 
-    .wine-name{
+
-      margin-left: 1em;
+
-      margin-right: .5em;
-      padding-bottom: 1em;
-      font-size: 20px;
-    }
-  }
-}
 </style>