This commit is contained in:
syuilo 2018-11-16 05:07:59 +09:00
parent bf3fee4481
commit 672b7a4c3d
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 39 additions and 40 deletions

View File

@ -8,6 +8,12 @@
<p>{{ $t('@.ai-chan-kawaii') }}</p>
</header>
<marquee-text v-if="instances.length > 0" class="instances" :repeat="10" :duration="60">
<span v-for="instance in instances" class="instance">
<b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }} / {{ instance.usersCount | number }}
</span>
</marquee-text>
<div v-if="stats" class="stats">
<div>
<div>
@ -84,6 +90,8 @@ import XCpuMemory from "./cpu-memory.vue";
import XCharts from "./charts.vue";
import XApLog from "./ap-log.vue";
import { faDatabase } from '@fortawesome/free-solid-svg-icons';
import MarqueeText from 'vue-marquee-text-component';
import randomColor from 'randomcolor';
export default Vue.extend({
i18n: i18n('admin/views/dashboard.vue'),
@ -91,7 +99,8 @@ export default Vue.extend({
components: {
XCpuMemory,
XCharts,
XApLog
XApLog,
MarqueeText
},
data() {
@ -99,6 +108,7 @@ export default Vue.extend({
stats: null,
connection: null,
meta: null,
instances: [],
faDatabase
};
},
@ -113,6 +123,18 @@ export default Vue.extend({
this.$root.api('stats').then(stats => {
this.stats = stats;
});
this.$root.api('instances', {
sort: '+notes'
}).then(instances => {
instances.forEach(i => {
i.bg = randomColor({
seed: i.host,
luminosity: 'dark'
});
});
this.instances = instances;
});
},
beforeDestroy() {
@ -136,7 +158,6 @@ export default Vue.extend({
> header
display flex
margin-bottom 16px
padding-bottom 16px
border-bottom solid 1px var(--adminDashboardHeaderBorder)
color var(--adminDashboardHeaderFg)
@ -161,6 +182,20 @@ export default Vue.extend({
margin-left auto
margin-right 0
> .instances
padding 16px
color var(--adminDashboardHeaderFg)
font-size 13px
>>> .instance
margin 0 10px
> b
padding 2px 6px
margin-right 4px
border-radius 4px
color #fff
> .stats
display flex
justify-content space-between

View File

@ -37,11 +37,6 @@
</div>
</nav>
<main>
<marquee-text v-if="instances.length > 0" class="instances" :repeat="10" :duration="30">
<span v-for="instance in instances" class="instance">
<b :style="{ background: instance.bg }">{{ instance.host }}</b>{{ instance.notesCount | number }} / {{ instance.usersCount | number }}
</span>
</marquee-text>
<div class="page">
<div v-if="page == 'dashboard'"><x-dashboard/></div>
<div v-if="page == 'instance'"><x-instance/></div>
@ -70,8 +65,6 @@ 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();
@ -86,8 +79,7 @@ export default Vue.extend({
XEmoji,
XAnnouncements,
XHashtags,
XUsers,
MarqueeText
XUsers
},
provide: {
isMobile
@ -98,25 +90,11 @@ export default Vue.extend({
version,
isMobile,
navOpend: !isMobile,
instances: [],
faGrin,
faArrowLeft,
faHeadset
};
},
created() {
this.$root.api('instances', {
sort: '+notes'
}).then(instances => {
instances.forEach(i => {
i.bg = randomColor({
seed: i.host,
luminosity: 'dark'
});
});
this.instances = instances;
});
},
methods: {
nav(page: string) {
this.page = page;
@ -287,22 +265,8 @@ export default Vue.extend({
width 100%
padding 0 0 0 250px
> .instances
padding 10px
background #000
color #fff
font-size 13px
>>> .instance
margin 0 10px
> b
padding 0px 6px
margin-right 4px
border-radius 4px
> .page
max-width 1300px
max-width 1150px
&.isMobile
> main