Merge pull request #175 from PickleNik/main

Website fixes & improvements (!merge before deployment)

Website/layouts/default.vue

@@ -1,8 +1,6 @@
 <template>
   <v-app dark>
-    <v-app-bar app flat class="topBar fly-in-from-top"
-      :class="$vuetify.breakpoint.mobile ? 'ma-4' : 'my-4 mx-auto'"
-      >
+    <v-app-bar app flat 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 }}
@@ -16,11 +14,9 @@
 
       <section class="hidden-chrome-scrollbar" style="height: calc(100vh - 1rem); padding-top: 5rem; padding-bottom: 5rem; overflow-y: auto;">
           <center
-            class="hidden-chrome-scrollbar mx-auto d-flex flex-column justify-center items-center"
-            style="width: 90vw; min-height: 100%; overflow-y: auto;">
-
-            <nuxt />
-
+            class="mx-auto d-flex flex-column justify-center items-center"
+            style="width: 90vw; min-height: 100%;">
+              <nuxt />
           </center>
       </section>
 
@@ -33,6 +29,29 @@ html, body {
   overflow: hidden;
 }
 
+.title-text {
+  font-size: 3rem;
+}
+
+.topBar {
+  padding: 0 3rem;
+  width: fit-content !important;
+  background-color: #222 !important;
+  border-radius: 1rem !important;
+  border-radius: .75rem;
+  overflow: hidden;
+}
+
+@media (max-width: 768px) { /* mobile */
+  .title-text {
+    font-size: 2rem;
+  }
+  .topBar { 
+    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) */
+    padding: 0;
+  } 
+}
+
 .mainAltButton {
   margin: 0.25em;
 }
@@ -41,15 +60,44 @@ html, body {
   display: none;
 }
 
