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,17 +1,25 @@
 <template>
 <header class="kkwtjztg">
+	<MkAvatar class="avatar" :user="note.user"/>
+	<div class="user-info">
+		<div>
 			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
 				<MkUserName :user="note.user" class="mkusername">
 					<span v-if="note.user.isBot" class="is-bot">bot</span>
 				</MkUserName>
 			</MkA>
-	<div class="username"><MkAcct :user="note.user"/></div>
 			<div class="info">
 				<MkA class="created-at" :to="notePage(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,16 +39,26 @@ 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;
+		height: 3.7em;
+		margin-right: 8px;
+	}
+	> .user-info {
+		flex-grow: 1;
+		> div {
+			display: flex;
+			
+		}
+		.name {
+			flex: 1 1 0px;
 			display: block;
 			margin: 0 .5em 0 0;
 			padding: 0;
@@ -50,7 +68,7 @@ defineProps<{
 			text-decoration: none;
 			text-overflow: ellipsis;
 
-		>.mkusername >.is-bot {
+			.mkusername >.is-bot {
 				flex-shrink: 0;
 				align-self: center;
 				margin: 0 .5em 0 0;
@@ -65,19 +83,19 @@ defineProps<{
 			}
 		}
 
-	> .username {
+		.username {
-		flex-shrink: 9999999;
+			flex: 1 1 0px;
 			margin: 0 .5em 0 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
-		grid-row: 2;
 			align-self: flex-start;
 		}
 
-	> .info {
+		.info {
 			flex-shrink: 0;
 			margin-left: auto;
 			font-size: 0.9em;
 		}
 	}
+}
 </style>