198 lines
11 KiB
HTML
198 lines
11 KiB
HTML
{% extends "other_base.html"%}
|
|
{% block title%}Article|COVID-19 Detector{% endblock %}
|
|
{% block content %}
|
|
<div class="page-wrapper">
|
|
<section class="mypage-header">
|
|
</section><!-- /.page-header -->
|
|
<div class="row">
|
|
<div class="container" style="background-color: #f3f5f9;border-radius: 15px;">
|
|
<div class="post">
|
|
<div class="row align-items-center" style="margin-top: 25px;">
|
|
<div class="col-1">
|
|
{% if post.author.has_avatar %}
|
|
<img src="{{ url_for('static', filename='images/avatar/' ~ post.author.username ~ '.jpg')}}" alt="头像"
|
|
class="img-fluid rounded-circle" style="width:75px; height:75px;">
|
|
{% else %}
|
|
<div class="postavatar {{ post.author.avatar_color }}" style="width:75px; height:75px;">
|
|
<span id="initial" style="z-index: 1;">{{ post.author.username[0] }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-7">
|
|
<h5 style="position:relative; top:12px;font-size:20px;">
|
|
{{ post.author.username }}</h5>
|
|
</div>
|
|
<div class="col-4 text-right" >
|
|
<p>发布时间: {{ moment(post.timestamp).format('LLL') }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h4
|
|
style="position:relative; top:12px;font-size:25px; font-weight: bold; margin-bottom: 20px;">
|
|
{{ post.title }}</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p>{{ post.content }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
{% for i in range(1,post.img_count+1) %}
|
|
<div class="col-md-4">
|
|
<img src="{{ url_for('static', filename='images/post/' ~post.id~ '/' ~i~ '.jpg')}}"
|
|
class="img-fluid" style="max-height: 300px;" data-toggle="modal"
|
|
data-target="#myModal{{post.id}}a{{ i }}">
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% for i in range(1,post.img_count+1) %}
|
|
<div class="modal fade" id="myModal{{post.id}}a{{ i }}" tabindex="-1" role="dialog"
|
|
aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body text-center p-0"
|
|
style="display: flex; justify-content: center; align-items: center;">
|
|
<img src="{{ url_for('static', filename='images/post/' ~post.id~ '/' ~i~ '.jpg')}}"
|
|
class="img-fluid"
|
|
style="max-height: 70vh; max-width: 70vw; object-fit: contain !important;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<hr>
|
|
<h3 id="comments">评论区</h3>
|
|
<hr>
|
|
{% if empty_comments %}
|
|
<p style="font-size: 20px;"> 评论区空空如也~</p>
|
|
{% else %}
|
|
{% for comment, author in comment_pairs %}
|
|
<div class="row align-items-start" style="margin-top: 10px;">
|
|
<div class="col-1 d-flex flex-column" style="height: 55px;">
|
|
{% if author.has_avatar %}
|
|
<img src="{{ url_for('static', filename='images/avatar/' ~author.username~ '.jpg')}}" alt="头像"
|
|
class="img-fluid rounded-circle align-self-center" style="width:55px; height:55px;">
|
|
{% else %}
|
|
<div class="postavatar {{ author.avatar_color }} align-self-center"
|
|
style="width:55px; height:55px;font-size: 50px">
|
|
<span id="initial" style="z-index: 1;">{{ author.username[0] }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-8" style="padding-left: 0px;">
|
|
<h5 style="position:relative; top:12px;font-size:18px;font-family: 'Times New Roman';">
|
|
{{ author.username }} {{ moment(comment.timestamp).fromNow() }}</h5>
|
|
<p style="font-size: 15px;">{{ comment.body }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<div class="post-actions-container stricky_bottom">
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<div class="input-group">
|
|
<form method="POST">
|
|
{{ form.csrf_token }}
|
|
<div style="display: flex;">
|
|
{% if current_user.has_avatar %}
|
|
<img src="{{ url_for('static', filename='images/avatar/' ~current_user.username~ '.jpg')}}" alt="头像"
|
|
class="img-fluid rounded-circle align-self-center"
|
|
style="width: 50px; height: 50px; margin-right: 10px;margin-bottom: 10px;">
|
|
{% else %}
|
|
<div class="postavatar {{ current_user.avatar_color }} align-self-center"
|
|
style="width: 50px; height: 50px; margin-right: 10px; font-size: 50px;margin-bottom: 10px;">
|
|
<span id="initial" style="z-index: 1;">{{ current_user.username[0] }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="form-group" style="margin-top: 10px;">
|
|
{{form.body(class="form-control", style="width:500px;")}}
|
|
{% if form.body.errors %}
|
|
<ul class="errors">
|
|
{% for error in form.body.errors %}
|
|
<li>{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
<div class="form-group" style="margin-top: 10px;">
|
|
{{ form.submit(class="btn btn-primary") }}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-4 text-right" style="margin-top: 8px;">
|
|
<div class="btn-group" role="group" aria-label="Post Actions">
|
|
<div class="btn-group" role="group" aria-label="Collect Button">
|
|
<button class="btn btn-sm btn-primary{% if has_collected %} active{% endif %}"
|
|
id="collect-{{ post.id }}" onclick="collect('{{ post.id }}')">
|
|
{% if has_collected %}
|
|
<i class="fas fa-bookmark" style="margin-right: 10px;color: orange;"></i>
|
|
{% else %}
|
|
<i class="fas fa-bookmark" style="margin-right: 10px;"></i>
|
|
{% endif %}
|
|
{{ post.collect_num }} 个收藏
|
|
</button>
|
|
</div>
|
|
<div class="btn-group" role="group" aria-label="Comment Button">
|
|
<button class="btn btn-sm btn-primary" onclick="showCommentModal();
|
|
">
|
|
<i class="fas fa-comment" style="margin-right: 10px;"></i> {{ post.comment_num
|
|
}} 条评论
|
|
</button>
|
|
</div>
|
|
|
|
<div class="btn-group" role="group" aria-label="Like Button">
|
|
<button class="btn btn-sm btn-primary{% if has_liked %} active{% endif %}"
|
|
id="like-{{ post.id }}" onclick="like('{{ post.id }}')">
|
|
{% if has_liked %}
|
|
<i class="fas fa-heart" style="margin-right: 10px; color:red;"></i>
|
|
{% else %}
|
|
<i class="fas fa-heart" style="margin-right: 10px;"></i>
|
|
{% endif %}
|
|
{{ post.like_num }} 个赞同
|
|
</button>
|
|
</div>
|
|
<div class="btn-group" role="group" aria-label="share Button">
|
|
<button class="btn btn-sm btn-primary" id="share-{{ post.id }}"
|
|
onclick="share('{{ post.id }}')">
|
|
<i class="fas fa-share" style="margin-right: 5px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.img-fluid').click(function () {
|
|
$($(this).data("target")).modal("show");
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
function showCommentModal() {
|
|
// 通过location属性跳转到评论区的锚点
|
|
location.href = "#comments";
|
|
}
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('form').submit(function () {
|
|
$('html, body').animate({
|
|
scrollTop: $(window).scrollTop()
|
|
}, 0);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |