natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

[Client] Improve admin panel

This commit is contained in:
syuilo 2018-11-15 06:21:31 +09:00
parent 1dba82aae5
commit 50fe67b99b
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -176,6 +176,7 @@
"pug": "2.0.3",
"punycode": "2.1.1",
"qrcode": "1.3.2",
"randomcolor": "0.5.3",
"ratelimiter": "3.2.0",
"recaptcha-promise": "0.1.3",
"reconnecting-websocket": "4.1.10",
@ -218,6 +219,7 @@
"vue-i18n": "8.3.1",
"vue-js-modal": "1.3.26",
"vue-loader": "15.4.2",
"vue-marquee-text-component": "1.1.0",
"vue-router": "3.0.1",
"vue-style-loader": "4.1.2",
"vue-svg-inline-loader": "1.2.1",

60
src/client/app/admin/views/index.vue
View File

@ -37,15 +37,20 @@
</div>
</nav>
<main>
<div v-if="page == 'dashboard'"><x-dashboard/></div>
<div v-if="page == 'instance'"><x-instance/></div>
<div v-if="page == 'moderators'"><x-moderators/></div>
<div v-if="page == 'users'"><x-users/></div>
<div v-if="page == 'emoji'"><x-emoji/></div>
<div v-if="page == 'announcements'"><x-announcements/></div>
<div v-if="page == 'hashtags'"><x-hashtags/></div>
<div v-if="page == 'drive'"></div>
<div v-if="page == 'update'"></div>
<marquee-text v-if="instances.length > 0" v-show="!isMobile" class="instances" :repeat="10" :duration="10">
<span v-for="instance in instances" class="instance"><b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }}</span>
</marquee-text>
<div class="page">
<div v-if="page == 'dashboard'"><x-dashboard/></div>
<div v-if="page == 'instance'"><x-instance/></div>
<div v-if="page == 'moderators'"><x-moderators/></div>
<div v-if="page == 'users'"><x-users/></div>
<div v-if="page == 'emoji'"><x-emoji/></div>
<div v-if="page == 'announcements'"><x-announcements/></div>
<div v-if="page == 'hashtags'"><x-hashtags/></div>
<div v-if="page == 'drive'"></div>
<div v-if="page == 'update'"></div>
</div>
</main>
</div>
</template>
@ -63,6 +68,8 @@ import XHashtags from "./hashtags.vue";
import XUsers from "./users.vue";
import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { faGrin } from '@fortawesome/free-regular-svg-icons';
import MarqueeText from 'vue-marquee-text-component';
import randomColor from 'randomcolor';
// Detect the user agent
const ua = navigator.userAgent.toLowerCase();
@ -77,7 +84,8 @@ export default Vue.extend({
XEmoji,
XAnnouncements,
XHashtags,
XUsers
XUsers,
MarqueeText
},
provide: {
isMobile
@ -88,11 +96,23 @@ export default Vue.extend({
version,
isMobile,
navOpend: !isMobile,
instances: [],
faGrin,
faArrowLeft,
faHeadset
};
},
created() {
this.$root.api('instances').then(instances => {
instances.forEach(i => {
i.bg = randomColor({
seed: i.host,
luminosity: 'dark'
});
});
this.instances = instances;
});
},
methods: {
nav(page: string) {
this.page = page;
@ -101,7 +121,7 @@ export default Vue.extend({
});
</script>
<style lang="stylus">
<style lang="stylus" scoped>
.mk-admin
$headerHeight = 48px
@ -262,7 +282,23 @@ export default Vue.extend({
> main
width 100%
padding 0 0 0 250px
max-width 1300px
> .instances
padding 8px
background rgba(0, 0, 0, 0.7)
color #fff
font-size 14px
>>> .instance
margin 0 10px
> b
padding 0px 6px
margin-right 4px
border-radius 4px
> .page
max-width 1300px
&.isMobile
> main