From febcaec9d26b635f5239955c05b12bf64883b9bc Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Fri, 3 Dec 2021 19:53:50 -0500
Subject: [PATCH] mobile adjustments changed from JS to CSS to avoid jank on
 first load

---
 Website/layouts/default.vue | 50 +++++++++++++++++++------------------
 Website/pages/donate.vue    |  2 +-
 Website/pages/faq.vue       |  2 +-
 Website/pages/index.vue     |  2 +-
 Website/pages/install.vue   |  2 +-
 Website/pages/links.vue     |  2 +-
 6 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index de5bc5a..8b1ac67 100644
--- a/Website/layouts/default.vue
+++ b/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;">
-
+            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,6 @@ html, body {
   display: none;
 }
 
-.topBar {
-  background-color: #222 !important;
-  border-radius: 12px;
-  width: fit-content !important;
-  padding: 0 50px;
-  border-radius: 1rem !important;
-  overflow: hidden;
-}
-
 .fly-in-from-top {
   opacity: 0;
   transform: scale(0.8) translateY(-200%);
@@ -66,14 +76,6 @@ html, body {
     transform: scale(1) translateY(0);
   }
 }
-/*
-@media (min-width: 1234px) { 
-  .topBar { 
-    width: 95%; 
-  } 
-}
-*/
-
 </style>
 
 <script>
diff --git a/Website/pages/donate.vue b/Website/pages/donate.vue
index 9176f31..66da5dc 100644
--- a/Website/pages/donate.vue
+++ b/Website/pages/donate.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     
-    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Donate</h1>
+    <h1 class="title-text" >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>
     <v-btn class="mainAltButton" :href="patreonLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-patreon</v-icon>
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index a7b2ad2..b7565af 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -2,7 +2,7 @@
   <div>
     
 
-    <h1 :style="$vuetify.breakpoint.xs ? 'font-size: 2rem;' : 'font-size: 3rem;'" >Frequently Asked Questions</h1>
+    <h1 class="title-text" >Frequently Asked Questions</h1>
     <p style="color: #999; margin-top: .5rem; margin-bottom: 2rem;">Still have questions? Feel free to join our Discord!</p>
 
     <v-expansion-panels focusable>
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index caa23fc..4175c76 100644
--- a/Website/pages/index.vue
+++ b/Website/pages/index.vue
@@ -3,7 +3,7 @@
 
     <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>
 
-    <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>
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index 580a459..1d5bf65 100644
--- a/Website/pages/install.vue
+++ b/Website/pages/install.vue
@@ -1,7 +1,7 @@
 <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>
diff --git a/Website/pages/links.vue b/Website/pages/links.vue
index 54e655c..27c0df5 100644
--- a/Website/pages/links.vue
+++ b/Website/pages/links.vue
@@ -1,7 +1,7 @@
 <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>