From eee6a1c5f0ac4e616238e66b9dbe2a11bdd40e37 Mon Sep 17 00:00:00 2001
From: fly_mc <me@flymc.cc>
Date: Mon, 30 Sep 2024 23:47:42 +0800
Subject: [PATCH] seperate name and username in different lines

---
 .../frontend/src/components/MkNoteHeader.vue  | 94 ++++++++++++-------
 1 file changed, 60 insertions(+), 34 deletions(-)

diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
index 651048286..c0a0c0168 100644
--- a/packages/frontend/src/components/MkNoteHeader.vue
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -4,41 +4,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<header :class="$style.root">
-	<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.5" style="min-width: 0;">
-		<div style="display: flex; white-space: nowrap; align-items: baseline;">
-			<div v-if="mock" :class="$style.name">
-				<MkUserName :user="note.user"/>
+	<header :class="$style.root">
+		<div :class="$style.section">
+			<!--<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.5" style="min-width: 0;">-->
+			<div style="display: flex;">
+				<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>
-			<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 :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 :class="$style.info">
-		<span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span>
-		<div v-if="mock">
-			<MkTime :time="note.createdAt" colored/>
-		</div>
-		<MkA v-else :to="notePage(note)">
-			<MkTime :time="note.createdAt" colored/>
-		</MkA>
-		<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
-			<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
-			<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
-			<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
-		</span>
-		<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
-		<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
-	</div>
-</header>
+		   	<div :class="$style.username"><MkAcct :user="note.user"/></div>
+			<!--</component>-->
+	    </div>
+		<!--<div :class="$style.section">-->
+			<div :class="$style.info">
+				<span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span>
+				<div v-if="mock">
+					<MkTime :time="note.createdAt" colored/>
+				</div>
+				<MkA v-else :to="notePage(note)">
+					<MkTime :time="note.createdAt" colored/>
+				</MkA>
+				<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
+					<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
+					<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
+					<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+				</span>
+				<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
+				<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
+			</div>
+	    <!--</div>-->
+	</header>
 </template>
-
+	
 <script lang="ts" setup>
 import { inject } from 'vue';
 import * as Misskey from 'misskey-js';
@@ -61,6 +65,22 @@ const mock = inject<boolean>('mock', false);
 	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 {
 	flex-shrink: 1;
 	display: block;
@@ -92,6 +112,12 @@ const mock = inject<boolean>('mock', false);
 	margin: 0 .5em 0 0;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	font-size: 85%;
+	opacity: 0.8;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
 }
 
 .info {
@@ -112,4 +138,4 @@ const mock = inject<boolean>('mock', false);
 		margin-left: 0.2em;
 	}
 }
-</style>
+</style>
\ No newline at end of file