mirror of https://github.com/VueTubeApp/VueTube
update page text themed, install pages touchups
This commit is contained in:
parent
2b8fa311c0
commit
d584f1f047
|
@ -1,27 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<v-select
|
<v-select
|
||||||
v-model="selectedLang"
|
v-model="selectedLang"
|
||||||
background-color="background"
|
background-color="background"
|
||||||
:items="langs"
|
style="border-radius: 0.75rem"
|
||||||
label="App Language"
|
:menu-props="{
|
||||||
solo
|
bottom: true,
|
||||||
rounded
|
offsetY: true,
|
||||||
/>
|
rounded: 'lg',
|
||||||
|
nudgeTop: -8,
|
||||||
|
maxHeight: 228,
|
||||||
|
transition: 'slide-y-transition',
|
||||||
|
}"
|
||||||
|
label="App Language"
|
||||||
|
:items="langs"
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
|
||||||
<v-dialog v-model="restart" width="500">
|
<v-dialog v-model="restart" width="500">
|
||||||
<v-card class="rounded-lg" :class=" $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1' " >
|
<v-card
|
||||||
<v-card-title class="text-h5">{{ lang.global.restart }}</v-card-title>
|
class="rounded-lg"
|
||||||
<v-card-text>{{ lang.global.settingRestart }}</v-card-text>
|
:class="
|
||||||
<v-divider />
|
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||||
<v-card-actions>
|
"
|
||||||
<v-spacer></v-spacer>
|
>
|
||||||
<v-btn text @click="restart = false">{{ lang.global.later }}</v-btn>
|
<v-card-title class="text-h5">{{ lang.global.restart }}</v-card-title>
|
||||||
<v-btn color="primary" text @click="restartApp()">{{ lang.global.restart }}</v-btn>
|
<v-card-text>{{ lang.global.settingRestart }}</v-card-text>
|
||||||
</v-card-actions>
|
<v-divider />
|
||||||
</v-card>
|
<v-card-actions>
|
||||||
</v-dialog>
|
<v-spacer></v-spacer>
|
||||||
</div>
|
<v-btn text @click="restart = false">{{ lang.global.later }}</v-btn>
|
||||||
|
<v-btn color="primary" text @click="restartApp()">{{
|
||||||
|
lang.global.restart
|
||||||
|
}}</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -34,16 +49,15 @@ export default {
|
||||||
restart: false,
|
restart: false,
|
||||||
|
|
||||||
//--- Required To Prvent Initial Popup ---//
|
//--- Required To Prvent Initial Popup ---//
|
||||||
userChanged: false
|
userChanged: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
//--- Update Stored Language Value ---//
|
//--- Update Stored Language Value ---//
|
||||||
selectedLang: function (newVal) {
|
selectedLang: function (newVal) {
|
||||||
|
|
||||||
//--- Required To Prvent Initial Popup ---//
|
//--- Required To Prvent Initial Popup ---//
|
||||||
if (this.userChanged == false) return this.userChanged = true;
|
if (this.userChanged == false) return (this.userChanged = true);
|
||||||
|
|
||||||
//--- Change Lang Stuff ---//
|
//--- Change Lang Stuff ---//
|
||||||
const langs = this.$lang(null, true);
|
const langs = this.$lang(null, true);
|
||||||
|
@ -73,7 +87,7 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
restartApp() {
|
restartApp() {
|
||||||
this.$router.replace("/");
|
this.$router.replace("/");
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,22 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<center class="container" ref="stage0">
|
<center ref="stage0" class="container">
|
||||||
<v-img
|
<v-img
|
||||||
src="/icon.svg"
|
src="/icon.svg"
|
||||||
width="10rem"
|
width="10rem"
|
||||||
height="10rem"
|
height="10rem"
|
||||||
:class="$vuetify.theme.dark ? '' : 'invert'"
|
:class="$vuetify.theme.dark ? '' : 'invert'"
|
||||||
/>
|
/>
|
||||||
|
<div style="height: 3rem" />
|
||||||
<h1>{{ lang.welcome }}</h1>
|
<h1>{{ lang.welcome }}</h1>
|
||||||
<p>{{ lang.tagline }}</p>
|
<div>{{ lang.tagline }}</div>
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<center class="container hidden" ref="stage1">
|
<center ref="stage1" class="container hidden">
|
||||||
<h1>{{ lang.langsetup }}</h1>
|
<h2 class="mb-8">{{ lang.langsetup }}</h2>
|
||||||
<language style="width: 80%" />
|
<language style="width: 80%" />
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
<center class="container hidden" ref="stage2">
|
<center class="container hidden" ref="stage2">
|
||||||
<v-autocomplete
|
<v-autocomplete
|
||||||
label="API"
|
label="API"
|
||||||
|
@ -29,50 +30,47 @@
|
||||||
</center>
|
</center>
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<center class="container hidden" ref="stage2">
|
<center ref="stage2" class="container hidden">
|
||||||
<h1>{{ lang.featuresetup }}</h1>
|
<h2 class="mb-2">{{ lang.featuresetup }}</h2>
|
||||||
<v-checkbox disabled v-model="ryd" :label="lang.enableryd" />
|
<v-checkbox
|
||||||
<v-checkbox disabled v-model="sponsorBlock" :label="lang.enablespb" />
|
v-model="ryd"
|
||||||
|
:label="lang.enableryd"
|
||||||
|
style="width: 80%"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="sponsorBlock"
|
||||||
|
:label="lang.enablespb"
|
||||||
|
style="width: 80%"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
</center>
|
</center>
|
||||||
<center class="container hidden" ref="stage3">
|
<center ref="stage3" class="container hidden" style="width: 80%">
|
||||||
<h1>{{ lang.thanks }}</h1>
|
<h2 class="mb-2">💕</h2>
|
||||||
<h3>{{ lang.enjoy }}</h3>
|
<h2 class="mb-2">
|
||||||
|
{{ lang.thanks }}
|
||||||
|
</h2>
|
||||||
|
<h4>{{ lang.enjoy }}</h4>
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
<v-btn @click="next()" class="rounded-xl primary nextButton"
|
<v-btn
|
||||||
>{{ lang.next }}
|
class="primary nextButton"
|
||||||
<v-icon style="margin-left: 0.5em">mdi-arrow-right</v-icon></v-btn
|
style="border-radius: 0.75rem"
|
||||||
|
@click="next()"
|
||||||
>
|
>
|
||||||
|
{{ lang.next }}
|
||||||
|
<v-icon style="margin-left: 0.5em">mdi-arrow-right</v-icon>
|
||||||
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.nextButton {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1em;
|
|
||||||
right: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fullWidth {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import language from "~/components/Settings/language.vue";
|
import language from "~/components/Settings/language.vue";
|
||||||
export default {
|
export default {
|
||||||
layout: "empty",
|
|
||||||
components: {
|
components: {
|
||||||
language,
|
language,
|
||||||
},
|
},
|
||||||
|
layout: "empty",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
lang: {},
|
lang: {},
|
||||||
|
@ -80,7 +78,7 @@ export default {
|
||||||
|
|
||||||
ryd: true,
|
ryd: true,
|
||||||
sponsorBlock: true,
|
sponsorBlock: true,
|
||||||
apis: ["youtube.com", "twitch.tv", "odysee.com"]
|
apis: ["youtube.com", "twitch.tv", "odysee.com"],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -102,3 +100,24 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nextButton {
|
||||||
|
padding-right: 0.5rem !important;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullWidth {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="padding: 2em">
|
<div style="padding: 2rem; padding-bottom: 4rem">
|
||||||
<v-icon x-large color="primary" style="padding-bottom: 0.25em">
|
<v-icon x-large color="primary" style="padding-bottom: 0.25rem">
|
||||||
mdi-cellphone-arrow-down
|
mdi-cellphone-arrow-down
|
||||||
</v-icon>
|
</v-icon>
|
||||||
|
|
||||||
|
@ -48,7 +48,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div>{{ lang.latest }}: {{ latestVersion.tag_name }}</div>
|
<div>{{ lang.latest }}: {{ latestVersion.tag_name }}</div>
|
||||||
|
|
||||||
<div style="margin-top: 1em; color: #999">
|
<div
|
||||||
|
style="margin-top: 1em"
|
||||||
|
class="background--text"
|
||||||
|
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
{{ lang.published }}:
|
{{ lang.published }}:
|
||||||
{{ new Date(update.created_at).toLocaleString() }}
|
{{ new Date(update.created_at).toLocaleString() }}
|
||||||
|
@ -60,8 +64,18 @@
|
||||||
<div>{{ lang.users }}: {{ update.download_count }}</div>
|
<div>{{ lang.users }}: {{ update.download_count }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 1em; color: #999"><b>Changelog</b></div>
|
<div
|
||||||
<p style="white-space: pre-line; color: #999">
|
style="margin-top: 1em"
|
||||||
|
class="background--text"
|
||||||
|
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||||
|
>
|
||||||
|
<b>Changelog</b>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
style="white-space: pre-line"
|
||||||
|
class="background--text"
|
||||||
|
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||||
|
>
|
||||||
{{ latestVersion.body.trim() }}
|
{{ latestVersion.body.trim() }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue