proto
This commit is contained in:
parent
384d859a47
commit
7d9ac6ac7a
12 changed files with 144 additions and 24 deletions
|
@ -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",
|
||||
|
|
|
@ -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
|
|
@ -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>
|
||||
|
|
|
@ -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"}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
},
|
||||
|
|
|
@ -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
24
ui/src/store/index.js
Normal 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: {
|
||||
}
|
||||
})
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
|
@ -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
15
ui/src/views/Nexus.vue
Normal 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
17
ui/src/views/Projects.vue
Normal 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>
|
Loading…
Reference in a new issue