etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-25 20:55:17 +00:00
Code Issues Projects Releases Wiki Activity

feat: ✨ Update About Page

Browse source 
About page now uses material you :)
This commit is contained in:
Kenny 2022-04-06 12:08:43 -04:00
parent 98820a04ab
commit c92c914769
1 changed files with 60 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
NUXT/pages/mods/about.vue
View file

@ -1,5 +1,6 @@
<template>
<center style="padding: 1em">
<div style="padding: 1em">
<center>
<div class="row pa-4" style="flex-direction: column">
<div>
<v-img
@ -8,28 +9,48 @@
:class="$vuetify.theme.dark ? '' : 'invert'"
/>
</div>
<v-spacer />
<div>
<h1 class="pageTitle mb-3">VueTube</h1>
<v-btn @click="openExternal('https://github.com/Frontesque/VueTube')"
><v-icon>mdi-github</v-icon></v-btn
>
<v-btn @click="openExternal('https://discord.gg/7P8KJrdd5W')"
><v-icon>mdi-discord</v-icon></v-btn
>
</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-title>App Information</v-card-title>
<v-card-text>App Version: {{ version.substring(0, 7) }}</v-card-text>
</v-card>
<!-- 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-title>Device Information</v-card-title>
<v-card-text>
<h3>Platform</h3>
{{ deviceInfo.platform || "Unknown" }}<br>
<h3>Operating System</h3>
{{ deviceInfo.operatingSystem || "Unknown" }} ({{ deviceInfo.osVersion || "Unknown" }})<br>
<h3>Model</h3>
{{ deviceInfo.model || "Unknown" }}<br>
<h3>Manufacturer</h3>
{{ deviceInfo.manufacturer || "Unknown" }}<br>
<h3>Emulator</h3>
{{ deviceInfo.isVirtual ? "yes" : "no" }}
</v-card-text>
</v-card>
<!-- 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`}">
<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-icon x-large class="actionIcon">mdi-discord</v-icon>
Discord
</v-btn>
</div>
<h3 style="margin-top: 2em">App Information</h3>
<div>App Version: {{ version.substring(0, 7) }}</div>
<h3 style="margin-top: 1em">Device Information</h3>
<div>Platform: {{ deviceInfo.platform }}</div>
<div>OS: {{ deviceInfo.operatingSystem }} ({{ deviceInfo.osVersion }})</div>
<div>Model: {{ deviceInfo.model }}</div>
<div>Manufacturer: {{ deviceInfo.manufacturer }}</div>
<div>Emulator: {{ deviceInfo.isVirtual ? "yes" : "no" }}</div>
</center>
</div>
</template>
<script>
@ -37,6 +58,13 @@ 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,
@ -60,4 +88,15 @@ export default {
.pageTitle {
margin-bottom: 1em;
}
.obj {
margin-top: 1em;
}
.action {
min-width: 100% !important;
min-height: 5em;
padding: 0 !important;
}
.actionIcon {
margin-right: 0.5em;
}
</style>