:white_circle: Website 1.1.0

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

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>

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>

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",

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",

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>

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."
         },
       ],
     }),

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>

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>
 

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>