Add empty state for download buttons

larsbaunwall · Apr 20, 2020 · 0ae4b0d · 0ae4b0d
1 parent 7d0eed0
commit 0ae4b0d
Showing 1 changed file with 33 additions and 22 deletions.
diff --git 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>