From e323e7367e0cb6c1ce38717777cb6b2ac2913d41 Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Wed, 1 Feb 2023 21:30:36 +0800
Subject: [PATCH] fix(blog): styles of comment

---
 web/app/controllers/subdomain/blog/blog.php |  28 ++--
 web/css/uoj-bs5.css                         | 175 ++++----------------
 web/js/uoj.js                               |  12 +-
 3 files changed, 54 insertions(+), 161 deletions(-)

diff --git a/web/app/controllers/subdomain/blog/blog.php b/web/app/controllers/subdomain/blog/blog.php
index 95c0330..8aecb79 100644
--- a/web/app/controllers/subdomain/blog/blog.php
+++ b/web/app/controllers/subdomain/blog/blog.php
@@ -204,31 +204,33 @@ $comments_pag = new Paginator([
 		?>
 			<div id="comment-<?= $comment['id'] ?>" class="list-group-item">
 				<div class="d-flex">
-					<div class="comtposterbox mr-3 flex-shrink-0">
+					<div class="mr-3 flex-shrink-0">
 						<a href="<?= HTML::url('/user/' . $poster['username']) ?>" class="d-none d-sm-block text-decoration-none">
-							<img class="media-object img-rounded" src="<?= $asrc ?>" alt="avatar" />
+							<img class="media-object img-rounded" src="<?= $asrc ?>" alt="Avatar of <?= $poster['username'] ?>" width="64" height="64" />
 						</a>
 					</div>
-					<div id="comment-body-<?= $comment['id'] ?>" class="comtbox flex-grow-1 ms-3">
-						<div class="row">
-							<div class="col-sm-6"><?= UOJUser::getLink($poster['username']) ?></div>
-							<div class="col-sm-6 text-end"><?= ClickZans::getBlock('BC', $comment['id'], $comment['zan']) ?></div>
+					<div id="comment-body-<?= $comment['id'] ?>" class="flex-grow-1 ms-3">
+						<div class="row justify-content-between flex-wrap">
+							<div class="col-auto">
+								<?= UOJUser::getLink($poster['username']) ?>
+							</div>
+							<div class="col-auto">
+								<?= ClickZans::getBlock('BC', $comment['id'], $comment['zan']) ?>
+							</div>
 						</div>
-						<div class="comtbox1"><?= $comment['content'] ?></div>
+						<div class="comment-content my-2"><?= $comment['content'] ?></div>
 						<ul class="list-inline mb-0 text-end">
-							<li>
-								<small class="text-muted">
-									<?= $comment['post_time'] ?>
-								</small>
+							<li class="list-inline-item small text-muted">
+								<?= $comment['post_time'] ?>
 							</li>
-							<li>
+							<li class="list-inline-item">
 								<a class="text-decoration-none" id="reply-to-<?= $comment['id'] ?>" href="#">
 									回复
 								</a>
 							</li>
 						</ul>
 						<?php if ($replies) : ?>
-							<div id="replies-<?= $comment['id'] ?>" class="comtbox5"></div>
+							<div id="replies-<?= $comment['id'] ?>" class="rounded bg-secondary bg-opacity-10 border"></div>
 						<?php endif ?>
 						<script type="text/javascript">
 							showCommentReplies('<?= $comment['id'] ?>', <?= $replies_json ?>);
diff --git a/web/css/uoj-bs5.css b/web/css/uoj-bs5.css
index 3bbccae..80410b7 100644
--- a/web/css/uoj-bs5.css
+++ b/web/css/uoj-bs5.css
@@ -1,5 +1,7 @@
 /* S2OJ Bootstrap 5 Theme */
 
+/* - Global Reset - */
+
 body {
 	overflow-y: scroll;
 }
@@ -12,6 +14,8 @@ a {
 	text-decoration: none;
 }
 
+/* Content */
+
 .uoj-pre {
 	padding: 1em;
 }
@@ -30,6 +34,8 @@ a {
 	font-weight: normal;
 }
 
+/* Headings */
+
 h1,
 .h1 {
 	/* font-size: 2.5rem; */
@@ -65,33 +71,15 @@ h6,
 	font-size: 1rem;
 }
 
-.form-group {
-	margin-bottom: 1rem;
-}
-
-.form-inline .form-control {
-	display: inline-block;
-	width: auto;
-	vertical-align: middle;
-}
-
-.form-row {
-	display: flex;
-	flex-wrap: wrap;
-	margin-right: -5px;
-	margin-left: -5px;
-}
-
-.form-row > .col {
-	padding-left: 5px;
-	padding-right: 5px;
-}
+/* Difficulty */
 
 .uoj-difficulty {
 	font-size: 0.9em;
 	font-weight: bold;
 }
 
+/* Table */
+
 .uoj-table > tbody > tr:last-child,
 .uoj-table > tbody > tr:last-child > td {
 	border-bottom-color: transparent;
@@ -112,6 +100,8 @@ h6,
 	border-right-color: transparent;
 }
 
+/* Click zan */
+
 .uoj-click-zan-block {
 	display: inline-block;
 	min-width: 100px;
@@ -149,6 +139,8 @@ h6,
 	color: red;
 }
 
+/* Submission details */
+
 .uoj-submission-result-item {
 	cursor: pointer;
 }
@@ -177,6 +169,8 @@ h6,
 	color: #ff4f4f;
 }
 
+/* Markdown */
+
 .markdown-body h1 {
 	font-size: 2em;
 	margin-bottom: 1rem;
@@ -238,61 +232,29 @@ h6,
 	margin-bottom: 1em;
 }
 
+/* PDF */
+
 .pdf-page-canvas {
 	width: 100% !important;
 }
 
-form.uoj-bs4-form-inline {
-	display: inline-block;
-	margin-right: 0.3em;
-}
-
-form.uoj-bs4-form-narrow label.col-sm-2 {
-	max-width: 100% !important;
-	padding: 0 !important;
-}
-
-form.uoj-bs4-form-narrow div.col-sm-3 {
-	max-width: 100% !important;
-	padding: 0 !important;
-}
+/* Form */
 
 form.form-horizontal {
 	margin-bottom: 8px;
 }
 
-form.uoj-bs4-form-compressed {
-	margin: 12px 0;
+.form-group {
+	margin-bottom: 1rem;
 }
 
-form.uoj-bs4-form-compressed div.form-group {
+.form-inline .form-control {
 	display: inline-block;
-	width: 24em;
+	width: auto;
+	vertical-align: middle;
 }
 
-form.uoj-bs4-form-compressed div.form-group label.col-sm-2 {
-	display: inline-block;
-	max-width: 100%;
-	width: 6em;
-	padding: 0;
-}
-
-form.uoj-bs4-form-compressed div.form-group div.col-sm-3 {
-	display: inline-block;
-	max-width: 100%;
-	width: 16em;
-}
-
-form.uoj-bs4-form-compressed div.text-center,
-form.uoj-bs4-form-compressed div.text-compressed,
-form.uoj-bs4-form-compressed button {
-	display: inline-block;
-}
-
-form.uoj-bs4-form-compressed button {
-	position: relative;
-	top: -6px;
-}
+/* User accepted problems list */
 
 @media (max-width: 767px) {
 	.uoj-ac-problems-list li {
@@ -322,91 +284,14 @@ form.uoj-bs4-form-compressed button {
 
 /* Comments */
 
-.comt {
-}
-
-.comtposterbox {
-	text-align: center;
-}
-.comtbox {
-	width: 100%;
-}
-.comtbox1 {
+.comment-content {
 	white-space: pre-wrap;
 	word-break: break-all;
-	min-height: 80px;
-	margin-top: 10px;
-	margin-bottom: 10px;
-}
-.comtbox2 {
-	text-align: right;
-}
-.comtbox3 {
-	display: inline-block;
-	margin-right: 5px;
-}
-.comtbox4 {
-	display: inline-block;
-}
-.comtbox5 {
-	background-image: linear-gradient(to bottom, #f5f5f5 0, #fafafa 100%);
-	background-repeat: repeat-x;
-	border-color: #dcdcdc;
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
-		0 1px 0 rgba(255, 255, 255, 0.1);
-	padding: 9px;
-	border-radius: 3px;
 
-	min-height: 20px;
-	margin-bottom: 20px;
-	border: 1px solid #e3e3e3;
-
-	margin-top: 10px;
+	min-height: 50px;
 }
-.comtbox6 {
-	white-space: pre-wrap;
-	word-break: break-all;
-}
-.comtbox7 {
-	background-image: linear-gradient(to bottom, #f5f5f5 0%, #fafafa 100%);
-	background-repeat: repeat-x;
-	border-color: #dcdcdc;
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
-		0 1px 0 rgba(255, 255, 255, 0.1);
-	border-radius: 3px;
 
-	margin-left: 50px;
-	margin-top: 10px;
-	margin-bottom: 2px;
-	padding-left: 10px;
-	padding-right: 10px;
-	padding-top: 10px;
-	white-space: nowrap;
-	padding-bottom: 10px;
-	border: 1px solid #e3e3e3;
-
-	text-align: left;
-}
-.comtbox8 {
-	background-image: linear-gradient(to bottom, #ffffff 100%, #fafafa 0%);
-	background-repeat: repeat-x;
-	border-color: #dcdcdc;
-	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
-		0 1px 0 rgba(255, 255, 255, 0.1);
-	border-radius: 3px;
-
-	margin-left: 50px;
-	margin-top: 10px;
-	margin-bottom: 2px;
-	padding-left: 10px;
-	padding-right: 10px;
-	padding-top: 10px;
-	white-space: nowrap;
-	padding-bottom: 10px;
-	border: 1px solid #e3e3e3;
-
-	text-align: left;
-}
+/* Standing table */
 
 .uoj-standings-table tr td:first-child,
 .uoj-standings-table tr th:first-child {
@@ -464,15 +349,21 @@ form.uoj-bs4-form-compressed button {
 	}
 }
 
+/* Fix CodeMirror */
+
 .CodeMirror-linenumber {
 	font-size: 14px !important;
 }
 
+/* Back button */
+
 .uoj-back-btn {
 	--bs-btn-hover-bg: #d3d4d570;
 	--bs-btn-hover-border-color: transparent;
 }
 
+/* Remote Content */
+
 .remote-content center > img + span {
 	display: block;
 	font-size: 90%;
diff --git a/web/js/uoj.js b/web/js/uoj.js
index 4626b68..01451b9 100644
--- a/web/js/uoj.js
+++ b/web/js/uoj.js
@@ -1030,13 +1030,13 @@ function showCommentReplies(id, replies) {
 		function(reply) {
 			return $('<tr id="' + 'comment-' + reply.id + '" />').append(
 				$('<td />').append(
-					$('<div class="comtbox6">' + getUserLink(reply.poster, reply.poster_realname, reply.poster_username_color) + '：' + reply.content + '</div>')
+					$('<div class="comment-content">' + getUserLink(reply.poster, reply.poster_realname, reply.poster_username_color) + '：' + reply.content + '</div>')
 				).append(
-					$('<ul class="' + (isBootstrap5Page ? 'text-end mb-0' : 'text-right bot-buffer-no') + ' list-inline" />').append(
-						'<li>' + '<small class="text-muted">' + reply.post_time + '</small>' + '</li>'
+					$('<ul class="text-end mb-0 list-inline" />').append(
+						'<li class="list-inline-item small text-muted">' + reply.post_time + '</li>'
 					).append(
-						$('<li />').append(
-							$('<a class=" ' + (isBootstrap5Page ? ' text-decoration-none ' : '') + ' " href="#">回复</a>').click(function (e) {
+						$('<li class="list-inline-item" />').append(
+							$('<a href="#">回复</a>').click(function (e) {
 								e.preventDefault();
 								toggleFormReply(reply.id, '回复 @' + reply.poster + '：');
 							})
@@ -1045,7 +1045,7 @@ function showCommentReplies(id, replies) {
 				)
 			).uoj_highlight();
 		}, {
-			table_classes: ['table', 'table-condensed'],
+			table_classes: ['table'],
 			page_len: 5,
 			prevent_focus_on_click: true
 		}