:white_circle: Website 1.1.0

+ Improved readability
+ Improved view on mobile devices and vertical monitors
+ Updated FAQ

9 files changed, 188 insertions, 160 deletions

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 504d83e..bfee7a4 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -13,7 +13,16 @@
 
       <v-img src="/ui/abstract.svg" style="position: absolute; top: 0; right: 0; width: 100%; height: 100%;" />
       
-      <nuxt />
+
+      <section style="position: relative;">
+        <div class="center" style="width: 90vw">
+          <center style="width: 90vw">
+            
+            <nuxt />
+
+          </center>
+        </div>
+      </section>
 
 
     </v-main>
diff --git a/Website/layouts/default_legacy.vue b/Website/layouts/default_legacy.vue
new file mode 100644
index 0000000..8a67913
--- /dev/null
+++ b/Website/layouts/default_legacy.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-app id="inspire" dark>
+    <v-app-bar app color="lighten-2" flat>
+
+      <v-tabs centered class="ml-n9" color="primary" router>
+        <v-tab v-for="link in links" :key="link" :to="link.path">
+          {{ link.name }}
+        </v-tab>
+      </v-tabs>
+    </v-app-bar>
+
+    <v-main>
+
+      <v-img src="/ui/abstract.svg" style="position: absolute; top: 0; right: 0; width: 100%; height: 100%;" />
+      
+
+      
+      <nuxt />
+
+
+    </v-main>
+  </v-app>
+</template>
+
+<style>
+html, body {
+  overflow: hidden;
+}
+
+section {
+  height: 90vh;
+  width: 100vw;
+}
+.mainAltButton {
+  margin: 0.25em;
+}
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
+
+<script>
+  export default {
+    data: () => ({
+      links: [
+        {
+          name: 'Home',
+          path: '/'
+        },
+        {
+          name: 'Install',
+          path: '/install'
+        },
+        {
+          name: 'FAQ',
+          path: '/faq'
+        },
+        {
+          name: 'Donate',
+          path: '/donate'
+        },
+        {
+          name: 'Links',
+          path: '/links'
+        },
+      ],
+    }),
+  }
+</script>
\ No newline at end of file
diff --git a/Website/package-lock.json b/Website/package-lock.json
index db6a2e4..0e61492 100644
--- a/Website/package-lock.json
+++ b/Website/package-lock.json
@@ -1,12 +1,12 @@
 {
-  "name": "Return-Youtube-Dislike",
-  "version": "1.0.0",
+  "name": "return-youtube-dislike-site",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "Return-Youtube-Dislike",
-      "version": "1.0.0",
+      "name": "return-youtube-dislike-site",
+      "version": "1.1.0",
       "dependencies": {
         "core-js": "^3.15.1",
         "nuxt": "^2.15.7",
diff --git a/Website/package.json b/Website/package.json
index 396e852..7ac5e93 100644
--- a/Website/package.json
+++ b/Website/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "Return-Youtube-Dislike",
-  "version": "1.0.0",
+  "name": "return-youtube-dislike-site",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "nuxt",
diff --git a/Website/pages/donate.vue b/Website/pages/donate.vue
index 6b1b77f..7b5125e 100644
--- a/Website/pages/donate.vue
+++ b/Website/pages/donate.vue
@@ -1,29 +1,16 @@
 <template>
   <div>
     
-    <section style="position: relative;">
-
-      <div class="center">
-        <center>
-
-          <h1 style="font-size: 3em; margin-bottom: 0em;">Donate</h1>
-          <p style="color: #999; margin-bottom: 3em;">You can support our efforts to keep the internet free with a donation!</p>
-
-          <v-btn class="mainAltButton" :href="patreonLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-patreon</v-icon>
-            Patreon
-          </v-btn>
-
-          <v-btn class="mainAltButton" :to="yoomoneyLink">
-            <v-icon style="margin-right: 0.5em;">mdi-cash-multiple</v-icon>
-            Yoomoney
-          </v-btn>
-
-        </center>
-      </div>
-
-
-    </section>
+    <h1 style="font-size: 3em; margin-bottom: 0em;">Donate</h1>
+    <p style="color: #999; margin-bottom: 3em;">You can support our efforts to keep the internet free with a donation!</p>
+    <v-btn class="mainAltButton" :href="patreonLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-patreon</v-icon>
+      Patreon
+    </v-btn>
+    <v-btn class="mainAltButton" :to="yoomoneyLink">
+      <v-icon style="margin-right: 0.5em;">mdi-cash-multiple</v-icon>
+      Yoomoney
+    </v-btn>
 
   </div>
 </template>
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 5b882ea..375462a 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -1,27 +1,17 @@
 <template>
   <div>
     
-    <section style="position: relative;">
-      
 
-      <div class="center">
-        <center>
+    <h1 style="font-size: 3em; margin-bottom: 0em;">Frequently Asked Questions</h1>
+    <p style="color: #999; margin-bottom: 3em;">Still have questions? Feel free to join our Discord!</p>
 
-          <h1 style="font-size: 3em; margin-bottom: 0em;">Frequently Asked Questions</h1>
-          <p style="color: #999; margin-bottom: 3em;">Still have questions? Feel free to join our Discord!</p>
+    <v-expansion-panels focusable>
+      <v-expansion-panel v-for="(item, i) in items" :key="i" style="width: 50vw; min-width: 300px;">
+        <v-expansion-panel-header v-text="item.question">Loading</v-expansion-panel-header>
+        <v-expansion-panel-content v-html="item.answer" style="text-align: left; padding: 0.5em;">Loading</v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
 
-          <v-expansion-panels focusable>
-            <v-expansion-panel v-for="(item, i) in items" :key="i" style="width: 50vw; min-width: 300px;">
-              <v-expansion-panel-header v-text="item.question">Loading</v-expansion-panel-header>
-              <v-expansion-panel-content v-html="item.answer" style="text-align: left; padding: 0.5em;">Loading</v-expansion-panel-content>
-            </v-expansion-panel>
-          </v-expansion-panels>
-
-        </center>
-      </div>
-
-
-    </section>
 
   </div>
 </template>
@@ -31,16 +21,20 @@
     data: () => ({
       items: [
         { 
-          question: "Why is it not in chrome store yet?",
-          answer: "Chrome extension appoval process takes some time. As soon as it's available in the store - We'll update the site "
+          question: "Where does extension get data?",
+          answer: "Combination of GoogleAPI data and scraped data. We save all available data to our DB for it to be available after google shuts down dislike counts in their API."
+        },
+        { 
+          question: "Video dislike count doesn't update",
+          answer: "Right now video dislikes are cached, and arent updated very frequenly. Once in 2-3 days, not more often Yeah, it's not ideal, but it is what it is. Working on improving how often we can update  them"
         },
         { 
-          question: "Is it dangerous?/Is it a virus?",
-          answer: "While there is some trust involved in installing an extension from 3-rd party source - you can see all permissions requested by the extension before installing it. This extension only asks for access to youtube.com page "
+          question: "How does this work?",
+          answer: "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, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then stores the data in a database for caching (cached for around 2-3 days) and archiving purposes and returns it to you. The extension then displays the dislikes to you."
         },
         { 
-          question: "I downvoted a video, and downvotes number didn't change",
-          answer: "Currently we're using YouTube API to get dislikes count. It may take some time for data to be updated. YouTube might freeze dislike counts as well. We're working on a solution for this "
+          question: "What will happen after the YouTube API stops returning the dislike count?",
+          answer: "The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data and estimates based on view/like ratios for videos whose dislikes weren't archived and for outdated dislike archives."
         },
       ],
     }),
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index c53a885..37e66c0 100644
--- a/Website/pages/index.vue
+++ b/Website/pages/index.vue
@@ -1,39 +1,27 @@
 <template>
   <div>
 
-    <section style="position: relative;">
-
-
-      <div class="center">
-        <center>
-
-          <h1 style="font-size: 3em; margin-bottom:0;">Return Youtube Dislike</h1>
-          <div style="color: #999">
-            <p style="margin-top: 0">Browser extension and an API that show you dislikes on youtube</p>
-          </div>
-
-          <v-btn :to="installLink" color="primary lighten-1" style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em;">
-            <v-icon large style="margin-right: 0.5em;">mdi-tray-arrow-down</v-icon>
-            Install
-          </v-btn>
-
-          <br>
-
-          <v-btn class="mainAltButton" :href="githubLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
-            Github
-          </v-btn>
-
-          <v-btn class="mainAltButton" :href="discordLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
-            Our Discord
-          </v-btn>
-
-        </center>
-      </div>
-
-
-    </section>
+    <h1 style="font-size: 3em; margin-bottom:0;">Return Youtube Dislike</h1>
+    <div style="color: #999">
+      <p style="margin-top: 0">Browser extension and an API that show you dislikes on youtube</p>
+    </div>
+
+    <v-btn :to="installLink" color="primary lighten-1" style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em;">
+      <v-icon large style="margin-right: 0.5em;">mdi-tray-arrow-down</v-icon>
+      Install
+    </v-btn>
+
+    <br>
+
+    <v-btn class="mainAltButton" :href="githubLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
+      Github
+    </v-btn>
+
+    <v-btn class="mainAltButton" :href="discordLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
+      Our Discord
+    </v-btn>
 
   </div>
 </template>
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index 9d1779c..2cb9ffb 100644
--- a/Website/pages/install.vue
+++ b/Website/pages/install.vue
@@ -1,49 +1,38 @@
 <template>
   <div>
 
-    <section style="position: relative;">
+    <h1 style="font-size: 3em; margin-bottom: 0;">Select Your Platform</h1>
+
+    <div style="color: #999">
+      <p style="margin-bottom: 0;"> This is an <b>ALPHA version!</b> It may be slow. It may be buggy.</p>
+      <p style="margin-bottom: 3em;">Only available for Chrome, Firefox and as a Userscript now, but coming to other platforms soon.</p>
+    </div>
+
+    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-google-chrome</v-icon>
+      Chrome
+    </v-btn>
+
+    <v-btn class="mainAltButton" :href="firefoxLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-firefox</v-icon>
+      Firefox
+    </v-btn>
+
+    <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-script-text-outline</v-icon>
+      Userscript (Tampermonkey)
+    </v-btn>
+
+    <h3 style="margin-top: 3em;">Third Party Implementations</h3>
+    <div style="color: #999">
+      <p style="margin-bottom: 0;">No liability on our side, use at your own risk</p>
+    </div>
+    <v-btn class="mainAltButton" :href="iosJailbreakLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-apple</v-icon>
+      iOS (Jailbroken)
+    </v-btn>
 
 
-      <div class="center">
-        <center>
-
-          <h1 style="font-size: 3em; margin-bottom: 0;">Select Your Platform</h1>
-
-          <div style="color: #999">
-            <p style="margin-bottom: 0;"> This is an <b>ALPHA version!</b> It may be slow. It may be buggy.</p>
-            <p style="margin-bottom: 3em;">Only available for Chrome, Firefox and as a Userscript now, but coming to other platforms soon.</p>
-          </div>
-
-          <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-google-chrome</v-icon>
-            Chrome
-          </v-btn>
-
-          <v-btn class="mainAltButton" :href="firefoxLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-firefox</v-icon>
-            Firefox
-          </v-btn>
-
-          <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-script-text-outline</v-icon>
-            Userscript (Tampermonkey)
-          </v-btn>
-
-          <h3 style="margin-top: 3em;">Third Party Implementations</h3>
-          <div style="color: #999">
-            <p style="margin-bottom: 0;">No liability on our side, use at your own risk</p>
-          </div>
-          <v-btn class="mainAltButton" :href="iosJailbreakLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-apple</v-icon>
-            iOS (Jailbroken)
-          </v-btn>
-
-        </center>
-      </div>
-
-
-    </section>
-
   </div>
 </template>
 
diff --git a/Website/pages/links.vue b/Website/pages/links.vue
index 133de7a..d869610 100644
--- a/Website/pages/links.vue
+++ b/Website/pages/links.vue
@@ -1,40 +1,29 @@
 <template>
   <div>
     
-    <section style="position: relative;">
-      
 
-      <div class="center">
-        <center>
-
-          <h1 style="font-size: 3em; margin-bottom: 0;">Project Links</h1>
+    <h1 style="font-size: 3em; margin-bottom: 0;">Project Links</h1>
           
-          <div style="color: #999">
-            <p style="margin-bottom: 1em;">Links to the project and it's developers</p>
-          </div>
-
-          <v-btn class="mainAltButton" :href="githubLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
-            Github
-          </v-btn>
-
-          <v-btn class="mainAltButton" :href="discordLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
-            Discord
-          </v-btn>
-
-          <h1 style="margin-top: 1em;">Contact Me</h1>
-
-          <v-btn class="mainAltButton" :href="emailLink" target="_blank">
-            <v-icon style="margin-right: 0.5em;">mdi-email</v-icon>
-            Email
-          </v-btn>
-
-        </center>
-      </div>
-
-
-    </section>
+    <div style="color: #999">
+      <p style="margin-bottom: 1em;">Links to the project and it's developers</p>
+    </div>
+
+    <v-btn class="mainAltButton" :href="githubLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
+      Github
+    </v-btn>
+
+    <v-btn class="mainAltButton" :href="discordLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-discord</v-icon>
+      Discord
+    </v-btn>
+
+    <h1 style="margin-top: 1em;">Contact Me</h1>
+
+    <v-btn class="mainAltButton" :href="emailLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-email</v-icon>
+      Email
+    </v-btn>
 
     <p id="credits">Site by <v-icon color="#555">mdi-discord</v-icon> Front#2990.</p>