From e8005c8d3a6edf2c8cdce3fe098fb9acff8a57c6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 28 Nov 2021 20:07:37 +0900
Subject: client: refine ui

---
 packages/client/src/pages/federation.vue | 181 ++++++++++++++++---------------
 1 file changed, 91 insertions(+), 90 deletions(-)

(limited to 'packages/client/src/pages/federation.vue')

diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index 398619d3be..a868c34478 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -1,96 +1,98 @@
 <template>
-<div class="taeiyria">
-	<div class="query">
-		<MkInput v-model="host" :debounce="true" class="">
-			<template #prefix><i class="fas fa-search"></i></template>
-			<template #label>{{ $ts.host }}</template>
-		</MkInput>
-		<div class="_inputSplit">
-			<MkSelect v-model="state">
-				<template #label>{{ $ts.state }}</template>
-				<option value="all">{{ $ts.all }}</option>
-				<option value="federating">{{ $ts.federating }}</option>
-				<option value="subscribing">{{ $ts.subscribing }}</option>
-				<option value="publishing">{{ $ts.publishing }}</option>
-				<option value="suspended">{{ $ts.suspended }}</option>
-				<option value="blocked">{{ $ts.blocked }}</option>
-				<option value="notResponding">{{ $ts.notResponding }}</option>
-			</MkSelect>
-			<MkSelect v-model="sort">
-				<template #label>{{ $ts.sort }}</template>
-				<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
-				<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
-				<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
-				<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
-				<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
-				<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
-				<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
-				<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
-				<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
-			</MkSelect>
+<MkSpacer :content-max="1000">
+	<div class="taeiyria">
+		<div class="query">
+			<MkInput v-model="host" :debounce="true" class="">
+				<template #prefix><i class="fas fa-search"></i></template>
+				<template #label>{{ $ts.host }}</template>
+			</MkInput>
+			<div class="_inputSplit" style="margin-top: var(--margin);">
+				<MkSelect v-model="state">
+					<template #label>{{ $ts.state }}</template>
+					<option value="all">{{ $ts.all }}</option>
+					<option value="federating">{{ $ts.federating }}</option>
+					<option value="subscribing">{{ $ts.subscribing }}</option>
+					<option value="publishing">{{ $ts.publishing }}</option>
+					<option value="suspended">{{ $ts.suspended }}</option>
+					<option value="blocked">{{ $ts.blocked }}</option>
+					<option value="notResponding">{{ $ts.notResponding }}</option>
+				</MkSelect>
+				<MkSelect v-model="sort">
+					<template #label>{{ $ts.sort }}</template>
+					<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
+					<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
+					<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
+					<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
+					<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
+					<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
+					<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
+					<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
+					<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
+					<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
+					<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
+				</MkSelect>
+			</div>
 		</div>
-	</div>
 
-	<MkPagination #default="{items}" ref="instances" :key="host + state" :pagination="pagination">
-		<div class="dqokceoi">
-			<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
-				<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
-				<div class="table">
-					<div class="cell">
-						<div class="key">{{ $ts.registeredAt }}</div>
-						<div class="value"><MkTime :time="instance.caughtAt"/></div>
-					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.software }}</div>
-						<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
-					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.version }}</div>
-						<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
-					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.users }}</div>
-						<div class="value">{{ instance.usersCount }}</div>
-					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.notes }}</div>
-						<div class="value">{{ instance.notesCount }}</div>
+		<MkPagination #default="{items}" ref="instances" :key="host + state" :pagination="pagination">
+			<div class="dqokceoi">
+				<MkA v-for="instance in items" :key="instance.id" class="instance" :to="`/instance-info/${instance.host}`">
+					<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
+					<div class="table">
+						<div class="cell">
+							<div class="key">{{ $ts.registeredAt }}</div>
+							<div class="value"><MkTime :time="instance.caughtAt"/></div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.software }}</div>
+							<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.version }}</div>
+							<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.users }}</div>
+							<div class="value">{{ instance.usersCount }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.notes }}</div>
+							<div class="value">{{ instance.notesCount }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.sent }}</div>
+							<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.received }}</div>
+							<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
+						</div>
 					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.sent }}</div>
-						<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
+					<div class="footer">
+						<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
+						<span class="pubSub">
+							<span v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span>
+							<span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span>
+							<span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span>
+							<span v-else class="pub"><i class="fas fa-caret-up icon"></i>-</span>
+						</span>
+						<span class="right">
+							<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
+							<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
+						</span>
 					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.received }}</div>
-						<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
-					</div>
-				</div>
-				<div class="footer">
-					<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
-					<span class="pubSub">
-						<span v-if="instance.followersCount > 0" class="sub"><i class="fas fa-caret-down icon"></i>Sub</span>
-						<span v-else class="sub"><i class="fas fa-caret-down icon"></i>-</span>
-						<span v-if="instance.followingCount > 0" class="pub"><i class="fas fa-caret-up icon"></i>Pub</span>
-						<span v-else class="pub"><i class="fas fa-caret-up icon"></i>-</span>
-					</span>
-					<span class="right">
-						<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
-						<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
-					</span>
-				</div>
-			</MkA>
-		</div>
-	</MkPagination>
-</div>
+				</MkA>
+			</div>
+		</MkPagination>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
@@ -169,7 +171,7 @@ export default defineComponent({
 .taeiyria {
 	> .query {
 		background: var(--bg);
-		padding: 16px;
+		margin-bottom: 16px;
 	}
 }
 
@@ -177,7 +179,6 @@ export default defineComponent({
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
 	grid-gap: 12px;
-	padding: 16px;
 
 	> .instance {
 		padding: 16px;
-- 
cgit v1.2.3-freya