Merge branch 'master' of github.com:KevinMidboe/vinlottis

src/components/GeneratePage.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="container">
-    <router-link to="/" class="header-link">
+    <banner />
-      <h1 class="top-banner">knowit</h1>
+
-    </router-link>
+    <h1 class="title">Loddgenerator</h1>
-    <h1>Loddgenerator</h1>
     <p>Velg hvilke farger du vil ha, fyll inn antall lodd og klikk 'generer'</p>
     <div class="input-line">
       <label for="redCheckbox">
@@ -64,10 +63,15 @@
 </template>
 
 <script>
+import Banner from "@/ui/Banner";
+
 export default {
+  components: {
+    Banner
+  },
   data() {
     return {
-      numberOfBallots: 0,
+      numberOfBallots: 4,
       colors: [],
       blue: 0,
       red: 0,
@@ -170,13 +174,15 @@ body {
 }
 h1 {
   text-align: center;
-}
-h1 {
   width: 100vw;
   text-align: center;
   font-family: Knowit;
 }
 
+.title {
+  margin-top: 4rem;
+}
+
 p {
   text-align: center;
   margin-bottom: 15px;
@@ -221,6 +227,8 @@ button {
 input {
   font-size: 1.5rem;
   padding: 8px;
+  margin: 0;
+  max-height: 3rem;
 }
 
 input[type="checkbox"] {
@@ -276,9 +284,9 @@ button {
   color: #333333;
   padding: 10px 30px;
   width: fit-content;
-  margin: auto;
+  margin: 0;
   font-size: 1.3rem;
-  height: 48px;
+  height: calc(3rem + 1.8px);
 }
 
 .colors-text {
@@ -311,16 +319,13 @@ button {
 }
 
 @media only screen and (max-width: 768px) {
-  input {
-    border: 1px solid #333333;
-  }
   input,
   button {
-    font-size: 1rem;
+    font-size: 1.3rem;
   }
 
-  button {
+  input {
-    height: calc(2rem + 6px);
+    width: 45vw;
   }
 
   p {

src/components/VinlottisPage.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="outer">
-    <h1 class="top-banner">
+    <banner />
-      <img src="/public/assets/images/knowit.svg" />
-    </h1>
     <div class="container">
       <h1>Vinlotteri</h1>
       <router-link to="generate" class="generate-link">
@@ -28,6 +26,7 @@ import PurchaseGraph from "@/ui/PurchaseGraph";
 import TotalBought from "@/ui/TotalBought";
 import Highscore from "@/ui/Highscore";
 import WinGraph from "@/ui/WinGraph";
+import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
 
 export default {
@@ -36,6 +35,7 @@ export default {
     TotalBought,
     Highscore,
     WinGraph,
+    Banner,
     Wines
   }
 };
@@ -74,12 +74,6 @@ h1 {
   font-weight: 300;
 }
 
-.top-banner {
-  margin-top: 0px;
-  padding: 20px 0;
-  background-color: #dbeede;
-  box-shadow: 0 0 10px 0px #0000003a;
-}
 
 .generate-link {
   color: #333333;

src/ui/Banner.vue

@@ -0,0 +1,18 @@
+<template>
+  <router-link to="/">
+    <div class="top-banner">
+      <img src="/public/assets/images/knowit.svg" />
+    </div>
+  </router-link>
+</template>
+
+<style>
+.top-banner {
+  text-align: center;
+  width: 100vw;
+  margin-top: 0px;
+  padding: 20px 0;
+  background-color: #dbeede;
+  box-shadow: 0 0 10px 0px #0000003a;
+}
+</style>

src/ui/Wines.vue

@@ -4,7 +4,7 @@
     <ol>
       <li v-for="wine in wines">
           <span v-if="wine.vivinoLink == '' || wine.vivinoLink == null">{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</span>
-          <a :href="wine.vivinoLink" v-if="wine.vivinoLink != '' && wine.vivinoLink != null">{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</li>
+          <a :href="wine.vivinoLink" v-if="wine.vivinoLink != '' && wine.vivinoLink != null">{{ wine.name }} - sett {{ wine.occurences }} ganger, {{ wine.rating }} i rating</a></li>
     </ol>
   </div>
 </template>