interface on requested wines with sub-par css

src/components/AllRequestedWines.vue

@@ -1,21 +1,25 @@
 <template>
   <main>
     <h1>
-      Alle viner
+      Alle viner foreslåtte viner
     </h1>
-    <section>
+    <section class="requested-wines-container">
-      {{this.wines}}
+      <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" />
     </section>
   </main>
 </template>
 
 <script>
 import { allRequestedWines } from "@/api";
-
+import RequestedWineCard from "@/ui/RequestedWineCard";
 export default {
+  components: {
+    RequestedWineCard
+  },
   data(){
     return{
-      wines: undefined
+      wines: undefined,
+      canRequest: true
     }
   },
   async mounted() {
@@ -25,6 +29,12 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 
+.requested-wines-container{
+  display: flex;
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch
+}
 </style>

src/ui/Modal.vue

@@ -97,4 +97,5 @@ export default {
   position: relative;
   padding: 20px 10px;
 }
+
 </style>

src/ui/RequestedWineCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="requested-wine">
+    <img
+      v-if="wine.image"
+      :src="wine.image"
+      class="wine-image"
+      :class="{ 'fullscreen': fullscreen }"
+    />
+    <img v-else class="wine-placeholder" alt="Wine image" />
+    <section class="wine-info">
+      <h3 v-if="wine.name">{{ wine.name }}</h3>
+      <h3 v-else>(no name)</h3>
+      <p>Antall ganger denne har blitt foreslått: {{requestedElement.count}}</p>
+      <section class="buttons">
+          <button class="vin-button" @click="request(wine)" v-if="!locallyRequested">Foreslå denne</button>
+          <a
+          v-if="wine.vivinoLink"
+          :href="wine.vivinoLink"
+          class="wine-link"
+        >Les mer på polet</a>
+        </section>
+      </section>
+    </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      wine: this.requestedElement.wine,
+      locallyRequested: false
+    }
+  },
+  props: {
+    requestedElement: {
+      required: true,
+      type: Object
+    }
+  },
+  methods: {
+    request(wine){
+      this.locallyRequested = true
+      // wine.requested = true
+      this.requestedElement.count = this.requestedElement.count +1
+      const options = {
+        body: JSON.stringify({
+          wine: wine
+        }),
+         headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        method: "post"
+      }
+      fetch("http://localhost:30030/api/request", options)
+        .then(res => res.json())
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped> 
+
+.requested-wine{
+  padding: 20px;
+  border-radius: 1px;
+  margin: 1rem 0;
+  -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
+  -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
+  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.65);
+}
+</style>