🎨

src/client/app/admin/views/dashboard.vue

@@ -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

src/client/app/admin/views/index.vue

@@ -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