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

src/components/GeneratePage.vue

@@ -337,6 +337,9 @@ button {
   height: calc(3rem + 18px);
   display: inline-flex;
   max-height: calc(3rem + 18px);
+
+  // disable-dbl-tap-zoom
+  touch-action: manipulation;
 }
 
 .colors-text {
@@ -380,40 +383,42 @@ button {
     }
   }
 
-  &:hover input {
-    &#greenCheckbox ~ .border .checkmark {
-      background-color: $green;
+  @include desktop {
+    &:hover input {
+      &#greenCheckbox ~ .border .checkmark {
+        background-color: $green;
+      }
+
+      &#redCheckbox ~ .border .checkmark {
+        background-color: $red;
+      }
+
+      &#yellowCheckbox ~ .border .checkmark {
+        background-color: $yellow;
+      }
+
+      &#blueCheckbox ~ .border .checkmark {
+        background-color: $blue;
+      }
     }
 
-    &#redCheckbox ~ .border .checkmark {
-      background-color: $red;
-    }
+    &:focus input,
+    &:active input {
+      &#greenCheckbox ~ .border .checkmark {
+        background-color: $dark-green;
+      }
 
-    &#yellowCheckbox ~ .border .checkmark {
-      background-color: $yellow;
-    }
+      &#redCheckbox ~ .border .checkmark {
+        background-color: $dark-red;
+      }
 
-    &#blueCheckbox ~ .border .checkmark {
-      background-color: $blue;
-    }
-  }
+      &#yellowCheckbox ~ .border .checkmark {
+        background-color: $dark-yellow;
+      }
 
-  &:focus input,
-  &:active input {
-    &#greenCheckbox ~ .border .checkmark {
-      background-color: $dark-green;
-    }
-
-    &#redCheckbox ~ .border .checkmark {
-      background-color: $dark-red;
-    }
-
-    &#yellowCheckbox ~ .border .checkmark {
-      background-color: $dark-yellow;
-    }
-
-    &#blueCheckbox ~ .border .checkmark {
-      background-color: $dark-blue;
+      &#blueCheckbox ~ .border .checkmark {
+        background-color: $dark-blue;
+      }
     }
   }
 }

src/components/VinlottisPage.vue

@@ -97,7 +97,6 @@ export default {
   width: 75%;
 
   @include mobile {
-    padding: 0 1.25rem;
     width: 100%;
   }
 }
@@ -130,6 +129,10 @@ export default {
   }
 }
 
+.container {
+  margin-bottom: 2.5rem;
+}
+
 .outer {
   width: 100vw;
   display: flex;

src/ui/Highscore.vue

@@ -39,7 +39,7 @@ div {
   flex-direction: column;
 }
 ol {
-  padding-left: 1rem;
+  padding-left: 1.375rem !important;
   margin-left: 0;
 
   li {

src/ui/Vipps.vue

@@ -61,6 +61,23 @@ export default {
           }
         }
       );
+
+      this.drawLogoOverCanvas(canvas)
+    },
+    drawLogoOverCanvas(canvas) {
+      const context = canvas.getContext("2d")
+      const centerX = canvas.width / 2
+      const centerY = canvas.height / 2
+      context.font = "30px Arial"
+      context.textAlign = "center"
+      context.textBaseline = "middle"
+      context.arc(centerX, centerY, 25, 0, 2 * Math.PI, false)
+      context.fillStyle = 'white'
+      context.fill()
+      context.lineWidth = 3
+      context.strokeStyle = '#fe5b23'
+      context.stroke()
+      context.fillText("🍾", centerX, centerY)
     },
     openVipps: function() {
       window.location.assign(

src/ui/Wines.vue

@@ -70,7 +70,7 @@ a {
 }
 
 ol {
-  padding-left: 1rem;
+  padding-left: 0;
   margin-left: 0;
 }