From 0ae4b0d9e6f343fe4330d71901299c886b0acff8 Mon Sep 17 00:00:00 2001
From: Lars Baunwall <larslb@thinkability.dk>
Date: Mon, 20 Apr 2020 12:15:17 +0200
Subject: [PATCH] Add empty state for download buttons

---
 client-app/src/components/DownloadButtons.vue | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/client-app/src/components/DownloadButtons.vue b/client-app/src/components/DownloadButtons.vue
index 10ee93a..5fa8edc 100644
--- a/client-app/src/components/DownloadButtons.vue
+++ b/client-app/src/components/DownloadButtons.vue
@@ -1,32 +1,43 @@
 <template>
-  <div class="buttons is-centered" v-if="latest != null">
-    <a :href="latest.windows.path" class="button is-primary is-medium">
-      <span class="icon">
-        <i class="fab fa-windows" />
-      </span>
-      <span>Windows <span class="is-size-7">(v{{latest.version}})</span></span>
-    </a>
-    <a :href="latest.macOS.path" class="button is-primary is-medium">
-      <span class="icon">
-        <i class="fab fa-apple" />
-      </span>
-      <span>MacOS <span class="is-size-7">(v{{latest.version}})</span></span>
-    </a>
+  <div>
+    <div class="buttons is-centered" v-if="latest != null">
+      <a :href="latest.windows.path" class="button is-primary is-medium">
+        <span class="icon">
+          <i class="fab fa-windows" />
+        </span>
+        <span>
+          Windows
+          <span class="is-size-7">(v{{latest.version}})</span>
+        </span>
+      </a>
+      <a :href="latest.macOS.path" class="button is-primary is-medium">
+        <span class="icon">
+          <i class="fab fa-apple" />
+        </span>
+        <span>
+          MacOS
+          <span class="is-size-7">(v{{latest.version}})</span>
+        </span>
+      </a>
+    </div>
+    <div v-else class="notification is-white-bis">
+      Fetching the latest downloads from <strong><a href="https://github.com/larsbaunwall/plodo/releases">Github</a></strong>...
+    </div>
   </div>
 </template>
 
 <script>
 import ApiService from "@/common/ApiService";
 export default {
-    data() {
-        return {
-            latest: null
-        }
-    },
-    async mounted() {
-        const version = await ApiService.getLatestAppVersion();
-        this.latest = version;
-    }
+  data() {
+    return {
+      latest: null
+    };
+  },
+  async created() {
+    const version = await ApiService.getLatestAppVersion();
+    this.latest = version;
+  }
 };
 </script>