added notification warning for Chrome < 70 and FF < 60

3 files changed, 71 insertions, 10 deletions

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index e7aaf4b..c40259f 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app dark>
     <!-- height = 4rem, margin-y = 1rem -->
-    <v-app-bar app flat class="topBar fly-in-from-top my-4 mx-auto">
+    <v-app-bar app text class="topBar fly-in-from-top my-4 mx-auto">
       <v-tabs centered center-active color="primary" router show-arrows>
         <v-tab v-for="link in links" :key="link.path" :to="link.path">
           {{ link.name }}
@@ -24,6 +24,32 @@
         <nuxt />
       </center>
     </v-main>
+
+    <!--   Debugger Notification   -->
+    <v-snackbar
+      v-model="alert.show"
+      :timeout="-1"
+      class="ma-4 desktop-only"
+      color="primary"
+      bottom
+      left
+      text
+    >
+      <v-icon color="primary" class="mr-4">mdi-alert-circle-outline</v-icon>
+      <span v-html="alert.html" class="my-auto"></span>
+
+      <template #action="{ attrs }">
+        <v-btn
+          v-bind="attrs"
+          color="primary"
+          flat
+          icon
+          @click="alert.show = false"
+        >
+          <v-icon>mdi-close-circle-outline</v-icon>
+        </v-btn>
+      </template>
+    </v-snackbar>
   </v-app>
 </template>
 
@@ -39,7 +65,35 @@ export default {
       { name: "Donate", path: "/donate" },
       { name: "Links", path: "/links" },
     ],
+    alert: {
+      show: false,
+      html: "",
+    },
   }),
+  mounted() {
+    setTimeout(() => {
+      // check if browser version out of date
+      if (
+        window.navigator.userAgent.indexOf("Chrome") > -1 &&
+        window.navigator.userAgent.indexOf("Edge") === -1
+      ) {
+        let chrome = window.navigator.userAgent.match(/Chrome\/(\d+)/);
+        let chromeVersion = chrome ? chrome[1] : 0;
+        if (chromeVersion < 70) {
+          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.show = true;
+        }
+      }
+      if (window.navigator.userAgent.indexOf("Firefox") > -1) {
+        let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
+        let firefoxVersion = firefox ? firefox[1] : 0;
+        if (firefoxVersion < 60) {
+          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.show = true;
+        }
+      }
+    }, 1000);
+  },
 };
 </script>
 
@@ -53,6 +107,11 @@ body {
   overflow: auto;
 }
 
+::selection {
+  background: #f44;
+  color: #111;
+}
+
 ::-webkit-scrollbar {
   width: 1rem;
 }
@@ -78,6 +137,10 @@ body {
   outline: 2px solid red;
 }
 
+.v-sheet.v-snack__wrapper{
+  border-radius: 0.75rem !important;
+}
+
 .mainAltButton {
   margin: 0.25em;
 }
diff --git a/Website/pages/docs.vue b/Website/pages/docs.vue
index 8833592..0489fcb 100644
--- a/Website/pages/docs.vue
+++ b/Website/pages/docs.vue
@@ -1,10 +1,9 @@
 <template>
-  <div class="row wrap justify-center full-width">
-    <!--   Top Section // "Sections" Card   -->
+  <div class="row wrap justify-center full-width" style="max-width: 100%">
+    <!--   Left Section // "Sections" Card   -->
     <v-card
-      max-width="600px"
-      class="mx-2"
-      style="background: transparent; width: max-content; height: max-content"
+      class="col-xs-12 mx-2 elevation-0"
+      style="background: transparent; height: max-content"
     >
       <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
         Sections
@@ -32,12 +31,12 @@
 
     <!--   Child Pages // Card   -->
     <v-card
-      max-width="600px"
-      class="col-xs col-md col-6 text-left mx-2 my-6 pa-8"
+      class="col-xs-12 col-md-6 text-left mx-2 my-6 pa-8"
       style="
         height: max-content;
         background-color: #222;
         border-radius: 0.75rem;
+        max-width: 90%;
       "
     >
       <NuxtChild />
diff --git a/Website/pages/docs/fetching.vue b/Website/pages/docs/fetching.vue
index 651f2b8..c295eb3 100644
--- a/Website/pages/docs/fetching.vue
+++ b/Website/pages/docs/fetching.vue
@@ -61,9 +61,8 @@
 
 <style scoped>
 .code {
-  width: 100%;
   background: #353535;
-  border-radius: 3px;
+  border-radius: 0.25rem;
 }
 </style>