Sharkey/src/client/app/desktop/views/pages/admin/admin.vue

122 lines
2.2 KiB
Vue
Raw Normal View History

2018-08-13 19:05:58 +03:00
<template>
2018-08-13 22:30:42 +03:00
<div class="mk-admin">
2018-08-13 19:05:58 +03:00
<nav>
<ul>
2018-08-13 22:30:42 +03:00
<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:chalkboard .fw%%i18n:@dashboard%</li>
2018-08-14 22:44:39 +03:00
<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
2018-08-13 22:39:37 +03:00
<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:@drive%</li> -->
2018-08-13 22:30:42 +03:00
<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
2018-08-13 19:05:58 +03:00
</ul>
</nav>
<main>
2018-08-17 22:52:06 +03:00
<div v-show="page == 'dashboard'">
2018-08-13 19:05:58 +03:00
<x-dashboard/>
2018-08-17 21:52:24 +03:00
<x-users-chart/>
<x-notes-chart/>
2018-08-13 19:05:58 +03:00
</div>
<div v-if="page == 'users'">
<x-suspend-user/>
2018-08-15 00:50:49 +03:00
<x-unsuspend-user/>
2018-08-17 15:40:08 +03:00
<x-verify-user/>
2018-08-13 19:05:58 +03:00
</div>
2018-08-13 22:30:42 +03:00
<div v-if="page == 'drive'"></div>
2018-08-13 19:05:58 +03:00
<div v-if="page == 'update'"></div>
</main>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import XDashboard from "./admin.dashboard.vue";
import XSuspendUser from "./admin.suspend-user.vue";
2018-08-15 00:50:49 +03:00
import XUnsuspendUser from "./admin.unsuspend-user.vue";
2018-08-17 15:40:08 +03:00
import XVerifyUser from "./admin.verify-user.vue";
2018-08-17 21:52:24 +03:00
import XUsersChart from "./admin.users-chart.vue";
import XNotesChart from "./admin.notes-chart.vue";
2018-08-13 19:05:58 +03:00
export default Vue.extend({
2018-08-13 19:24:46 +03:00
components: {
2018-08-13 19:05:58 +03:00
XDashboard,
2018-08-15 00:50:49 +03:00
XSuspendUser,
2018-08-17 15:40:08 +03:00
XUnsuspendUser,
2018-08-17 21:52:24 +03:00
XVerifyUser,
XUsersChart,
XNotesChart
2018-08-13 19:35:36 +03:00
},
data() {
return {
page: 'dashboard'
};
},
methods: {
nav(page: string) {
this.page = page;
}
2018-08-13 19:24:46 +03:00
}
2018-08-13 19:05:58 +03:00
});
</script>
2018-08-13 22:30:42 +03:00
2018-08-17 21:52:24 +03:00
<style lang="stylus">
2018-08-13 22:30:42 +03:00
@import '~const.styl'
.mk-admin
display flex
height 100%
margin 32px
> nav
flex 0 0 250px
width 100%
height 100%
padding 16px 0 0 0
overflow auto
border-right solid 1px #ddd
> ul
list-style none
> li
display block
padding 10px 16px
margin 0
color #666
cursor pointer
user-select none
transition margin-left 0.2s ease
> [data-fa]
margin-right 4px
&:hover
color #555
&.active
margin-left 8px
color $theme-color !important
> main
width 100%
padding 16px 32px
2018-08-17 17:06:58 +03:00
> div
> div
max-width 800px
2018-08-17 23:05:39 +03:00
.card
padding 32px
background #fff
box-shadow 0 2px 8px rgba(#000, 0.1)
&:not(:last-child)
margin-bottom 16px
> header
margin 0 0 1em 0
padding 0 0 8px 0
font-size 1em
color #555
border-bottom solid 1px #eee
2018-08-14 22:44:39 +03:00
2018-08-13 22:30:42 +03:00
</style>