interface on requested wines with sub-par css

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>