etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

scroll bugfix, slight tweaks, light theme toolbar color options

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

27
NUXT/layouts/default.vue
View File

@ -1,13 +1,13 @@
<template>
<v-app class="background">
<v-card class="topNav rounded-0" style="display: flex;" color="accent white--text">
<v-app>
<v-card class="topNav rounded-0" style="display: flex; box-shadow: none !important;" color="accent white--text">
<h2 v-text="page" />
<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 }">
<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>
<v-list>
<v-list-item v-for="(item, index) in dropdownMenu" :key="index">
@ -17,12 +17,14 @@
</v-menu>
</v-card>
<div class="background" style="min-height: 100%">
<nuxt />
<div class="accent" style="height: 100%">
<div class="background" style="height: 100%; border-radius: 1rem 1rem 0 0;">
<nuxt />
</div>
</div>
<v-bottom-navigation v-model="tabSelection" shift class="bottomNav background rounded-0">
<v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link">
<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" rounded class="navButton mx-2" style="height: 3rem; border-radius: 2rem;" :to="item.link">
<span v-text="item.name" />
<v-icon v-text="item.icon" :color="tabSelection == i ? 'primary' : 'grey'" />
@ -46,14 +48,15 @@
}
.topNav {
padding: 1em;
padding: 1rem;
}
.bottomNav {
position: absolute;
position: fixed;
bottom: 0;
}
.navButton {
width: 20vw !important;
width: 25vw !important;
font-size: .66rem !important;
}
.topNavSearch {
margin-bottom: -10em;

4
NUXT/nuxt.config.js
View File

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

17
NUXT/pages/settings.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="mainContainer">
<div class="mainContainer pt-1">
<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-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-card>
@ -40,6 +48,13 @@
<script>
export default {
methods: {
nored () {
this.$vuetify.theme.themes.light.accent === '#888' ? (
this.$vuetify.theme.themes.light.accent = '#e00'
) : (
this.$vuetify.theme.themes.light.accent = '#888'
)
},
amoled () {
this.$vuetify.theme.themes.dark.background === '#000000' ? (
this.$vuetify.theme.themes.dark.accent = '#444444',