baoshuo/S2OJ
baoshuo/S2OJ
1
1
Fork 0
mirror of https://github.com/renbaoshuo/S2OJ.git synced 2024-11-22 14:08:42 +00:00
Code Issues Actions Packages Releases Activity

refactor: blog_detail page with bs5

Browse Source
This commit is contained in:
Baoshuo Ren 2022-09-29 22:02:56 +08:00
parent 6643d21ed0
commit 74e502a853
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
5 changed files with 233 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
web/app/controllers/subdomain/blog/blog.php
View File

@ -12,6 +12,10 @@
become403Page();
}
if (!isset($_COOKIE['bootstrap4'])) {
$REQUIRE_LIB['bootstrap5'] = '';
}
$comment_form = new UOJForm('comment');
$comment_form->addVTextArea('comment', '内容', '',
function($comment) {
@ -57,7 +61,6 @@
$comment_form->succ_href = getLongTablePageRawUri($page);
};
$comment_form->ctrl_enter_submit = true;
$comment_form->runAtServer();
$reply_form = new UOJForm('reply');
@ -143,11 +146,22 @@
?>
<?php
$REQUIRE_LIB['mathjax'] = '';
if (isset($REQUIRE_LIB['bootstrap5'])) {
$REQUIRE_LIB['hljs'] = '';
} else {
$REQUIRE_LIB['shjs'] = '';
}
?>
<?php echoUOJPageHeader(HTML::stripTags($blog['title']) . ' - 博客') ?>
<?php echoBlog($blog, array('show_title_only' => isset($_GET['page']) && $_GET['page'] != 1)) ?>
<h2>评论 <span class="glyphicon glyphicon-comment"></span></h2>
<h2>
评论
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
<i class="bi bi-chat-fill"></i>
<?php else: ?>
<span class="glyphicon glyphicon-comment"></span>
<?php endif ?>
</h2>
<div class="list-group">
<?php if ($comments_pag->isEmpty()): ?>
<div class="list-group-item text-muted">暂无评论</div>
@ -164,19 +178,63 @@
$replies_json = json_encode($replies);
?>
<div id="comment-<?= $comment['id'] ?>" class="list-group-item">
<div class="media">
<div class="media-left comtposterbox mr-3">
<a href="<?= HTML::url('/user/profile/'.$poster['username']) ?>" class="d-none d-sm-block">
<div class="
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
d-flex
<?php else: ?>
media
<?php endif ?>
">
<div class="comtposterbox mr-3
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
flex-shrink-0
<?php else: ?>
media-left
<?php endif ?>">
<a href="<?= HTML::url('/user/profile/'.$poster['username']) ?>" class="d-none d-sm-block
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-decoration-none
<?php endif ?>">
<img class="media-object img-rounded" src="<?= $asrc ?>" alt="avatar" />
</a>
</div>
<div id="comment-body-<?= $comment['id'] ?>" class="media-body comtbox">
<div id="comment-body-<?= $comment['id'] ?>" class="comtbox
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
flex-grow-1 ms-3
<?php else: ?>
media-body
<?php endif ?>">
<div class="row">
<div class="col-sm-6"><?= getUserLink($poster['username']) ?></div>
<div class="col-sm-6 text-right"><?= getClickZanBlock('BC', $comment['id'], $comment['zan']) ?></div>
<div class="col-sm-6
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-end
<?php else: ?>
text-right
<?php endif ?>"><?= getClickZanBlock('BC', $comment['id'], $comment['zan']) ?></div>
</div>
<div class="comtbox1"><?= $comment['content'] ?></div>
<ul class="text-right list-inline bot-buffer-no"><li><small class="text-muted"><?= $comment['post_time'] ?></small></li><li><a id="reply-to-<?= $comment['id'] ?>" href="#">回复</a></li></ul>
<ul class="list-inline bot-buffer-no
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-end
<?php else: ?>
text-right
<?php endif ?>">
<li>
<small class="text-muted">
<?= $comment['post_time'] ?>
</small>
</li>
<li>
<a class="
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-decoration-none
<?php endif ?>"
id="reply-to-<?= $comment['id'] ?>" href="#">
回复
</a>
</li>
</ul>
<?php if ($replies): ?>
<div id="replies-<?= $comment['id'] ?>" class="comtbox5"></div>
<?php endif ?>

5
web/app/libs/uoj-html-lib.php
View File

@ -1294,6 +1294,8 @@ function echoHacksList($cond, $tail, $config, $user) {
}
function echoBlog($blog, $config = array()) {
global $REQUIRE_LIB;
$default_config = array(
'blog' => $blog,
'show_title_only' => false,
@ -1304,6 +1306,9 @@ function echoBlog($blog, $config = array()) {
$config[$key] = $val;
}
}
$config['REQUIRE_LIB'] = $REQUIRE_LIB;
uojIncludeView('blog-preview', $config);
}
function echoBlogTag($tag) {

77
web/app/views/blog-preview.php
View File

@ -14,14 +14,43 @@
$blog_type = $blog['type'] == 'B' ? 'post' : 'slide';
?>
<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
<link rel="stylesheet" type="text/css" href="<?= HTML::url('/css/markdown.css') ?>">
<h2><?= $extra_text ?><a class="header-a" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>"><?= $blog['title'] ?></a></h2>
<?php endif ?>
<h1 class="h2">
<?= $extra_text ?>
<a class="header-a
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-decoration-none text-body
<?php endif ?>
" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">
<?= $blog['title'] ?>
</a>
</h1>
<div><?= $blog['post_time'] ?> <strong>By</strong> <?= getUserLink($blog['poster']) ?> (<strong>博客 ID: </strong> <?= $blog['id'] ?>)</div>
<?php if (!$show_title_only): ?>
<div class="card mb-4">
<div class="card-body">
<?php if ($blog_type == 'post'): ?>
<article class="markdown-body"><?= $content ?></article>
<!-- content -->
<article class="markdown-body">
<?= $content ?>
</article>
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
<script>
$(document).ready(function() {
$('.markdown-body table').each(function() {
$(this).addClass('table table-bordered table-striped');
});
});
</script>
<?php endif ?>
<!-- content end -->
<?php elseif ($blog_type == 'slide'): ?>
<article>
<div class="embed-responsive embed-responsive-16by9">
@ -33,19 +62,53 @@
</article>
<?php endif ?>
</div>
<div class="card-footer text-right">
<ul class="list-inline bot-buffer-no">
<div class="card-footer
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-end
<?php else: ?>
text-right
<?php endif ?>">
<ul class="list-inline
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
mb-0
<?php else: ?>
bot-buffer-no
<?php endif ?>">
<li class="list-inline-item">
<?php foreach (queryBlogTags($blog['id']) as $tag): ?>
<?php echoBlogTag($tag) ?>
<?php endforeach ?>
</li>
<?php if ($is_preview): ?>
<li class="list-inline-item"><a href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">阅读全文</a></li>
<li class="list-inline-item">
<a class="
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-decoration-none
<?php endif ?>
" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">
阅读全文
</a>
</li>
<?php endif ?>
<?php if (Auth::check() && (isSuperUser(Auth::user()) || Auth::id() == $blog['poster'])): ?>
<li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/'.$blog_type.'/'.$blog['id'].'/write')?>">修改</a></li>
<li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">删除</a></li>
<li class="list-inline-item">
<a class="
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-decoration-none
<?php endif ?>
" href="<?=HTML::blog_url(UOJContext::userid(), '/'.$blog_type.'/'.$blog['id'].'/write')?>">
修改
</a>
</li>
<li class="list-inline-item">
<a class="
<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
text-decoration-none
<?php endif ?>
" href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">
删除
</a>
</li>
<?php endif ?>
<li class="list-inline-item"><?= getClickZanBlock('B', $blog['id'], $blog['zan']) ?></li>
</ul>

88
web/css/uoj-bs5.css
View File

@ -249,3 +249,91 @@ form.uoj-form-compressed button {
color: var(--bs-nav-link-color) !important;
background-color: #eeeeee70;
}
/* Comments */
.comt {
}
.comtposterbox {
text-align: center;
}
.comtbox {
width: 100%;
}
.comtbox1 {
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;
}
.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;
}

4
web/js/uoj.js
View File

@ -1074,11 +1074,11 @@ function showCommentReplies(id, replies) {
$('<td />').append(
$('<div class="comtbox6">' + getUserLink(reply.poster, reply.poster_realname) + '：' + reply.content + '</div>')
).append(
$('<ul class="text-right list-inline bot-buffer-no" />').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>'
).append(
$('<li />').append(
$('<a href="#">回复</a>').click(function (e) {
$('<a class=" ' + (isBootstrap5Page ? ' text-decoration-none ' : '') + ' " href="#">回复</a>').click(function (e) {
e.preventDefault();
toggleFormReply(reply.id, '回复 @' + reply.poster + '：');
})