[Client] Improve admin panel
This commit is contained in:
parent
1dba82aae5
commit
50fe67b99b
2 changed files with 50 additions and 12 deletions
|
@ -176,6 +176,7 @@
|
||||||
"pug": "2.0.3",
|
"pug": "2.0.3",
|
||||||
"punycode": "2.1.1",
|
"punycode": "2.1.1",
|
||||||
"qrcode": "1.3.2",
|
"qrcode": "1.3.2",
|
||||||
|
"randomcolor": "0.5.3",
|
||||||
"ratelimiter": "3.2.0",
|
"ratelimiter": "3.2.0",
|
||||||
"recaptcha-promise": "0.1.3",
|
"recaptcha-promise": "0.1.3",
|
||||||
"reconnecting-websocket": "4.1.10",
|
"reconnecting-websocket": "4.1.10",
|
||||||
|
@ -218,6 +219,7 @@
|
||||||
"vue-i18n": "8.3.1",
|
"vue-i18n": "8.3.1",
|
||||||
"vue-js-modal": "1.3.26",
|
"vue-js-modal": "1.3.26",
|
||||||
"vue-loader": "15.4.2",
|
"vue-loader": "15.4.2",
|
||||||
|
"vue-marquee-text-component": "1.1.0",
|
||||||
"vue-router": "3.0.1",
|
"vue-router": "3.0.1",
|
||||||
"vue-style-loader": "4.1.2",
|
"vue-style-loader": "4.1.2",
|
||||||
"vue-svg-inline-loader": "1.2.1",
|
"vue-svg-inline-loader": "1.2.1",
|
||||||
|
|
|
@ -37,15 +37,20 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<div v-if="page == 'dashboard'"><x-dashboard/></div>
|
<marquee-text v-if="instances.length > 0" v-show="!isMobile" class="instances" :repeat="10" :duration="10">
|
||||||
<div v-if="page == 'instance'"><x-instance/></div>
|
<span v-for="instance in instances" class="instance"><b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }}</span>
|
||||||
<div v-if="page == 'moderators'"><x-moderators/></div>
|
</marquee-text>
|
||||||
<div v-if="page == 'users'"><x-users/></div>
|
<div class="page">
|
||||||
<div v-if="page == 'emoji'"><x-emoji/></div>
|
<div v-if="page == 'dashboard'"><x-dashboard/></div>
|
||||||
<div v-if="page == 'announcements'"><x-announcements/></div>
|
<div v-if="page == 'instance'"><x-instance/></div>
|
||||||
<div v-if="page == 'hashtags'"><x-hashtags/></div>
|
<div v-if="page == 'moderators'"><x-moderators/></div>
|
||||||
<div v-if="page == 'drive'"></div>
|
<div v-if="page == 'users'"><x-users/></div>
|
||||||
<div v-if="page == 'update'"></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>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -63,6 +68,8 @@ import XHashtags from "./hashtags.vue";
|
||||||
import XUsers from "./users.vue";
|
import XUsers from "./users.vue";
|
||||||
import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
|
import { faHeadset, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { faGrin } from '@fortawesome/free-regular-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
|
// Detect the user agent
|
||||||
const ua = navigator.userAgent.toLowerCase();
|
const ua = navigator.userAgent.toLowerCase();
|
||||||
|
@ -77,7 +84,8 @@ export default Vue.extend({
|
||||||
XEmoji,
|
XEmoji,
|
||||||
XAnnouncements,
|
XAnnouncements,
|
||||||
XHashtags,
|
XHashtags,
|
||||||
XUsers
|
XUsers,
|
||||||
|
MarqueeText
|
||||||
},
|
},
|
||||||
provide: {
|
provide: {
|
||||||
isMobile
|
isMobile
|
||||||
|
@ -88,11 +96,23 @@ export default Vue.extend({
|
||||||
version,
|
version,
|
||||||
isMobile,
|
isMobile,
|
||||||
navOpend: !isMobile,
|
navOpend: !isMobile,
|
||||||
|
instances: [],
|
||||||
faGrin,
|
faGrin,
|
||||||
faArrowLeft,
|
faArrowLeft,
|
||||||
faHeadset
|
faHeadset
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.$root.api('instances').then(instances => {
|
||||||
|
instances.forEach(i => {
|
||||||
|
i.bg = randomColor({
|
||||||
|
seed: i.host,
|
||||||
|
luminosity: 'dark'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.instances = instances;
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
nav(page: string) {
|
nav(page: string) {
|
||||||
this.page = page;
|
this.page = page;
|
||||||
|
@ -101,7 +121,7 @@ export default Vue.extend({
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus">
|
<style lang="stylus" scoped>
|
||||||
.mk-admin
|
.mk-admin
|
||||||
$headerHeight = 48px
|
$headerHeight = 48px
|
||||||
|
|
||||||
|
@ -262,7 +282,23 @@ export default Vue.extend({
|
||||||
> main
|
> main
|
||||||
width 100%
|
width 100%
|
||||||
padding 0 0 0 250px
|
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
|
&.isMobile
|
||||||
> main
|
> main
|
||||||
|
|
Loading…
Reference in a new issue