feat: admin dashboard (wip)
This commit is contained in:
parent
019537563e
commit
01f43bfaa5
@ -1,19 +1,79 @@
|
|||||||
<template lang='pug'>
|
<template lang='pug'>
|
||||||
v-container(fluid, fill-height)
|
v-card(tile, flat :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
|
||||||
v-layout(row wrap)
|
.pa-3.pt-4
|
||||||
v-flex(xs12)
|
.headline.primary--text {{ $t('admin:dashboard.title') }}
|
||||||
.headline.primary--text {{ $t('admin:dashboard.title') }}
|
.subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
|
||||||
.subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
|
v-container(fluid, grid-list-lg)
|
||||||
|
v-layout(row, wrap)
|
||||||
|
v-flex(xs12 md6 lg4 xl3 d-flex)
|
||||||
|
v-card.primary(dark)
|
||||||
|
v-card-text
|
||||||
|
v-icon.dashboard-icon insert_drive_file
|
||||||
|
.subheading Pages
|
||||||
|
animated-number.display-1(
|
||||||
|
:value='357'
|
||||||
|
:duration='2000'
|
||||||
|
:formatValue='round'
|
||||||
|
easing='easeOutQuint'
|
||||||
|
)
|
||||||
|
v-flex(xs12 md6 lg4 xl3 d-flex)
|
||||||
|
v-card.indigo.lighten-1(dark)
|
||||||
|
v-card-text
|
||||||
|
v-icon.dashboard-icon person
|
||||||
|
.subheading Users
|
||||||
|
animated-number.display-1(
|
||||||
|
:value='34'
|
||||||
|
:duration='2000'
|
||||||
|
:formatValue='round'
|
||||||
|
easing='easeOutQuint'
|
||||||
|
)
|
||||||
|
v-flex(xs12 md6 lg4 xl3 d-flex)
|
||||||
|
v-card.indigo.lighten-2(dark)
|
||||||
|
v-card-text
|
||||||
|
v-icon.dashboard-icon people
|
||||||
|
.subheading Groups
|
||||||
|
animated-number.display-1(
|
||||||
|
:value='5'
|
||||||
|
:duration='2000'
|
||||||
|
:formatValue='round'
|
||||||
|
easing='easeOutQuint'
|
||||||
|
)
|
||||||
|
v-flex(xs12 md6 lg12 xl3 d-flex)
|
||||||
|
v-card.teal.lighten-2(dark)
|
||||||
|
v-card-text
|
||||||
|
v-icon.dashboard-icon blur_on
|
||||||
|
.subheading Wiki.js 2.0.0
|
||||||
|
.body-2 You are running the latest version.
|
||||||
|
v-flex(xs12)
|
||||||
|
v-card
|
||||||
|
v-card-text ---
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import AnimatedNumber from 'animated-number-vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
AnimatedNumber
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
round(val) { return Math.round(val) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
|
|
||||||
|
.dashboard-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 12px;
|
||||||
|
font-size: 120px;
|
||||||
|
opacity: .25;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
19
package.json
19
package.json
@ -153,6 +153,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@panter/vue-i18next": "0.12.0",
|
"@panter/vue-i18next": "0.12.0",
|
||||||
"@vue/cli": "3.0.0",
|
"@vue/cli": "3.0.0",
|
||||||
|
"animated-number-vue": "0.1.3",
|
||||||
"apollo-cache-inmemory": "1.2.7",
|
"apollo-cache-inmemory": "1.2.7",
|
||||||
"apollo-client": "2.3.8",
|
"apollo-client": "2.3.8",
|
||||||
"apollo-fetch": "0.7.0",
|
"apollo-fetch": "0.7.0",
|
||||||
@ -200,10 +201,7 @@
|
|||||||
"html-webpack-pug-plugin": "0.3.0",
|
"html-webpack-pug-plugin": "0.3.0",
|
||||||
"i18next-xhr-backend": "1.5.1",
|
"i18next-xhr-backend": "1.5.1",
|
||||||
"ignore-loader": "0.1.2",
|
"ignore-loader": "0.1.2",
|
||||||
"jest": "23.5.0",
|
|
||||||
"jest-junit": "5.1.0",
|
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
"lodash-webpack-plugin": "0.11.5",
|
|
||||||
"mini-css-extract-plugin": "0.4.1",
|
"mini-css-extract-plugin": "0.4.1",
|
||||||
"node-sass": "4.9.3",
|
"node-sass": "4.9.3",
|
||||||
"offline-plugin": "5.0.5",
|
"offline-plugin": "5.0.5",
|
||||||
@ -268,21 +266,6 @@
|
|||||||
"Firefox ESR",
|
"Firefox ESR",
|
||||||
"not ie < 11"
|
"not ie < 11"
|
||||||
],
|
],
|
||||||
"jest": {
|
|
||||||
"testResultsProcessor": "./node_modules/jest-junit",
|
|
||||||
"collectCoverage": false,
|
|
||||||
"testMatch": [
|
|
||||||
"**/test/**/*.js?(x)",
|
|
||||||
"**/?(*.)(spec|test).js?(x)"
|
|
||||||
],
|
|
||||||
"verbose": true
|
|
||||||
},
|
|
||||||
"jest-junit": {
|
|
||||||
"suiteName": "jest test",
|
|
||||||
"output": "./test-results/junit.xml",
|
|
||||||
"classNameTemplate": "{classname}-{title}",
|
|
||||||
"titleTemplate": "{classname}-{title}"
|
|
||||||
},
|
|
||||||
"postcss": {
|
"postcss": {
|
||||||
"plugins": {
|
"plugins": {
|
||||||
"autoprefixer": {},
|
"autoprefixer": {},
|
||||||
|
11
yarn.lock
11
yarn.lock
@ -786,6 +786,17 @@ amp@0.3.1, amp@~0.3.1:
|
|||||||
version "0.3.1"
|
version "0.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/amp/-/amp-0.3.1.tgz#6adf8d58a74f361e82c1fa8d389c079e139fc47d"
|
resolved "https://registry.yarnpkg.com/amp/-/amp-0.3.1.tgz#6adf8d58a74f361e82c1fa8d389c079e139fc47d"
|
||||||
|
|
||||||
|
animated-number-vue@0.1.3:
|
||||||
|
version "0.1.3"
|
||||||
|
resolved "https://registry.yarnpkg.com/animated-number-vue/-/animated-number-vue-0.1.3.tgz#dcb69b512dd1864358debc6ae2322223848429c5"
|
||||||
|
dependencies:
|
||||||
|
animejs "^2.2.0"
|
||||||
|
vue "^2.5.13"
|
||||||
|
|
||||||
|
animejs@^2.2.0:
|
||||||
|
version "2.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/animejs/-/animejs-2.2.0.tgz#35eefdfc535b81949c9cb06f0b3e60c02e6fdc80"
|
||||||
|
|
||||||
ansi-align@^2.0.0:
|
ansi-align@^2.0.0:
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
|
resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
|
||||||
|
Loading…
Reference in New Issue
Block a user