Win7 warning, docs styling fixes, page width fixes

Website/layouts/default.vue

@@ -73,7 +73,7 @@ export default {
   }),
   mounted() {
     setTimeout(() => {
-      // check if browser version out of date
+      // Chrome < 70
       if (
         window.navigator.userAgent.indexOf("Chrome") > -1 &&
         window.navigator.userAgent.indexOf("Edge") === -1
@@ -85,6 +85,8 @@ export default {
           this.alert.show = true;
         }
       }
+
+      // FF < 60
       if (window.navigator.userAgent.indexOf("Firefox") > -1) {
         let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
         let firefoxVersion = firefox ? firefox[1] : 0;
@@ -93,11 +95,18 @@ export default {
           this.alert.show = true;
         }
       }
-      // check for IE browser
+
+      // IE
       if (window.navigator.userAgent.indexOf("MSIE") > -1) {
         this.alert.html = `Looks like you're using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Internet Explorer</b>. Stop it, get some help.`;
         this.alert.show = true;
       }
+
+      // Win7
+      if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Update Windows, or install Linux :)`;
+        this.alert.show = true;
+      }
     }, 1000);
   },
 };
@@ -162,6 +171,7 @@ body {
 .title-text {
   font-size: 3rem;
 }
+
 @media (max-width: 768px) {
   /* mobile */
   .title-text {

Website/pages/docs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row wrap justify-center full-width" style="max-width: 100%">
+  <div class="row wrap justify-center full-width mx-auto" style="width: 80vw">
     <!--   Left Section // "Sections" Card   -->
     <v-card
       class="col-xs-12 mx-2 elevation-0"
@@ -8,6 +8,7 @@
         height: max-content;
         position: sticky;
         top: 5.5rem;
+        max-width: 500px;
       "
     >
       <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
@@ -24,12 +25,12 @@
           color="primary"
           style="overflow: hidden; border-radius: 0.75rem"
         >
+          <v-list-item-title style="text-align: right">
+            <v-list-item-title v-text="item.text" />
+          </v-list-item-title>
           <v-list-item-icon>
             <v-icon v-text="item.icon" />
           </v-list-item-icon>
-          <v-list-item-title style="text-align: left">
-            <v-list-item-title v-text="item.text" />
-          </v-list-item-title>
         </v-list-item>
       </v-list>
     </v-card>
@@ -41,7 +42,7 @@
         height: max-content;
         background-color: #222;
         border-radius: 0.75rem;
-        max-width: 90%;
+        width: 90%;
       "
     >
       <NuxtChild />

Website/pages/docs/endpoints.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Available Endpoints</h1>
     List of available endpoints is available here:<br />
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />

Website/pages/docs/fetching.vue

@@ -1,49 +1,49 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Basic Fetching Tutorial</h1>
 
     <span>Example to get votes of a given YouTube video ID:</span>
     <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
       >kxOuG8jMIgI</a
-    ><br /><br />
+    >
 
     <h2>Example Request:</h2>
-    <span><b>Request URL:</b></span>
+    <span>Request URL:</span>
     <a
       :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
       target="_blank"
       v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-    /><br />
-    <span
-      ><b>Request Method:</b>
+    />
+    <br />
+    <span>
+      Request Method:
       <a
         href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
         target="_blank"
         >HTTP/GET</a
-      ></span
-    ><br />
-    <span><b>Headers:</b></span
-    ><br />
-    <code class="code">
+      >
+    </span>
+    <br />
+    <span>Headers:</span>
+    <br />
+    <div class="code pa-4">
       Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
       Pragma: no-cache<br />
       Cache-Control: no-cache<br />
-      Connection: keep-alive </code
-    ><br />
-    <span><b>Response:</b></span
-    ><br />
-    <div class="code">
-      <code style="background-color: rgba(0, 0, 0, 0)">
-        {<br />
-        "id": "kxOuG8jMIgI",<br />
-        "dateCreated": "2021-12-20T12:25:54.418014Z",<br />
-        "likes": 27326,<br />
-        "dislikes": 498153,<br />
-        "rating": 1.212014408444885,<br />
-        "viewCount": 3149885,<br />
-        "deleted": false<br />
-        }
-      </code>
+      Connection: keep-alive
+    </div>
+    <span>Response:</span><br />
+    <div class="code pa-4">
+      {
+      <br />
+      &nbsp;"id": "kxOuG8jMIgI",<br />
+      &nbsp;"dateCreated": "2021-12-20T12:25:54.418014Z",<br />
+      &nbsp;"likes": 27326,<br />
+      &nbsp;"dislikes": 498153,<br />
+      &nbsp;"rating": 1.212014408444885,<br />
+      &nbsp;"viewCount": 3149885,<br />
+      &nbsp;"deleted": false<br />
+      }
     </div>
     <br /><br />
     <v-alert border="left" color="orange" text type="info">
@@ -59,13 +59,6 @@
   </div>
 </template>
 
-<style scoped>
-.code {
-  background: #353535;
-  border-radius: 0.25rem;
-}
-</style>
-
 <script>
 export default {
   data() {
@@ -75,3 +68,12 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.code {
+  color: #aaa;
+  background: #353535;
+  border-radius: 0.25rem;
+  font-family: monospace;
+}
+</style>

Website/pages/docs/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1>
       Welcome to the <span class="primary--text">official RYD docs</span>!
     </h1>
-    <p>&lt;- To get started, select a section on the left.</p>
+    To get started, select a section from the menu.
   </div>
 </template>

Website/pages/docs/url.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">URL Information</h1>
     The API is accessible over the following base URL:<br />
     <a :href="apiUrl" target="_blank" v-text="apiUrl" />

Website/pages/docs/usage-rights.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Usage Rights</h1>
     <p>
       Third party use of this open API is allowed with the following

Website/pages/faq.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div style="width: 90vw" class="mx-auto">
     <h1 class="title-text">Frequently Asked Questions</h1>
     <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
       Still have questions? Feel free to join our Discord!
     </p>
 
-    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
+    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-8">
       <v-expansion-panel v-for="(item, i) in items" :key="i">
         <v-expansion-panel-header>
           {{ item.question }}
@@ -49,8 +49,7 @@ export default {
           "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API. The extension then displays the dislike count and ratio on the page. If you like or dislike a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
       },
       {
-
-        question:"Can I share my dislike count with you?",
+        question: "Can I share my dislike count with you?",
 
         answer:
           "Coming soon. We are looking into using Oauth or a different read only API with a limited scope so creators can share their dislike counts verifiability. ",

Website/pages/help.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div
+    style="width: 80vw"
+    class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"
+  >
     <h1 class="title-text pt-12">Troubleshooting</h1>
-    <ol
-      class="col-xs-12 col-sm-11 col-md-9 col-lg-7 q-mx-auto text-left"
-      style="line-height: 3rem; color: #aaa"
-    >
+    <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
         Make sure you have latest version of extension installed,
         <code style="color: #eee">
@@ -88,7 +88,8 @@
 
           <li>
             Take screenshot of extensions page of your browser with extension
-            installed. <br />
+            installed.
+            <br />
             To see extensions put this into adress bar:
             <br />
             <code>about:addons</code> for Firefox
@@ -114,7 +115,7 @@ export default {
       : "swoop-right";
   },
   data: () => ({
-    version: "2.0.0.3",
+    version: "loading",
     platform: "Unknown platform",
     discordLink: "https://discord.gg/mYnESY4Md5",
   }),