From d1e151172b8e7b41e443e4ce33e2ad710aa0de55 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 23 Jun 2022 13:39:28 +0900
Subject: [PATCH] chore(client): tweak client design
---
.../src/components/instance-card-mini.vue | 4 ++-
.../client/src/components/user-card-mini.vue | 4 ++-
packages/client/src/pages/user-info.vue | 36 ++++++++++++++++---
3 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/packages/client/src/components/instance-card-mini.vue b/packages/client/src/components/instance-card-mini.vue
index edcd576ce0..0bac6c0ad0 100644
--- a/packages/client/src/components/instance-card-mini.vue
+++ b/packages/client/src/components/instance-card-mini.vue
@@ -62,7 +62,9 @@ os.api('charts/instance', { host: props.instance.host, limit: 16, span: 'day' })
}
> :global(.sub) {
- font-size: 75%;
+ display: block;
+ width: 100%;
+ font-size: 80%;
opacity: 0.7;
line-height: $bodyInfoHieght;
white-space: nowrap;
diff --git a/packages/client/src/components/user-card-mini.vue b/packages/client/src/components/user-card-mini.vue
index 9a286a1a83..d83e4a56f5 100644
--- a/packages/client/src/components/user-card-mini.vue
+++ b/packages/client/src/components/user-card-mini.vue
@@ -61,7 +61,9 @@ os.api('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).t
}
> :global(.sub) {
- font-size: 75%;
+ display: block;
+ width: 100%;
+ font-size: 95%;
opacity: 0.7;
line-height: $bodyInfoHieght;
white-space: nowrap;
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index ad11ae045b..cc187b9df3 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -6,6 +6,10 @@
<div v-if="tab === 'overview'" class="_formRoot">
<div class="_formBlock aeakzknw">
<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
+ <div class="body">
+ <span class="name"><MkUserName class="name" :user="user"/></span>
+ <span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
+ </div>
</div>
<div v-if="user.url" class="_formLinksGrid _formBlock">
@@ -17,11 +21,6 @@
<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
<div class="_formBlock">
- <MkKeyValue :copy="acct(user)" oneline style="margin: 1em 0;">
- <template #key>Acct</template>
- <template #value><span class="_monospace">{{ acct(user) }}</span></template>
- </MkKeyValue>
-
<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
<template #key>ID</template>
<template #value><span class="_monospace">{{ user.id }}</span></template>
@@ -264,10 +263,37 @@ definePageMetadata(computed(() => ({
<style lang="scss" scoped>
.aeakzknw {
+ display: flex;
+ align-items: center;
+
> .avatar {
display: block;
width: 64px;
height: 64px;
+ margin-right: 16px;
+ }
+
+ > .body {
+ flex: 1;
+ overflow: hidden;
+
+ > .name {
+ display: block;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ > .sub {
+ display: block;
+ width: 100%;
+ font-size: 85%;
+ opacity: 0.7;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
}