-.topBar {
-  background-color: #222 !important;
-  border-radius: 12px;
-  width: fit-content !important;
-  padding: 0 50px;
-  border-radius: 1rem !important;
+/* animations and all that */
+.swoop-in-enter-active,
+.swoop-in-leave-active,
+.swoop-out-enter-active,
+.swoop-out-leave-active,
+.swoop-left-enter-active,
+.swoop-left-leave-active,
+.swoop-right-enter-active,
+.swoop-right-leave-active {
+  transition-duration: 0.1s;
+  transition-property: opacity, transform;
   overflow: hidden;
 }
 
+.swoop-left-enter,
+.swoop-right-leave-active {
+  opacity: 0;
+  transform: translate(1rem, 0);
+}
+
+.swoop-left-leave-active,
+.swoop-right-enter {
+  opacity: 0;
+  transform: translate(-1rem, 0);
+}
+
+.swoop-in-enter,
+.swoop-out-leave-active {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.swoop-in-leave-active,
+.swoop-out-enter {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
 .fly-in-from-top {
   opacity: 0;
   transform: scale(0.8) translateY(-200%);
@@ -66,14 +114,51 @@ html, body {
     transform: scale(1) translateY(0);
   }
 }
-/*
-@media (min-width: 1234px) { 
-  .topBar { 
-    width: 95%; 
-  } 
-}
-*/
 
+/* reduced-motion animations */
+@media (prefers-reduced-motion) {
+  .fly-in-from-top {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+
+  .swoop-in-enter-active,
+  .swoop-in-leave-active,
+  .swoop-out-enter-active,
+  .swoop-out-leave-active,
+  .swoop-left-enter-active,
+  .swoop-left-leave-active,
+  .swoop-right-enter-active,
+  .swoop-right-leave-active {
+    transition-duration: 0.05s;
+    transition-property: opacity;
+  }
+
+  .swoop-left-enter,
+  .swoop-right-leave-active {
+    opacity: 0;
+    transform: none;
+  }
+
+  .swoop-left-leave-active,
+  .swoop-right-enter {
+    opacity: 0;
+    transform: none;
+  }
+
+  .swoop-in-enter,
+  .swoop-out-leave-active {
+    opacity: 0;
+    transform: none;
+  }
+
+  .swoop-in-leave-active,
+  .swoop-out-enter {
+    opacity: 0;
+    transform: none;
+  }
+}
 </style>
 
 <script>

Website/pages/donate.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     
-    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Donate</h1>
-    <p style="color: #999; margin-top: .5rem; margin-bottom: 2rem;">You can support our efforts to keep the internet free with a donation!</p>
+    <h1 class="title-text" >Donate</h1>
+    <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">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
@@ -17,10 +17,16 @@
 
 <script>
   export default {
+    transition(to, from) {
+      if (!from) return 'swoop-in'
+      let routes = ['index', 'install', 'faq', 'donate', 'links']
+      if (routes.indexOf(to.name) < 0) return 'swoop-out'
+      if (routes.indexOf(from.name) < 0) return 'swoop-in'
+      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    },
     data: () => ({
       patreonLink: "https://www.patreon.com/returnyoutubedislike",
       yoomoneyLink: "/pay/yoomoney"
-    }),
-  
+    })
   }
 </script>

Website/pages/faq.vue

@@ -1,23 +1,34 @@
 <template>
   <div>
-    
 
-    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Frequently Asked Questions</h1>
-    <p style="color: #999; margin-top: .5rem; margin-bottom: 2rem;">Still have questions? Feel free to join our Discord!</p>
+    <h1 class="title-text" >Frequently Asked Questions</h1>
+    <p style="color: #999; margin-top: .5rem; margin-bottom: 1.5rem;">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: 24px;">Loading</v-expansion-panel-content>
+    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
+      <v-expansion-panel v-for="(item, i) in items" :key="i" >
+        <v-expansion-panel-header>
+          {{ item.question }}
+        </v-expansion-panel-header>
+        <v-expansion-panel-content class="text-left">
+          <hr style="border-color: #444;">
+          <br>
+          {{ item.answer }}
+        </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
 
-
   </div>
 </template>
 
 <script>
   export default {
+    transition(to, from) {
+      if (!from) return 'swoop-in'
+      let routes = ['index', 'install', 'faq', 'donate', 'links']
+      if (routes.indexOf(to.name) < 0) return 'swoop-out'
+      if (routes.indexOf(from.name) < 0) return 'swoop-in'
+      return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+    },
     data: () => ({
       items: [
         { 

Website/pages/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
 
-    <svg id="thumbslogo" width="150" height="150" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M139.113,65.266l-57.339,-0c-5.288,-0 -9.812,3.185 -11.723,7.772l-19.241,44.916c-0.573,1.466 -0.892,2.995 -0.892,4.651l0,12.742c0,7.009 5.734,12.743 12.742,12.743l40.202,-0l-6.053,29.115l-0.191,2.039c0,2.612 1.083,5.033 2.803,6.754l6.754,6.689l41.985,-41.985c2.294,-2.294 3.695,-5.479 3.695,-8.984l0,-63.71c0,-7.009 -5.734,-12.742 -12.742,-12.742Zm25.485,-0l-0,76.452l25.484,0l-0,-76.452l-25.484,-0Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/><g id="Thumb-Down--m.io-" serif:id="Thumb Down (m.io)"></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(152.906,153.295,-153.295,152.906,43.6442,45.958)"><stop offset="0" style="stop-color:#ff4444;stop-opacity:1"/><stop offset="0.56" style="stop-color:#440000;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:1"/></linearGradient></defs></svg>
+    <svg id="thumbslogo" class="mb-4" width="150" height="150" viewBox="0 0 24 24"><path d="m15 3h-9c-0.83 0-1.54 0.5-1.84 1.22l-3.02 7.05c-0.09 0.23-0.14 0.47-0.14 0.73v2a2 2 0 0 0 2 2h6.31l-0.95 4.57a1.49 1.49 0 0 0 0.41 1.37l1.06 1.06 6.58-6.59c0.37-0.36 0.59-0.86 0.59-1.41v-10a2 2 0 0 0-2-2zm4 12h4v-12h-4z" /><path d="m7.47 12.2 4.76-2.7-4.76-2.71z" fill="#fff" stroke="none"/></svg>
 
-    <h1 style="font-size: 3rem;" >Return YouTube Dislike</h1>
+    <h1 class="title-text" >Return YouTube Dislike</h1>
     <div class="mb-4" 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 px-6" style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em;">
+    <v-btn :to="installLink" color="primary px-6" style="font-size: 1.5em; padding: 1em; margin-bottom: 0.5em;">
       <v-icon large class="mr-6">mdi-tray-arrow-down</v-icon>
       Install
     </v-btn>
@@ -31,31 +31,60 @@
 <style scoped>
 #thumbslogo {
   opacity: 0;
+  fill: transparent;
+  stroke: #f44;
+  transition-property: opacity, transform;
   transform: scale(0) rotate(180deg);
-  animation: popin 1s 1s ease-in-out 1 forwards, thumbsflip 2s 3s ease-in-out infinite alternate;
+  animation: popin 1s 1s ease-in-out 1 forwards, tap .3s 2.5s ease-in-out 1 forwards;
 }
+
 @keyframes popin {
   0% {
-    transform: rotate(180deg) scale(0.5);
+    transform: rotate(180deg) scale(0);
     opacity: 0;
   } 100% {
     transform: rotate(0deg) scale(1);
     opacity: 1;
   }
 }
-@keyframes thumbsflip {
+
+@keyframes tap {
   0% {
-    transform: rotate(0deg) scale(1);
-  } 50% {
-    transform: rotate(0) scale(1);
+    fill: transparent;
+    stroke: #f44;
+    transform: scale(1);
+  } 25% {
+    fill: #f44;
+    stroke: none;
+    transform: scale(.8);
   } 100% {
-    transform: rotate(180deg) scale(.9);
+    fill: #f44;
+    stroke: none;
+    transform: scale(1);
+  }
+}
+
+/* reduced-motion animations */
+@media (prefers-reduced-motion) {
+  #thumbslogo {
+    opacity: 1;
+    fill: #f44;
+    stroke: none;
+    transform: none;
+    animation: none;
   }
 }
 </style>
 
 <script>
 export default {
+  transition(to, from) {
+    if (!from) return 'swoop-in'
+    let routes = ['index', 'install', 'faq', 'donate', 'links']
+    if (routes.indexOf(to.name) < 0) return 'swoop-out'
+    if (routes.indexOf(from.name) < 0) return 'swoop-in'
+    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+  },
   data() {
     return {
       installLink: "/install",

Website/pages/install.vue

@@ -1,34 +1,34 @@
 <template>
   <div>
 
-    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Select Your Platform</h1>
+    <h1 class="title-text" >Select Your Platform</h1>
 
     <div style="color: #999;">
       <p style=" margin-top: .5rem; margin-bottom: 0;"> This is an <b>ALPHA version!</b> It may be slow. It may be buggy.</p>
       <p style="margin-bottom: 1rem;">Available for Firefox and all Chromium browsers (Chrome/Edge/Opera/Brave).</p>
     </div>
 
-    <v-btn class="mainAltButton" :href="firefoxLink" target="_blank">
+    <v-btn class="mainAltButton mb-2" :href="firefoxLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-firefox</v-icon>
       Firefox
     </v-btn>
 
-    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+    <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-google-chrome</v-icon>
       Chrome
     </v-btn>
 
-    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+    <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-microsoft-edge</v-icon>
       Edge
     </v-btn>
 
-    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+    <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-opera</v-icon>
       Opera
     </v-btn>
 
-    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+    <v-btn class="mainAltButton mb-2" :href="chromeLink" target="_blank">
       <v-img style="margin-right: 1rem;" src="ui/brave-mono.svg" height="20" width="20" />
       Brave
     </v-btn>
@@ -58,6 +58,13 @@
 
 <script>
 export default {
+  transition(to, from) {
+    if (!from) return 'swoop-in'
+    let routes = ['index', 'install', 'faq', 'donate', 'links']
+    if (routes.indexOf(to.name) < 0) return 'swoop-out'
+    if (routes.indexOf(from.name) < 0) return 'swoop-in'
+    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+  },
   data() {
     return {
       chromeLink: "https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/",

Website/pages/links.vue

@@ -1,10 +1,10 @@
 <template>
   <div style="height: 100%">
     
-    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Project Links</h1>
+    <h1 class="title-text" >Project Links</h1>
           
     <div style="color: #999">
-      <p style="margin-top: .5rem; margin-bottom: .5em;">Links to the project and it's developers</p>
+      <p style="margin-top: .5rem; margin-bottom: 1rem;">Links to the project and it's developers</p>
     </div>
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
@@ -38,6 +38,13 @@
 
 <script>
 export default {
+  transition(to, from) {
+    if (!from) return 'swoop-in'
+    let routes = ['index', 'install', 'faq', 'donate', 'links']
+    if (routes.indexOf(to.name) < 0) return 'swoop-out'
+    if (routes.indexOf(from.name) < 0) return 'swoop-in'
+    return routes.indexOf(to.name) > routes.indexOf(from.name) ? 'swoop-left' : 'swoop-right'
+  },
   data() {
     return {
       githubLink: "https://github.com/Anarios/return-youtube-dislike",

Website/pages/pay/yoomoney.vue

@@ -2,4 +2,12 @@
   <div>
     <iframe src="https://yoomoney.ru/quickpay/shop-widget?writer=seller&amp;targets=For%20returnyoutubedislike.com&amp;targets-hint=&amp;default-sum=&amp;button-text=13&amp;hint=&amp;successURL=&amp;quickpay=shop&amp;account=410015901550027&amp;" allowtransparency="true" scrolling="no" width="423" height="222" frameborder="0" />
   </div>
-</template>
+</template>
+
+<script>
+export default {
+  transition(to, from) {
+    return to.name == 'yoomoney' ? 'swoop-in' : 'swoop-out'
+  },
+}
+</script>