scroll stretch disabled fixes #14, rounded app corners

This commit is contained in:
Nikita Krupin 2022-03-17 19:17:08 -04:00
parent 5743f1ef70
commit 1b8c0a963b
9 changed files with 89 additions and 24 deletions

View File

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

View File

@ -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,10 +119,15 @@ 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
const darkTheme = localStorage.getItem('darkTheme');
@ -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];

View File

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

View File

@ -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) {

View File

@ -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>

View File

@ -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;

View File

@ -5,7 +5,7 @@
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>VueTube</string>
<string>VueTube</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>

View File

@ -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

0
scripts/build.sh Normal file → Executable file
View File