More winners, wines and link to see all wines

src/ui/Highscore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="highscores" v-if="highscore.length > 0">
-    <h3>Topp 5 vinnere</h3>
+    <h3>Topp 10 vinnere</h3>
     <ol>
       <li v-for="person in highscore">
         {{ person.name }} - {{ person.wins.length }}
@@ -23,7 +23,7 @@ export default {
     response = response.filter(
       person => person.name != null && person.name != ""
     );
-    this.highscore = response.slice(0, 5);
+    this.highscore = response.slice(0, 10);
   }
 };
 </script>

src/ui/Wines.vue

@@ -1,7 +1,9 @@
 <template>
   <div v-if="wines.length > 0">
     <h3>
-      <router-link to="viner">Topp 5 viner</router-link>
+      <router-link to="viner"
+        >Topp 10 viner <span class="link">Se alle &gt;</span></router-link
+      >
     </h3>
     <ol>
       <li v-for="wine in wines">
@@ -17,13 +19,14 @@
           class="wine-link"
           :href="wine.vivinoLink"
           @click="wineClick(wine, $event)"
-        >Les mer</a>
+          >Les mer</a
+        >
       </li>
     </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"/>
+        <Wine :wine="clickedWine" :fullscreen="true" />
       </div>
     </div>
   </div>
@@ -59,7 +62,7 @@ export default {
           }
         )
       );
-    this.wines = response.slice(0, 5);
+    this.wines = response.slice(0, 10);
   },
   methods: {
     wineClick: function(wine, event) {
@@ -179,6 +182,13 @@ export default {
   }
 }
 
+.link {
+  font-weight: bold;
+  border-bottom: 1px solid #ff5fff;
+  font-size: 1rem;
+  margin-left: 15px;
+}
+
 .close-modal {
   position: absolute;
   top: 10px;