Button for navigating to request a new wine.

frontend/components/AllRequestedWines.vue

@@ -1,9 +1,17 @@
 <template>
   <main class="container">
-    <h1>Alle foreslåtte viner</h1>
+    <div class="header">
+      <h1>Alle foreslåtte viner</h1>
+      <router-link class="vin-button" to="/anbefal">
+        Anbefal ny vin
+        <i class="icon icon--arrow-right"></i>
+      </router-link>
+    </div>
 
     <section class="wines-container">
-      <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
+      <p v-if="wines == undefined || wines.length == 0">
+        Ingen har foreslått noe enda!
+      </p>
 
       <RequestedWineCard
         v-for="requestedWine in wines"
@@ -20,12 +28,12 @@
 import RequestedWineCard from "@/ui/RequestedWineCard";
 export default {
   components: {
-    RequestedWineCard
+    RequestedWineCard,
   },
   data() {
     return {
       wines: undefined,
-      isAdmin: false
+      isAdmin: false,
     };
   },
   mounted() {
@@ -33,18 +41,18 @@ export default {
   },
   methods: {
     filterOutDeletedWine(wine) {
-      this.wines = this.wines.filter(item => item.wine._id !== wine._id);
+      this.wines = this.wines.filter((item) => item.wine._id !== wine._id);
     },
     fetchRequestedWines() {
       return fetch("/api/requests")
-        .then(resp => {
+        .then((resp) => {
           this.isAdmin = resp.headers.get("vinlottis-admin") == "true";
           return resp;
         })
-        .then(resp => resp.json())
-        .then(response => (this.wines = response.wines));
-    }
-  }
+        .then((resp) => resp.json())
+        .then((response) => (this.wines = response.wines));
+    },
+  },
 };
 </script>
 
@@ -65,4 +73,30 @@ h1 {
   color: $matte-text-color;
   font-weight: normal;
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+
+  @include mobile {
+    flex-direction: column;
+
+    a {
+      align-self: flex-end;
+      margin-bottom: 4rem;
+    }
+  }
+}
+
+a.vin-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(4rem - 20px);
+}
+
+a .icon {
+  margin-left: 1rem;
+  vertical-align: middle;
+}
 </style>