minor fixes

This commit is contained in:
Nikita Krupin 2022-05-05 00:28:51 -04:00
parent 199b6041c0
commit bdab7b503d
7 changed files with 77 additions and 44 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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