From 92e2d62bc938db09af6c3546c37cf5aa6abba0c1 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Wed, 3 Apr 2024 22:36:05 +0900
Subject: [PATCH] fix

---
 src/App.vue | 80 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 423e456..a0d4f01 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,31 +58,33 @@
 		</div>
 
 
-		<div class="bsky_comment" v-if="comment_open == false">
-			<span class="comment">
-				<p class="comment-body" v-if="comment_first">
-					<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.updated_at"><a :href="comment_first.bsky_url">{{ moment(comment_first.updated_at) }}</a></span> <span class="comment-handle" v-if="comment_first.handle"><a :href="'https://' + comment_first.bsky_url.split('/').slice(2,5).join('/')">@{{ comment_first.handle }}</a></span>
-				<span class="comment-text" v-if="comment_first.text">{{ comment_first.text }}</span>
+		<div class="comment">
+			<div class="bsky_comment" v-if="comment_open == false">
+				<span class="comment">
+					<p class="comment-body" v-if="comment_first">
+						<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.updated_at"><a :href="comment_first.bsky_url">{{ moment(comment_first.updated_at) }}</a></span> <span class="comment-handle" v-if="comment_first.handle"><a :href="'https://' + comment_first.bsky_url.split('/').slice(2,5).join('/')">@{{ comment_first.handle }}</a></span>
+					<span class="comment-text" v-if="comment_first.text">{{ comment_first.text }}</span>
+				</p>
+			</span>
+			<div class="comment_open">
+				<p>
+					<a :href="comment_first.bsky_url" target="_blank">post</a>
+				</p>
+				<p>
+					<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
+				</p>
+			</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">
+					{{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
+					<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.updated_at"><a :href="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle"><a :href="'https://' + i.bsky_url.split('/').slice(2,5).join('/')">@{{ i.handle }}</a></span>
+				<span class="comment-text" v-if="i.text">{{ i.text }}</span>
 			</p>
 		</span>
-		<div class="comment_open">
-			<p>
-				<a :href="comment_first.bsky_url" target="_blank">post</a>
-			</p>
-			<p>
-				<button class="comment_open" v-on:click="comment_open = !comment_open"><i class="fa-solid fa-chevron-down"></i></button>
-			</p>
-		</div>
+		<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="bsky_comment" v-else>
-		<span v-for="i in api_json.data" class="comment">
-			<p class="comment-body" v-if="i">
-				{{ axios_check('/icon/' + i.did.replace('did:plc:', '') + '.jpg') }}
-				<img :src="'/icon/' + i.did.replace('did:plc:', '') + '.jpg'" v-if="url_check" class="comment"/><img :src="i.avatar" v-else-if="i.avatar" class="comment"/>  <span class="comment-time" v-if="i.updated_at"><a :href="i.bsky_url">{{ moment(i.updated_at) }}</a></span> <span class="comment-handle" v-if="i.handle"><a :href="'https://' + i.bsky_url.split('/').slice(2,5).join('/')">@{{ i.handle }}</a></span>
-			<span class="comment-text" v-if="i.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">
@@ -238,7 +240,7 @@ a span.icon-ai {
 }
 
 .hooper-progress-inner {
-	background-color: #aba700;
+	background-color: #ddd700;
 }
 
 button {
@@ -261,7 +263,7 @@ ul.hooper-track {
 
 .page {
 	text-align:center;
-	background-color: rgba(184, 207, 224, .24);
+	background-color: #f1f1f1;
 	padding: 50px 0 50px 0;
 }
 
@@ -294,13 +296,14 @@ table {
 	text-align: center;
 	margin-left: auto;
 	margin-right: auto;
+	word-break: break-all;
 }
 
 thead, td, tr, th {
 	padding:10px;
 	background: #fff;
 	border: solid 1px #fff;
-	padding: 5px 25px 5px 25px;
+	padding: 15px 25px 15px 25px;
 }
 
 th.row {
@@ -341,7 +344,7 @@ span.comment-handle {
 }
 
 span.comment-handle a {
-	color: #aba700;
+	color: #313131;
 }
 
 img.comment {
@@ -349,7 +352,7 @@ img.comment {
 }
 
 p.comment-body {
-	padding: 5px 70px 5px 70px;
+	padding: 5px 40px 15px 40px;
 	border-bottom: solid 1px #eee;
 }
 
@@ -357,9 +360,6 @@ span.comment-text {
 	padding:10px;
 }
 
-span.comment {
-}
-
 button.comment_open {
 	padding:20px 40px 20px 40px;
 	background-color: rgba(184,207,224,.24);
@@ -379,8 +379,24 @@ button.comment_open:hover {
 	color: rgb(16, 131, 254);
 }
 
+.bsky_comment {
+	background-color: #fff;
+	width: 700px;
+	margin: 0px auto;
+	border: solid 1px #eee;
+}
+
+.comment {
+	background-color: #fff;
+}
+
 @media screen and (max-width:1000px) { 
-	img{ width:100%; }
+	img{
+		width:100%;
+	}
+	.bsky_comment {
+		width:100%;
+	}
 	.page_title a img {
 		width:100%;
 	}
@@ -398,4 +414,6 @@ button.comment_open:hover {
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
+
+	/* color: #aba700 #fff700 #313131 rgba(184, 207, 224, .24) rgb(16, 131, 254) #ddd700 */
 </style>