From 616e48733643baae03db637580204c7711d58e53 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Wed, 30 Jan 2019 17:21:10 +0000
Subject: [PATCH] removed background preloader on mobile

---
 TODO.md            |  3 +++
 pages/services.vue | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/TODO.md b/TODO.md
index 3c0ab8a..5576b60 100644
--- a/TODO.md
+++ b/TODO.md
@@ -14,6 +14,9 @@
 ## Image viewer
 * close icon
 
+## Services
+* background image for mobile
+
 ## Maybes
 * gallery page - featured images in same style as on services page with the
                  diagonal divide
diff --git a/pages/services.vue b/pages/services.vue
index 1ae583b..48db4df 100644
--- a/pages/services.vue
+++ b/pages/services.vue
@@ -1,13 +1,18 @@
 <template>
   <ContentPage heading="My Services">
     <!-- TODO need to disable this if on mobile -->
-    <BackgroundImagePreloader slot="background"
+    <BackgroundImagePreloader v-if="showPreloaderBackground" slot="background"
                               class="background-preloader"
                               :image-urls="backgroundImageUrls"
                               :active-index="activeIndex"
     >
-      <div slot="overlay" class="background-tint background preloader-overlay"></div>
     </BackgroundImagePreloader>
+    <BackgroundImageLoader v-else slot="background"
+                           class="background"
+                           image-url="https://via.placeholder.com/1920x1080"
+    >
+    </BackgroundImageLoader>
+    <div slot="overlay" class="background-tint background preloader-overlay"></div>
 
     <ul class="services-list">
       <li v-for="(service, index) in services"
@@ -35,6 +40,7 @@
 <script>
 import ContentPage from '@/components/ContentPage'
 import BackgroundImagePreloader from '@/components/BackgroundImagePreloader'
+import BackgroundImageLoader from '@/components/BackgroundImageLoader'
 
 export default {
   name: 'HomePage',
@@ -42,10 +48,12 @@ export default {
   components: {
     ContentPage,
     BackgroundImagePreloader,
+    BackgroundImageLoader,
   },
 
   data() {
     return {
+      showPreloaderBackground: false,
       activeIndex: 0,
       services: [
         {
@@ -86,6 +94,11 @@ export default {
     },
   },
 
+  mounted () {
+    const mq = window.matchMedia("(min-width: 40em)")
+    this.showPreloaderBackground = mq.matches
+  },
+
   methods: {
     handleMouseOver(index) {
       this.activeIndex = index