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

scroll bugfix, slight tweaks, light theme toolbar color options

Browse source
This commit is contained in:
Nikita Krupin 2022-02-24 23:45:17 -05:00
parent 42287c41df
commit 8a710e1a9e
3 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
NUXT/layouts/default.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<v-app class="background"> <v-app>
<v-card class="topNav rounded-0" style="display: flex;" color="accent white--text"> <v-card class="topNav rounded-0" style="display: flex; box-shadow: none !important;" color="accent white--text">
<h2 v-text="page" /> <h2 v-text="page" />
<v-spacer /> <v-spacer />
<v-btn text class="toolbarAction" color="white"><v-icon>mdi-magnify</v-icon></v-btn> <v-btn text class="toolbarAction mr-2 fill-height" color="white" style="padding-right: 0 !important;"><v-icon>mdi-magnify</v-icon></v-btn>
<v-menu offset-y content-class="mt-4"> <v-menu offset-y content-class="mt-8">
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn text class="toolbarAction" v-bind="attrs" v-on="on" color="white" style="padding-right: 0 !important;"><v-icon>mdi-dots-vertical</v-icon></v-btn> <v-btn text class="toolbarAction fill-height" v-bind="attrs" v-on="on" color="white" style="padding-right: 0 !important;"><v-icon>mdi-dots-vertical</v-icon></v-btn>
</template> </template>
<v-list> <v-list>
<v-list-item v-for="(item, index) in dropdownMenu" :key="index"> <v-list-item v-for="(item, index) in dropdownMenu" :key="index">
@ -17,12 +17,14 @@
</v-menu> </v-menu>
</v-card> </v-card>
<div class="background" style="min-height: 100%"> <div class="accent" style="height: 100%">
<div class="background" style="height: 100%; border-radius: 1rem 1rem 0 0;">
<nuxt /> <nuxt />
</div> </div>
</div>
<v-bottom-navigation v-model="tabSelection" shift class="bottomNav background rounded-0"> <v-bottom-navigation v-model="tabSelection" shift class="bottomNav py-4 background" style="height: 5rem;">
<v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link"> <v-btn v-for="(item, i) in tabs" :key="i" rounded class="navButton mx-2" style="height: 3rem; border-radius: 2rem;" :to="item.link">
<span v-text="item.name" /> <span v-text="item.name" />
<v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" /> <v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" />
@ -46,14 +48,15 @@
} }
.topNav { .topNav {
padding: 1em; padding: 1rem;
} }
.bottomNav { .bottomNav {
position: absolute; position: fixed;
bottom: 0; bottom: 0;
} }
.navButton { .navButton {
width: 20vw !important; width: 25vw !important;
font-size: .66rem !important;
} }
.topNavSearch { .topNavSearch {
margin-bottom: -10em; margin-bottom: -10em;

4
NUXT/nuxt.config.js
View file

@ -44,13 +44,13 @@ export default {
dark: false, dark: false,
themes: { themes: {
light: { light: {
background: colors.white, background: "#ffffff",
primary: colors.red.lighten1, primary: colors.red.lighten1,
accent: "#E62117", accent: "#E62117",
info: "#000" info: "#000"
}, },
dark: { dark: {
background: colors.grey.darken9, background: "#444444",
primary: colors.red.darken2, //colors.blue.darken2 primary: colors.red.darken2, //colors.blue.darken2
accent: colors.grey.darken3, accent: colors.grey.darken3,
secondary: colors.amber.darken3, secondary: colors.amber.darken3,

17
NUXT/pages/settings.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mainContainer"> <div class="mainContainer pt-1">
<v-card class="pb-5"> <v-card class="pb-5">
@ -22,6 +22,14 @@
}} }}
<v-icon :size="this.$vuetify.theme.themes.dark.background === '#000000' ? '.5rem' : '.9rem'" class="ml-2">mdi-brightness-2</v-icon> <v-icon :size="this.$vuetify.theme.themes.dark.background === '#000000' ? '.5rem' : '.9rem'" class="ml-2">mdi-brightness-2</v-icon>
</v-btn> </v-btn>
<v-btn v-else text tile class="white--text red" @click="nored" >
{{
this.$vuetify.theme.themes.light.accent === '#888'
? 'RED'
: 'EWW'
}}
<v-icon :size="this.$vuetify.theme.themes.light.accent === '#888' ? '.5rem' : '.9rem'" class="ml-2">mdi-brightness-1</v-icon>
</v-btn>
</v-row> </v-row>
</v-card> </v-card>
@ -40,6 +48,13 @@
<script> <script>
export default { export default {
methods: { methods: {
nored () {
this.$vuetify.theme.themes.light.accent === '#888' ? (
this.$vuetify.theme.themes.light.accent = '#e00'
) : (
this.$vuetify.theme.themes.light.accent = '#888'
)
},
amoled () { amoled () {
this.$vuetify.theme.themes.dark.background === '#000000' ? ( this.$vuetify.theme.themes.dark.background === '#000000' ? (
this.$vuetify.theme.themes.dark.accent = '#444444', this.$vuetify.theme.themes.dark.accent = '#444444',