From 8a3fe730d2a366fc2b731de4dc55169daee14b07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kevin=20Midb=C3=B8e?= <kevin.midboe@gmail.com>
Date: Wed, 22 Jan 2020 17:35:34 +0100
Subject: [PATCH] Replaced all mobile media queries with scss mixin.

---
 src/components/VinlottisPage.vue | 2 +-
 src/ui/PurchaseGraph.vue         | 4 +++-
 src/ui/TotalBought.vue           | 5 ++++-
 src/ui/WinGraph.vue              | 4 +++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/VinlottisPage.vue b/src/components/VinlottisPage.vue
index 7d23b65..69a7c70 100644
--- a/src/components/VinlottisPage.vue
+++ b/src/components/VinlottisPage.vue
@@ -179,7 +179,7 @@ h1 {
   border-right: 1px solid #333;
 }
 
-@media only screen and (max-width: 768px) {
+@include mobile {
   .purchase,
   .win {
     width: 100vw;
diff --git a/src/ui/PurchaseGraph.vue b/src/ui/PurchaseGraph.vue
index d8747bc..0a87411 100644
--- a/src/ui/PurchaseGraph.vue
+++ b/src/ui/PurchaseGraph.vue
@@ -111,6 +111,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
 .chartjsLegend li span {
   display: inline-block;
   width: 12px;
@@ -119,7 +121,7 @@ export default {
   border-radius: 25px;
 }
 
-@media only screen and (max-width: 768px) {
+@include mobile {
   canvas {
     height: 50vh;
   }
diff --git a/src/ui/TotalBought.vue b/src/ui/TotalBought.vue
index be5a474..aa791f7 100644
--- a/src/ui/TotalBought.vue
+++ b/src/ui/TotalBought.vue
@@ -98,6 +98,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/media-queries.scss";
+
 .inner-bought-container {
   display: flex;
   flex-direction: column;
@@ -158,7 +160,8 @@ export default {
 .blue {
   color: #57d2fb;
 }
-@media only screen and (max-width: 768px) {
+
+@include mobile {
   .bought-container {
     flex-wrap: wrap;
     flex-direction: column;
diff --git a/src/ui/WinGraph.vue b/src/ui/WinGraph.vue
index 21c2fce..6b2b0ca 100644
--- a/src/ui/WinGraph.vue
+++ b/src/ui/WinGraph.vue
@@ -92,7 +92,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@media only screen and (max-width: 768px) {
+@import "../styles/media-queries.scss";
+
+@include mobile {
   canvas {
     height: 50vh;
   }