From f6128dd3ff9ad4df1cbb956f46e2ea34d59368aa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 21 Aug 2021 17:40:15 +0900
Subject: [PATCH] :art:

---
 CHANGELOG.md                            |  1 +
 src/client/components/notes.vue         |  2 ++
 src/client/components/notifications.vue |  6 +++-
 src/client/pages/notifications.vue      | 18 ++++++++++--
 src/client/pages/timeline.vue           | 39 ++++++++++++++++---------
 5 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3a29234110..9ac26311ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 - ActivityPub: ジョブキューの試行タイミングを調整 (#7635)
 - API: sw/unregisterを追加
 - ワードミュートのドキュメントを追加
+- クライアントのデザインの調整
 - 依存関係の更新
 
 ### Bugfixes
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index ba3b7d2b39..919cb29952 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -118,6 +118,8 @@ export default defineComponent({
 
 	&:not(.noGap) {
 		> .notes {
+			background: var(--bg);
+
 			.qtqtichx {
 				background: var(--panel);
 				border-radius: var(--radius);
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 9db47e08d6..e91f18a693 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -7,7 +7,7 @@
 	<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
 
 	<div v-else>
-		<XList class="notifications" :items="items" v-slot="{ item: notification }" :no-gap="true">
+		<XList class="elsfgstc" :items="items" v-slot="{ item: notification }" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
 			<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
 		</XList>
@@ -141,4 +141,8 @@ export default defineComponent({
 	text-align: center;
 	color: var(--fg);
 }
+
+.elsfgstc {
+	background: var(--panel);
+}
 </style>
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index 6b16b85b78..633718a90b 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="">
-	<XNotifications class="_content" @before="before" @after="after" page/>
+<div class="clupoqwt" v-size="{ min: [800] }">
+	<XNotifications class="notifications" @before="before" @after="after" page/>
 </div>
 </template>
 
@@ -43,3 +43,17 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.clupoqwt {
+	&.min-width_800px {
+		background: var(--bg);
+		padding: 32px 0;
+
+		> .notifications {
+			max-width: 800px;
+			margin: 0 auto;
+		}
+	}
+}
+</style>
diff --git a/src/client/pages/timeline.vue b/src/client/pages/timeline.vue
index 119815e2ae..f54549b982 100644
--- a/src/client/pages/timeline.vue
+++ b/src/client/pages/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="cmuxhskf" v-hotkey.global="keymap">
+<div class="cmuxhskf" v-hotkey.global="keymap" v-size="{ min: [800] }">
 	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block _isolated"/>
 	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block _isolated" fixed/>
 	<div class="tabs">
@@ -19,17 +19,19 @@
 		</div>
 	</div>
 	<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-	<XTimeline ref="tl" class="tl"
-		:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
-		:src="src"
-		:list="list ? list.id : null"
-		:antenna="antenna ? antenna.id : null"
-		:channel="channel ? channel.id : null"
-		:sound="true"
-		@before="before()"
-		@after="after()"
-		@queue="queueUpdated"
-	/>
+	<div class="tl">
+		<XTimeline ref="tl" class="tl"
+			:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
+			:src="src"
+			:list="list ? list.id : null"
+			:antenna="antenna ? antenna.id : null"
+			:channel="channel ? channel.id : null"
+			:sound="true"
+			@before="before()"
+			@after="after()"
+			@queue="queueUpdated"
+		/>
+	</div>
 </div>
 </template>
 
@@ -231,6 +233,7 @@ export default defineComponent({
 		padding: 0 8px;
 		white-space: nowrap;
 		overflow: auto;
+		border-bottom: solid 0.5px var(--divider);
 
 		// 影の都合上
 		position: relative;
@@ -287,8 +290,16 @@ export default defineComponent({
 		}
 	}
 
-	> .tl {
-		border-top: solid 0.5px var(--divider);
+	&.min-width_800px {
+		> .tl {
+			background: var(--bg);
+			padding: 32px 0;
+
+			> .tl {
+				max-width: 800px;
+				margin: 0 auto;
+			}
+		}
 	}
 }
 </style>