mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-22 03:05:15 +00:00
scroll bugfix, slight tweaks, light theme toolbar color options
This commit is contained in:
parent
42287c41df
commit
8a710e1a9e
3 changed files with 33 additions and 15 deletions
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue