usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak: split name and username

This commit is contained in:
fly_mc 2024-10-02 20:38:12 +08:00
parent e9519b02fb
commit 8c1a623e73
3 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/components/MkInstanceTicker.vue
View File

@ -49,6 +49,7 @@ $height: 2ex;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
overflow: clip; overflow: clip;
color: #fff; color: #fff;
margin: -.3em 0 0 0;
text-shadow: /* .866 ≈ sin(60deg) */ text-shadow: /* .866 ≈ sin(60deg) */
1px 0 1px #000, 1px 0 1px #000,
.866px .5px 1px #000, .866px .5px 1px #000,

5
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -661,6 +661,7 @@ function loadConversation() {
} }
.noteHeaderName { .noteHeaderName {
margin: 0 0 -.2em 0;
font-weight: bold; font-weight: bold;
line-height: 1.3; line-height: 1.3;
} }
@ -680,7 +681,7 @@ function loadConversation() {
} }
.noteHeaderUsername { .noteHeaderUsername {
margin-bottom: 2px; margin: 0 0 .5em 0;
line-height: 1.3; line-height: 1.3;
word-wrap: anywhere; word-wrap: anywhere;
} }
@ -744,7 +745,7 @@ function loadConversation() {
.noteFooterButton { .noteFooterButton {
margin: 0; margin: 0;
padding: 8px; padding: 6px;
opacity: 0.7; opacity: 0.7;
&:not(:last-child) { &:not(:last-child) {

54
packages/frontend/src/components/MkNoteHeader.vue
View File

@ -5,20 +5,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<header :class="$style.root"> <header :class="$style.root">
<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.7" style="min-width: 0;"> <div :class="$style.section">
<div style="display: flex; white-space: nowrap; align-items: baseline;"> <component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.7" style="min-width: 0;">
<div v-if="mock" :class="$style.name"> <div style="display: flex;">
<MkUserName :user="note.user"/> <div v-if="mock" :class="$style.name">
<MkUserName :user="note.user"/>
</div>
<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
</div>
</div> </div>
<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)"> <div :class="$style.username"><MkAcct :user="note.user"/></div>
<MkUserName :user="note.user"/> </component>
</MkA>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
<div :class="$style.username"><MkAcct :user="note.user"/></div>
</div>
</component>
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
</div> </div>
<div :class="$style.info"> <div :class="$style.info">
<div v-if="mock"> <div v-if="mock">
@ -60,10 +62,26 @@ const mock = inject<boolean>('mock', false);
white-space: nowrap; white-space: nowrap;
} }
.section {
align-items: flex-start;
white-space: nowrap;
flex-direction: column;
overflow: hidden;
&:last-child {
display: flex;
align-items: flex-end;
margin-left: auto;
margin-bottom: auto;
padding-left: 10px;
overflow: clip;
}
}
.name { .name {
flex-shrink: 1; flex-shrink: 1;
display: block; display: block;
margin: 0 .5em 0 0; margin: .5em .5em 0 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
font-size: 1em; font-size: 1em;
@ -88,9 +106,15 @@ const mock = inject<boolean>('mock', false);
.username { .username {
flex-shrink: 9999999; flex-shrink: 9999999;
margin: 0 .5em 0 0; margin: -.3em .5em .3em 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 95%;
opacity: 0.8;
&::-webkit-scrollbar {
display: none;
}
} }
.info { .info {