Refine UI (#7806)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update default.vue

* wip

1 files changed, 70 insertions, 64 deletions

diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 7725ca14b4..fe85d7364e 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,37 +1,39 @@
 <template>
-<div class="fcuexfpr _root">
-	<transition name="fade" mode="out-in">
-		<div v-if="note" class="note">
-			<div class="_gap" v-if="showNext">
-				<XNotes class="_content" :pagination="next" :no-gap="true"/>
-			</div>
-
-			<div class="main _gap">
-				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
-				<div class="note _gap">
-					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
-					<XNoteDetailed v-model:note="note" :key="note.id" class="_isolated note"/>
+<div class="fcuexfpr">
+	<div class="_root">
+		<transition name="fade" mode="out-in">
+			<div v-if="note" class="note">
+				<div class="_gap" v-if="showNext">
+					<XNotes class="_content" :pagination="next" :no-gap="true"/>
 				</div>
-				<div class="_content clips _gap" v-if="clips && clips.length > 0">
-					<div class="title">{{ $ts.clip }}</div>
-					<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-						<b>{{ item.name }}</b>
-						<div v-if="item.description" class="description">{{ item.description }}</div>
-						<div class="user">
-							<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
-						</div>
-					</MkA>
+
+				<div class="main _gap">
+					<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
+					<div class="note _gap">
+						<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_isolated"/>
+						<XNoteDetailed v-model:note="note" :key="note.id" class="_isolated note"/>
+					</div>
+					<div class="_content clips _gap" v-if="clips && clips.length > 0">
+						<div class="title">{{ $ts.clip }}</div>
+						<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+							<b>{{ item.name }}</b>
+							<div v-if="item.description" class="description">{{ item.description }}</div>
+							<div class="user">
+								<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
+							</div>
+						</MkA>
+					</div>
+					<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton>
 				</div>
-				<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton>
-			</div>
 
-			<div class="_gap" v-if="showPrev">
-				<XNotes class="_content" :pagination="prev" :no-gap="true"/>
+				<div class="_gap" v-if="showPrev">
+					<XNotes class="_content" :pagination="prev" :no-gap="true"/>
+				</div>
 			</div>
-		</div>
-		<MkError v-else-if="error" @retry="fetch()"/>
-		<MkLoading v-else/>
-	</transition>
+			<MkError v-else-if="error" @retry="fetch()"/>
+			<MkLoading v-else/>
+		</transition>
+	</div>
 </div>
 </template>
 
@@ -63,12 +65,14 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.note ? {
 				title: this.$ts.note,
+				subtitle: new Date(this.note.createdAt).toLocaleString(),
 				avatar: this.note.user,
 				path: `/notes/${this.note.id}`,
 				share: {
 					title: this.$t('noteOf', { user: this.note.user.name }),
 					text: this.note.text,
 				},
+				bg: 'var(--bg)',
 			} : null),
 			note: null,
 			clips: null,
@@ -149,52 +153,54 @@ export default defineComponent({
 .fcuexfpr {
 	background: var(--bg);
 
-	> .note {
-		> .main {
-			> .load {
-				min-width: 0;
-				margin: 0 auto;
-				border-radius: 999px;
+	> ._root {
+		> .note {
+			> .main {
+				> .load {
+					min-width: 0;
+					margin: 0 auto;
+					border-radius: 999px;
 
-				&.next {
-					margin-bottom: var(--margin);
-				}
+					&.next {
+						margin-bottom: var(--margin);
+					}
 
-				&.prev {
-					margin-top: var(--margin);
+					&.prev {
+						margin-top: var(--margin);
+					}
 				}
-			}
 
-			> .note {
 				> .note {
-					border-radius: var(--radius);
-					background: var(--panel);
+					> .note {
+						border-radius: var(--radius);
+						background: var(--panel);
+					}
 				}
-			}
 
-			> .clips {
-				> .title {
-					font-weight: bold;
-					padding: 12px;
-				}
+				> .clips {
+					> .title {
+						font-weight: bold;
+						padding: 12px;
+					}
 
-				> .item {
-					display: block;
-					padding: 16px;
+					> .item {
+						display: block;
+						padding: 16px;
 
-					> .description {
-						padding: 8px 0;
-					}
+						> .description {
+							padding: 8px 0;
+						}
 
-					> .user {
-						$height: 32px;
-						padding-top: 16px;
-						border-top: solid 0.5px var(--divider);
-						line-height: $height;
+						> .user {
+							$height: 32px;
+							padding-top: 16px;
+							border-top: solid 0.5px var(--divider);
+							line-height: $height;
 
-						> .avatar {
-							width: $height;
-							height: $height;
+							> .avatar {
+								width: $height;
+								height: $height;
+							}
 						}
 					}
 				}