mirror of
https://github.com/VueTubeApp/VueTube
synced 2025-01-03 14:11:08 +00:00
minor fixes
This commit is contained in:
parent
199b6041c0
commit
bdab7b503d
7 changed files with 77 additions and 44 deletions
|
@ -75,6 +75,7 @@ export default {
|
|||
<style scoped>
|
||||
.bottomNav {
|
||||
/* box-shadow: inset 0 1rem 10rem var(--v-background-base) !important; */
|
||||
box-shadow: none !important;
|
||||
/* ios gesture nav */
|
||||
bottom: env(safe-area-inset-bottom) !important;
|
||||
height: 4rem !important;
|
||||
|
|
|
@ -114,6 +114,7 @@ export default {
|
|||
<style scoped>
|
||||
.topNav {
|
||||
/* box-shadow: inset 0 1rem 10rem var(--v-background-base) !important; */
|
||||
box-shadow: none !important;
|
||||
/* ios notch */
|
||||
top: env(safe-area-inset-top) !important;
|
||||
position: fixed;
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
@scroll-to-top="$refs.pgscroll.scrollTop = 0"
|
||||
/>
|
||||
|
||||
<div style="height: 100%; margin-top: 4rem">
|
||||
<div style="height: 100%; margin-top: 4rem; padding-bottom: 4rem">
|
||||
<div v-show="!search">
|
||||
<!-- class="scrollcontainer" -->
|
||||
<!-- style="overflow: hidden; height: calc(100vh - 8rem)" -->
|
||||
|
@ -56,7 +56,6 @@
|
|||
</v-app>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { App as CapacitorApp } from "@capacitor/app";
|
||||
import { mapState } from "vuex";
|
||||
|
@ -94,7 +93,7 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.$vuetube.resetBackActions();
|
||||
if (!process.browser) this.$vuetube.resetBackActions();
|
||||
|
||||
// --- External URL Handling --- //
|
||||
CapacitorApp.addListener("appUrlOpen", (event) => {
|
||||
|
|
|
@ -22,6 +22,9 @@ import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
|
|||
import Observer from "~/components/observer.vue";
|
||||
export default {
|
||||
components: { horizontalListRenderer, VidLoadRenderer, Observer },
|
||||
data: () => ({
|
||||
loading: false,
|
||||
}),
|
||||
|
||||
computed: {
|
||||
recommends: {
|
||||
|
@ -33,11 +36,6 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
loading: false,
|
||||
}),
|
||||
|
||||
methods: {
|
||||
paginate() {
|
||||
this.loading = true;
|
||||
|
|
|
@ -1,20 +1,30 @@
|
|||
<template>
|
||||
<div style="padding: 1em">
|
||||
<div style="padding: 1rem">
|
||||
<center>
|
||||
<div class="row pa-4" style="flex-direction: column">
|
||||
<div>
|
||||
<v-img
|
||||
src="/icon.svg"
|
||||
width="100px"
|
||||
:class="$vuetify.theme.dark ? '' : 'invert'"
|
||||
/>
|
||||
<div class="d-flex justify-center pa-4">
|
||||
<div>
|
||||
<v-img
|
||||
width="27px"
|
||||
src="/icon.svg"
|
||||
style="transform: rotate(90deg); filter: drop-shadow(0.1px 0.1px 0px #fff) drop-shadow(0.1px -0.1px 0px #fff);"
|
||||
:class="$vuetify.theme.dark ? '' : 'invert'"
|
||||
/>
|
||||
</div>
|
||||
<h1 style="font-size: 2rem; margin-left: -1px; margin-top: -9px">
|
||||
ueTube
|
||||
</h1>
|
||||
</div>
|
||||
<h1 class="pageTitle mb-3">VueTube</h1>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
<!-- App Information -->
|
||||
<v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
|
||||
<v-card
|
||||
flat
|
||||
class="obj"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||
"
|
||||
:style="{ borderRadius: `${roundTweak / 2}rem` }"
|
||||
>
|
||||
<v-card-title>App Information</v-card-title>
|
||||
<v-card-text>
|
||||
<h3>App Version</h3>
|
||||
|
@ -24,17 +34,26 @@
|
|||
<!-- End App Information -->
|
||||
|
||||
<!-- Device Information -->
|
||||
<v-card class="obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
|
||||
<v-card
|
||||
flat
|
||||
class="obj"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||
"
|
||||
:style="{ borderRadius: `${roundTweak / 2}rem` }"
|
||||
>
|
||||
<v-card-title>Device Information</v-card-title>
|
||||
<v-card-text>
|
||||
<h3>Platform</h3>
|
||||
{{ deviceInfo.platform || "Unknown" }}<br>
|
||||
{{ deviceInfo.platform || "Unknown" }}<br />
|
||||
<h3>Operating System</h3>
|
||||
{{ deviceInfo.operatingSystem || "Unknown" }} ({{ deviceInfo.osVersion || "Unknown" }})<br>
|
||||
{{ deviceInfo.operatingSystem || "Unknown" }} ({{
|
||||
deviceInfo.osVersion || "Unknown"
|
||||
}})<br />
|
||||
<h3>Model</h3>
|
||||
{{ deviceInfo.model || "Unknown" }}<br>
|
||||
{{ deviceInfo.model || "Unknown" }}<br />
|
||||
<h3>Manufacturer</h3>
|
||||
{{ deviceInfo.manufacturer || "Unknown" }}<br>
|
||||
{{ deviceInfo.manufacturer || "Unknown" }}<br />
|
||||
<h3>Emulator</h3>
|
||||
{{ deviceInfo.isVirtual ? "yes" : "no" }}
|
||||
</v-card-text>
|
||||
|
@ -42,17 +61,32 @@
|
|||
<!-- End Device Information -->
|
||||
|
||||
<!-- App Links --->
|
||||
<div class="obj">
|
||||
<v-btn @click="openExternal('https://github.com/Frontesque/VueTube')" class="action" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
|
||||
<div class="obj d-flex flex-row gap-1">
|
||||
<v-btn
|
||||
depressed
|
||||
class="action col"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||
"
|
||||
:style="{ borderRadius: `${roundTweak / 2}rem` }"
|
||||
@click="openExternal('https://github.com/Frontesque/VueTube')"
|
||||
>
|
||||
<v-icon x-large class="actionIcon">mdi-github</v-icon>
|
||||
Github
|
||||
</v-btn>
|
||||
<v-btn @click="openExternal('https://discord.gg/7P8KJrdd5W')" class="action obj" :class="$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'" :style="{borderRadius: `${roundTweak / 2}rem`}">
|
||||
<v-btn
|
||||
depressed
|
||||
class="action col ml-4"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||
"
|
||||
:style="{ borderRadius: `${roundTweak / 2}rem` }"
|
||||
@click="openExternal('https://discord.gg/7P8KJrdd5W')"
|
||||
>
|
||||
<v-icon x-large class="actionIcon">mdi-discord</v-icon>
|
||||
Discord
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -61,19 +95,17 @@ import { Browser } from "@capacitor/browser";
|
|||
import { Device } from "@capacitor/device";
|
||||
|
||||
export default {
|
||||
|
||||
computed: {
|
||||
roundTweak() {
|
||||
return this.$store.state.tweaks.roundTweak;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
version: process.env.appVersion,
|
||||
deviceInfo: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
roundTweak() {
|
||||
return this.$store.state.tweaks.roundTweak;
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const info = await Device.getInfo();
|
||||
|
@ -88,16 +120,12 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pageTitle {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.obj {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.action {
|
||||
min-width: 100% !important;
|
||||
min-height: 5em;
|
||||
padding: 0 !important;
|
||||
padding: 1rem;
|
||||
}
|
||||
.actionIcon {
|
||||
margin-right: 0.5em;
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<client-only>
|
||||
<div class="d-flex flex-column justify-end" style="min-height: 100%">
|
||||
<div
|
||||
class="d-flex flex-column justify-end"
|
||||
style="min-height: calc(100vh - 8rem)"
|
||||
>
|
||||
<!-- ----------------------------------------------Background Colors------------------------ -->
|
||||
<v-radio-group v-model="$vuetify.theme.currentTheme.background">
|
||||
<div
|
||||
|
@ -103,7 +106,7 @@
|
|||
<!-- ----------------------------------------------Mode Switch------------------------ -->
|
||||
<v-card
|
||||
flat
|
||||
class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
|
||||
class="d-flex flex-row justify-between mx-8 mb-8 px-4 background rounded-lg"
|
||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
@click="
|
||||
($vuetify.theme.dark = !$vuetify.theme.dark),
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="d-flex flex-column justify-end" style="min-height: 100%">
|
||||
<div
|
||||
class="d-flex flex-column justify-end"
|
||||
style="min-height: calc(100vh - 8rem)"
|
||||
>
|
||||
<v-card
|
||||
flat
|
||||
class="mb-4 background"
|
||||
|
@ -38,9 +41,9 @@
|
|||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0',
|
||||
}"
|
||||
>
|
||||
<!-- margin: $store.state.tweaks.roundTweak > 0 ? '0 1rem' : '0', -->
|
||||
<h3 class="mt-5">Rounded Corners</h3>
|
||||
<div
|
||||
class="background--text"
|
||||
|
|
Loading…
Reference in a new issue