From 43b9a9e618f4e1345d303f78a437454ccf685f6a Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 22 Jun 2022 23:40:53 +0900 Subject: [PATCH] enhance(client): tweak ui --- ...stance-info.vue => instance-card-mini.vue} | 8 +- .../client/src/components/user-card-mini.vue | 95 +++++++++++++++++++ packages/client/src/pages/admin/users.vue | 76 ++------------- packages/client/src/pages/federation.vue | 4 +- packages/client/src/pages/user-info.vue | 10 +- 5 files changed, 119 insertions(+), 74 deletions(-) rename packages/client/src/components/{instance-info.vue => instance-card-mini.vue} (90%) create mode 100644 packages/client/src/components/user-card-mini.vue diff --git a/packages/client/src/components/instance-info.vue b/packages/client/src/components/instance-card-mini.vue similarity index 90% rename from packages/client/src/components/instance-info.vue rename to packages/client/src/components/instance-card-mini.vue index e55c1d8215..edcd576ce0 100644 --- a/packages/client/src/components/instance-info.vue +++ b/packages/client/src/components/instance-card-mini.vue @@ -2,8 +2,8 @@
- {{ instance.host }} - {{ instance.softwareName || '?' }} {{ instance.softwareVersion }} + {{ instance.name ?? instance.host }} + {{ instance.host }} / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}
@@ -20,7 +20,7 @@ const props = defineProps<{ const chart = $ref(null); -os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'hour' }).then(res => { +os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' }).then(res => { chart = res; }); @@ -42,7 +42,7 @@ os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'hour' } height: ($bodyTitleHieght + $bodyInfoHieght); object-fit: cover; border-radius: 4px; - margin-right: 8px; + margin-right: 10px; } > :global(.body) { diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue new file mode 100644 index 0000000000..9a286a1a83 --- /dev/null +++ b/packages/client/src/components/user-card-mini.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue index dccf952ba9..ce377074cc 100644 --- a/packages/client/src/pages/admin/users.vue +++ b/packages/client/src/pages/admin/users.vue @@ -41,25 +41,9 @@ - + + + @@ -74,11 +58,11 @@ import XHeader from './_header_.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; import MkPagination from '@/components/ui/pagination.vue'; -import { acct } from '@/filters/user'; import * as os from '@/os'; import { lookupUser } from '@/scripts/lookup-user'; import { i18n } from '@/i18n'; import { definePageMetadata } from '@/scripts/page-metadata'; +import MkUserCardMini from '@/components/user-card-mini.vue'; let paginationComponent = $ref>(); @@ -174,54 +158,12 @@ definePageMetadata(computed(() => ({ > .users { margin-top: var(--margin); + display: grid; + grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); + grid-gap: 12px; - > .user { - display: flex; - width: 100%; - box-sizing: border-box; - text-align: left; - align-items: center; - padding: 16px; - - &:hover { - color: var(--accent); - } - - > .avatar { - width: 60px; - height: 60px; - } - - > .body { - margin-left: 0.3em; - padding: 0 8px; - flex: 1; - - @media (max-width: 500px) { - font-size: 14px; - } - - > header { - > .name { - font-weight: bold; - } - - > .acct { - margin-left: 8px; - opacity: 0.7; - } - - > .staff { - margin-left: 0.5em; - color: var(--badge); - } - - > .punished { - margin-left: 0.5em; - color: #4dabf7; - } - } - } + > .user:hover { + text-decoration: none; } } } diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue index 38d42f2be4..bbd1bd352a 100644 --- a/packages/client/src/pages/federation.vue +++ b/packages/client/src/pages/federation.vue @@ -42,7 +42,7 @@
- +
@@ -57,7 +57,7 @@ import MkButton from '@/components/ui/button.vue'; import MkInput from '@/components/form/input.vue'; import MkSelect from '@/components/form/select.vue'; import MkPagination from '@/components/ui/pagination.vue'; -import MkInstanceInfo from '@/components/instance-info.vue'; +import MkInstanceCardMini from '@/components/instance-card-mini.vue'; import FormSplit from '@/components/form/split.vue'; import * as os from '@/os'; import { i18n } from '@/i18n'; diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue index 67fc5ba7e3..ad11ae045b 100644 --- a/packages/client/src/pages/user-info.vue +++ b/packages/client/src/pages/user-info.vue @@ -77,6 +77,10 @@ +
+ + +
@@ -225,7 +229,7 @@ watch(() => props.userId, () => { watch(() => user, () => { os.api('ap/get', { - uri: user.uri || `${url}/users/${user.id}`, + uri: user.uri ?? `${url}/users/${user.id}`, }).then(res => { ap = res; }); @@ -241,6 +245,10 @@ const headerTabs = $computed(() => [{ key: 'chart', title: i18n.ts.charts, icon: 'fas fa-chart-simple', +}, { + key: 'ap', + title: 'AP', + icon: 'fas fa-share-alt', }, { key: 'raw', title: 'Raw data',