oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

プロフィールにロールを表示するように

Browse source
This commit is contained in:
syuilo 2023-01-13 12:07:24 +09:00
parent d43a4a2d46
commit 4c21d83639
2 changed files with 28 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/frontend/src/pages/user/home.vue
View file

@ -38,6 +38,9 @@
<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
</div>
</div>
<div v-if="user.roles.length > 0" class="roles">
<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color }">{{ role.name }}</span>
</div>
<div class="description">
<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i"/>
<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
@ -337,6 +340,18 @@ onUnmounted(() => {
box-shadow: 1px 1px 3px rgba(#000, 0.2);
}
> .roles {
padding: 24px 24px 0 154px;
font-size: 0.95em;
> .role {
border: solid 1px var(--color, var(--divider));
border-radius: 999px;
margin-right: 4px;
padding: 3px 8px;
}
}
> .description {
padding: 24px 24px 24px 154px;
font-size: 0.95em;
@ -467,6 +482,11 @@ onUnmounted(() => {
margin: auto;
}
> .roles {
padding: 16px 16px 0 16px;
text-align: center;
}
> .description {
padding: 16px;
text-align: center;