scroll stretch disabled fixes #14, rounded app corners

NUXT/components/bottomNavigation.vue

@@ -31,6 +31,8 @@ export default {
 
 <style scoped>
 .bottomNav {
+  box-shadow: none !important;
+  height: 4rem !important;
   position: fixed;
   bottom: 0;
   padding: 0 !important;

NUXT/layouts/default.vue

@@ -1,6 +1,13 @@
 <template>
-  <v-app>
-    <v-card class="topNav rounded-0" style="display: flex; box-shadow: none !important;" color="accent white--text">
+  <v-app style="background: black !important;">
+    <v-card
+      :style="{
+        borderRadius: roblox ? '0rem' : '1rem 1rem 0px 0px !important'
+      }" 
+      style="height: 4rem !important; display: flex; box-shadow: none !important;"
+      color="accent white--text"
+      class="topNav rounded-0"
+      >
       <h2 v-text="page" v-show="!search" />
 
       <v-text-field
@@ -15,32 +22,38 @@
       <v-spacer />
 
       <v-btn text class="toolbarAction mr-2 fill-height" color="white" @click="search = !search"><v-icon>mdi-magnify</v-icon></v-btn>
-
       <v-btn text class="toolbarAction fill-height" color="white" v-show="!search" to="/settings"><v-icon>mdi-dots-vertical</v-icon></v-btn>
 
     </v-card>
 
 
-    <div class="accent" style="height: 100%">
-      <div class="background">
+    <div style="height: calc(100vh - 8rem); margin-top: 4rem; background: linear-gradient(var(--v-accent-base) 0%, var(--v-accent2-base) 100%)">
+      <div 
+        class="background scroll-y" 
+        style="padding: 0;"
+        :style="{
+          borderRadius: roblox ? '0rem' : '1rem'
+        }"
+      >
+
         <nuxt v-show="!search" />
-
-
         <div style="min-width: 180px;" v-if="search">
           <v-list-item v-for="(item, index) in response" :key="index">
             <v-btn text dense class="info--text searchButton text-left" @click="youtubeSearch(item)" v-text="item[0]" />
           </v-list-item>
         </div>
 
-
       </div>
     </div>
 
-    <bottomNavigation v-if="!search" />
+    <bottomNavigation v-if="!search"
+      :style="{
+        borderRadius: roblox ? '0rem' : '0 0 1rem 1rem !important'
+      }"
+    />
 
     <updateChecker />
 
-
   </v-app>
 </template>
 
@@ -48,8 +61,13 @@
 * {
   font-family: Arial, Helvetica, sans-serif !important;
 }
+.scroll-y {
+  overflow-y: scroll !important; /* has to be scroll, not auto */
+  -webkit-overflow-scrolling: touch !important;
+}
 html, body {
-  overflow-x: hidden;
+  background: black;
+  overflow: hidden;
 }
 
 p, span, div {
@@ -101,9 +119,14 @@ export default {
 
     text: null,
     response: [],
+    roblox: false,
   }),
 
   mounted() {
+    //---   Load Saved Radius  ---//
+    setInterval(() => { // im sorry I'll fix this later
+      this.roblox = localStorage.getItem("roblox") == "true";
+    }, 1000);
     
     //---   Load Saved Theme   ---//
     setTimeout(() => { //Set timeout is required to make it load properly... dont ask me why -Front
@@ -141,6 +164,10 @@ export default {
     });
   },
   computed: {
+    // TODO: says localStorage is undefined, idk why 😭
+    // roblox () {
+    //     return localStorage.getItem("roblox") === null ? false : localStorage.getItem("roblox")
+    // },
     page: function () {
       const splitPath = this.$route.path.split("/");
       let pageName = splitPath[splitPath.length-1];

NUXT/nuxt.config.js

@@ -56,6 +56,7 @@ export default {
     customVariables: ['~/assets/variables.scss'],
     theme: {
       dark: false,
+      options: { customProperties: true },
       themes: {
         light: {
           primary: colors.red.lighten2,

NUXT/pages/mods/theme.vue

@@ -1,6 +1,22 @@
 <template>
   <div class="mainContainer pt-1">
 
+      <v-card class="pb-5">
+      <v-card-title>Rounded Corners</v-card-title>
+      <v-row class="ml-3 mr-6">
+        <section class="row">
+          <v-switch
+            v-model="roblox"
+            label="Roblox"
+            hint="If you want UI to look like Minecraft"
+            persistent-hint
+            inset
+            @click="saveRadius(roblox)"
+          />
+        </section>
+      </v-row>
+    </v-card>
+
     <v-card class="pb-5">
       <v-card-title>Global Base Color</v-card-title>
       <v-row class="ml-3 mr-6">
@@ -44,12 +60,14 @@ export default {
 
   data() {
     return {
-      accentColor: '#ffffff'
+      accentColor: '#ffffff',
+      roblox: false,
     }
   },
 
   mounted() {
     this.accentColor = this.$vuetify.theme.themes.dark.primary;
+    this.roblox = localStorage.getItem('roblox') === 'true';
   },
 
   methods: {
@@ -71,12 +89,27 @@ export default {
       // console.log(document.getElementsByClassName('v-application--wrap')[0].style)
       // document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
     },
-
     saveTheme(isDark) {
       localStorage.setItem("darkTheme", isDark);
     },
+    saveRadius(value) {
+      localStorage.setItem("roblox", value);
+    },
 
   },
+  computed: {
+    // 😩
+    // roblox: {
+    //   get () {
+    //     return localStorage.getItem("roblox") === 'true'
+    //   },
+    //   set (value) {
+          // if(process.client) {
+    //      localStorage.setItem("roblox", value)
+          // }
+    //   }
+    // }
+  },
 
   watch: {
     accentColor: function (val, oldVal) {

android/.idea/misc.xml

@@ -8,5 +8,5 @@
     </option>
   </component>
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" project-jdk-name="11" project-jdk-type="JavaSDK" />
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK" />
 </project>

ios/App/App.xcodeproj/project.pbxproj

@@ -346,11 +346,12 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_TEAM = VRCJ7YWR89;
 				INFOPLIST_FILE = App/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.2;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.youtube;
+				PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
@@ -364,10 +365,11 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
+				DEVELOPMENT_TEAM = VRCJ7YWR89;
 				INFOPLIST_FILE = App/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.2;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.youtube;
+				PRODUCT_BUNDLE_IDENTIFIER = com.Frontesque.vuetube;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;

ios/App/Podfile

@@ -9,10 +9,10 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
-  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
-  pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
-  pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
+  pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
+  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
 end
 
 target 'App' do