fix(blog): styles of comment
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Baoshuo Ren 2023-02-01 21:30:36 +08:00
parent 847a34519d
commit e323e7367e
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
3 changed files with 54 additions and 161 deletions

View File

@ -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="comtbox1"><?= $comment['content'] ?></div>
<div class="col-auto">
<?= ClickZans::getBlock('BC', $comment['id'], $comment['zan']) ?>
</div>
</div>
<div class="comment-content my-2"><?= $comment['content'] ?></div>
<ul class="list-inline mb-0 text-end">
<li>
<small class="text-muted">
<li class="list-inline-item small text-muted">
<?= $comment['post_time'] ?>
</small>
</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 ?>);

View File

@ -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%;

View File

@ -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
}