From a04f3111213ff4e7fc72e57319771abf7ca5fb03 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Wed, 3 Apr 2024 05:37:41 +0900
Subject: [PATCH] fix

---
 src/App.vue | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 35273a4..ecfae4e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,16 +52,24 @@
 			</div>
 		</div>
 
-		<div class="bsky_comment">
+
+		<div class="bsky_comment" v-if="comment_open == false">
+			<span class="comment">
+				<p class="comment-body" v-if="comment_first.text">
+					<img :src="'/icon/' + comment_first.did.replace('did:plc:', '') + '.jpg'" v-if="comment_first.avatar" class="comment"/>  <span class="comment-time" v-if="comment_first.handle">{{ moment(comment_first.updated_at) }}</span> <span class="comment-handle" v-if="comment_first.handle"><a :href="comment_first.bsky_url">@{{ comment_first.handle }}</a></span>
+				<span class="comment-text">{{ comment_first.text }}</span>
+			</p>
+		</span>
+		<div class="comment_open"><button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button></div>
+	</div>
+		<div class="bsky_comment" v-else>
 			<span v-for="i in api_json.data" class="comment">
 				<p class="comment-body" v-if="i.text">
-					<!--
-					<img :src="i.avatar" v-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.handle">{{ moment(i.updated_at) }}</span> <span class="comment-handle" v-if="i.handle"><a :href="i.bsky_url">@{{ i.handle }}</a></span>
-				-->
 				<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.handle">{{ moment(i.updated_at) }}</span> <span class="comment-handle" v-if="i.handle"><a :href="i.bsky_url">@{{ i.handle }}</a></span>
 				<span class="comment-text">{{ i.text }}</span>
 			</p>
 		</span>
+		<div class="comment_open"><button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-up"></i></button></div>
 	</div>
 
 	<div class="page_title">
@@ -127,6 +135,8 @@ export default {
 					bsky_json: null,
 					api_url: null,
 					api_json: null,
+					comment_open: false,
+					comment_first: null,
 					loading: true,
 					url: "/",
 					s_a: 0,
@@ -175,7 +185,11 @@ export default {
 			let url = this.api_url + "/users/2/ma?itemsPerPage=4000";
 			axios
 				.get(url,{ crossdomain: true })
-				.then(response => (this.api_json = response));
+				.then(
+					response => {this.api_json = response
+						this.comment_first = this.api_json.data[0]
+					}
+				);
 		}
 };
 </script>
@@ -319,7 +333,16 @@ span.comment-text {
 span.comment {
 }
 
-.bsky_comment {
+button.comment_open {
+	padding:5px 40px 5px 40px;
+	background-color: #fff;
+}
+button.comment_open:hover {
+	background-color: #fff700;
+}
+
+.comment_open {
+	text-align: center;
 }
 
 @media screen and (max-width:1000px) {