Refactoring banners + Adding offline/noscript message

Shashwat986 · Oct 19, 2017 · 49940db · 49940db
1 parent abead99
commit 49940db
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -9,13 +9,11 @@
   </head>
   <body>
     <section id="main">
+    <center v-show="false">
+      If you see this, that means the page hasn't loaded yet. If this message persists, please check your Javascript settings, and your internet connection.
+    </center>
     <navbar :set-github-key="setGithubKey"></navbar>
-    <div class="container-fluid bg-danger" v-if="state.banner.error">
-      <p class="text-center m10-top">{{state.banner.error}}</p>
-    </div>
-    <div class="container-fluid bg-success" v-if="state.banner.success">
-      <p class="text-center m10-top">{{state.banner.success}}</p>
-    </div>
+    <banners></banners>
     <div class="container-fluid bg-dark m10">
       <template v-if="!state.github.githubKey">
         <h3>GistUX</h3>

diff --git a/src/js/main.js b/src/js/main.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import router from './router';
 import Spinner from './views/spinner.vue';
 import Navbar from './views/navbar.vue';
+import Banners from './views/banners.vue';
 import store from './store';
 import constants from './constants';
 import FolderModel from './folder_model';
@@ -21,7 +22,8 @@ window.vm = new Vue({
   },
   components: {
     spinner: Spinner,
-    navbar: Navbar
+    navbar: Navbar,
+    banners: Banners,
   },
   methods: {
     setGithubKey (githubKey) {

diff --git a/src/js/views/banners.vue b/src/js/views/banners.vue
@@ -0,0 +1,20 @@
+<template>
+<div>
+  <div class="container-fluid bg-danger" v-if="state.banner.error">
+    <p class="text-center m10-top">{{state.banner.error}}</p>
+  </div>
+  <div class="container-fluid bg-success" v-if="state.banner.success">
+    <p class="text-center m10-top">{{state.banner.success}}</p>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  computed: {
+    state () {
+      return this.$store.state;
+    }
+  }
+};
+</script>