mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-10-31 15:21:46 +09:00
🎨
This commit is contained in:
parent
bf3fee4481
commit
672b7a4c3d
@ -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
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user