This commit is contained in:
Troplo 2021-10-23 22:57:48 +11:00
parent 384d859a47
commit 7d9ac6ac7a
12 changed files with 144 additions and 24 deletions

View file

@ -14,13 +14,15 @@
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0"
"vuetify": "^2.5.10",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",

View file

@ -11,6 +11,19 @@ index ee4419a..6d1ba3d 100644
// Block
.v-navigation-drawer
diff --git a/node_modules/vuetify/src/styles/settings/_dark.scss b/node_modules/vuetify/src/styles/settings/_dark.scss
index 753d70d..12980cc 100644
--- a/node_modules/vuetify/src/styles/settings/_dark.scss
+++ b/node_modules/vuetify/src/styles/settings/_dark.scss
@@ -6,7 +6,7 @@ $material-dark-elevation-colors: () !default;
$material-dark-elevation-colors: map-deep-merge(
(
'0': #000000,
- '1': #1E1E1E,
+ '1': #151515,
'2': #222222,
'3': #252525,
'4': #272727,
diff --git a/node_modules/vuetify/src/styles/settings/_variables.scss b/node_modules/vuetify/src/styles/settings/_variables.scss
index f5cc26b..6b998f1 100644
--- a/node_modules/vuetify/src/styles/settings/_variables.scss

View file

@ -6,7 +6,43 @@
</v-main>
</v-app>
</template>
<style>
.troploGradient {
font-weight: 500;background: -webkit-radial-gradient(#0179f3, #0190ea);-webkit-background-clip: text;-webkit-text-fill-color: transparent
}
.theme--dark.v-sheet {
background-color: #151515 !important;
border-color: #151515 !important;
color: #FFFFFF;
}
.card {
overflow: hidden
}
.theme--dark.v-card {
background-color: #151515 !important;
}
/* Works on Firefox */
* {
scrollbar-width: thin;
scrollbar-color: black #151515;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: #0e0e0e;
}
*::-webkit-scrollbar-thumb {
background-color: #151515;
border-radius: 20px;
border: 3px solid #151515;
}
</style>
<script>
import Header from './components/Header.vue'
export default {
@ -17,5 +53,11 @@ export default {
data: () => ({
//
}),
watch: {
$route (to) {
this.$store.commit('setRoute', to.name)
document.title = to.name + ' - ' + this.$store.state.site.name
}
}
};
</script>

View file

@ -1,8 +1,13 @@
<template>
<div id="header">
<v-app-bar color="dark" floating app dense>
<v-app-bar-nav-icon v-if="$vuetify.breakpoint.mobile && $store.state.user.username" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>{{$store.state.site.route}}<v-app-bar-nav-icon disabled v-if="$store.state.site.release !== 'prod'">{{$store.state.site.release}}</v-app-bar-nav-icon></v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<v-navigation-drawer
floating
color="#1c1c1c"
color="dark"
app
expand>
<v-divider></v-divider>
@ -37,7 +42,7 @@ export default {
return {
items: [
{id: 1, title: "Home", icon: "mdi-home", path: "/"},
{id: 1, title: "Watch_Dogs Tools", icon: "mdi-nexus", path: "/"}
{id: 2, title: "Projects", icon: "mdi-text-box-multiple", path: "/projects"}
]
}
},

View file

@ -3,11 +3,13 @@ import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import vuetify from './plugins/vuetify'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
vuetify,
store,
render: h => h(App)
}).$mount('#app')

View file

@ -12,11 +12,12 @@ export default new Vuetify({
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
dark: "#151515",
text: "#000000"
},
dark: {
primary: colors.blue,
dark: "#1c1c1c",
dark: "#151515",
text: "#ffffff"
},
},

View file

@ -1,6 +1,5 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
@ -8,20 +7,29 @@ const routes = [
{
path: '/',
name: 'Home',
component: Home
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
path: '/projects',
name: 'Projects',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
component: () => import(/* webpackChunkName: "projects" */ '../views/Projects.vue')
},
{
path: '/nexus',
name: 'Nexus',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "nexus" */ '../views/Nexus.vue')
},
]
const router = new VueRouter({
routes
routes,
mode: "history"
})
export default router

24
ui/src/store/index.js Normal file
View file

@ -0,0 +1,24 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
site: {
route: ''
}
},
mutations: {
setSite(state, data) {
state.site = data
},
setRoute(state, data) {
state.site.route = data
}
},
actions: {
},
modules: {
}
})

View file

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

View file

@ -1,15 +1,11 @@
<template>
<hello-world />
<div id="home">
</div>
</template>
<script>
import HelloWorld from '../components/HelloWorld'
export default {
name: 'Home',
components: {
HelloWorld,
},
}
</script>
</script>

15
ui/src/views/Nexus.vue Normal file
View file

@ -0,0 +1,15 @@
<template>
<div id="nexus">
</div>
</template>
<script>
export default {
name: "Nexus"
}
</script>
<style scoped>
</style>

17
ui/src/views/Projects.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<div id="projects">
<v-container class="justify-center text-center">
<p class="text-h4">Projects</p>
</v-container>
</div>
</template>
<script>
export default {
name: "Projects"
}
</script>
<style scoped>
</style>