grid from note component BE GONE

packages/client/src/components/MkNote.vue

@@ -32,10 +32,9 @@
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))">
-		<MkAvatar class="avatar" :user="appearNote.user"/>
+		<!-- <MkAvatar class="avatar" :user="appearNote.user"/> -->
 		<div class="main" @click.self="router.push(notePage(appearNote))">
 			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
@@ -426,9 +425,6 @@ function readPromo() {
 	> .article {
 		padding: 28px 32px 18px;
 		cursor: pointer;
-		display: grid;
-		align-items: center;
-		grid-template-columns: 58px;
 
 		@media (pointer: coarse) {
 			cursor: default;
@@ -438,7 +434,6 @@ function readPromo() {
 			flex-shrink: 0;
 			display: block;
 			margin: 0 14px 8px 0;
-			grid-row: 1 / span 2;
 			width: 48px;
 			height: 48px;
 			position: relative;
@@ -449,38 +444,9 @@ function readPromo() {
 		> .main {
 			flex: 1;
 			min-width: 0;
-			display: contents;
-
-			> header.header {
-				display: contents;
-			
-				> .name, .info {
-					grid-row: 1;
-				}
-			}
-
-			> :not(.ticker) {
-				grid-column: 1 / span 3;
-				width: 100%;
-				max-width: 100%;
-			}
-
-			> .name, .info {
-				grid-row: 1;
-			}
-
-			> .ticker {
-				grid-row: 2;
-				align-self: flex-start;
-				margin-left: auto;
-			}
-
-			> .ticker {
-				font-size: 0.9em;
-			}
 
 			> .body {
-				margin-top: .2em;
+				margin-top: .7em;
 				overflow: hidden;
 				margin-inline: -100px;
 				padding-inline: 100px;
@@ -569,6 +535,10 @@ function readPromo() {
 						}
 					}
 
+					> .files {
+						margin-top: .7em;
+						margin-bottom: .4em;
+					}
 					> .url-preview {
 						margin-top: 8px;
 					}

packages/client/src/components/MkNoteHeader.vue

@@ -1,16 +1,24 @@
 <template>
 <header class="kkwtjztg">
-	<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
+	<MkAvatar class="avatar" :user="note.user"/>
-		<MkUserName :user="note.user" class="mkusername">
+	<div class="user-info">
-			<span v-if="note.user.isBot" class="is-bot">bot</span>
+		<div>
-		</MkUserName>
+			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
-	</MkA>
+				<MkUserName :user="note.user" class="mkusername">
-	<div class="username"><MkAcct :user="note.user"/></div>
+					<span v-if="note.user.isBot" class="is-bot">bot</span>
-	<div class="info">
+				</MkUserName>
-		<MkA class="created-at" :to="notePage(note)">
+			</MkA>
-			<MkTime :time="note.createdAt"/>
+			<div class="info">
-		</MkA>
+				<MkA class="created-at" :to="notePage(note)">
-		<MkVisibility :note="note"/>
+					<MkTime :time="note.createdAt"/>
+				</MkA>
+				<MkVisibility :note="note"/>
+			</div>
+		</div>
+		<div>
+			<div class="username"><MkAcct :user="note.user"/></div>
+			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="note.user.instance"/>
+		</div>
 	</div>
 </header>
 </template>
@@ -31,53 +39,63 @@ defineProps<{
 <style lang="scss" scoped>
 .kkwtjztg {
 	display: flex;
-	align-items: baseline;
+	align-items: center;
 	white-space: nowrap;
 	justify-self: flex-end;
-	padding: .1em .7em;
 	border-radius: 100px;
 	font-size: .8em;
 	text-shadow: 0 2px 2px var(--shadow);
 
-	> .name {
+	> .avatar {
-		flex-shrink: 1;
+		width: 3.7em;
-		display: block;
+		height: 3.7em;
-		margin: 0 .5em 0 0;
+		margin-right: 8px;
-		padding: 0;
+	}
-		overflow: hidden;
+	> .user-info {
-		font-size: 1.2em;
+		flex-grow: 1;
-		font-weight: bold;
+		> div {
-		text-decoration: none;
+			display: flex;
-		text-overflow: ellipsis;
 			
-		>.mkusername >.is-bot {
+		}
-			flex-shrink: 0;
+		.name {
-			align-self: center;
+			flex: 1 1 0px;
+			display: block;
 			margin: 0 .5em 0 0;
-			padding: 1px 6px;
+			padding: 0;
-			font-size: 80%;
+			overflow: hidden;
-			border: solid 0.5px var(--divider);
+			font-size: 1.2em;
-			border-radius: 3px;
+			font-weight: bold;
+			text-decoration: none;
+			text-overflow: ellipsis;
+
+			.mkusername >.is-bot {
+				flex-shrink: 0;
+				align-self: center;
+				margin: 0 .5em 0 0;
+				padding: 1px 6px;
+				font-size: 80%;
+				border: solid 0.5px var(--divider);
+				border-radius: 3px;
+			}
+
+			&:hover {
+				text-decoration: underline;
+			}
 		}
 
-		&:hover {
+		.username {
-			text-decoration: underline;
+			flex: 1 1 0px;
+			margin: 0 .5em 0 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			align-self: flex-start;
 		}
-	}
 
-	> .username {
+		.info {
-		flex-shrink: 9999999;
+			flex-shrink: 0;
-		margin: 0 .5em 0 0;
+			margin-left: auto;
-		overflow: hidden;
+			font-size: 0.9em;
-		text-overflow: ellipsis;
+		}
-		grid-row: 2;
-		align-self: flex-start;
-	}
-
-	> .info {
-		flex-shrink: 0;
-		margin-left: auto;
-		font-size: 0.9em;
 	}
 }
 </style>