change comment style
This commit is contained in:
Tuan-Dung Bui
parent
2bd0e41653
commit
d7672cf81b
9 changed files with 272 additions and 124 deletions
|
|
@ -27,9 +27,9 @@
|
|||
<span class="actionbar-text">
|
||||
{{_("Comment")}}
|
||||
</span>
|
||||
{% if comment_count %}
|
||||
{% if replies %}
|
||||
<span style="margin-left: 0.2em">
|
||||
({{comment_count}})
|
||||
({{replies}})
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
|
|
|||
121
templates/comments/content-list.html
Normal file
121
templates/comments/content-list.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
{% set logged_in = request.user.is_authenticated %}
|
||||
{% set profile = request.profile if logged_in else None %}
|
||||
{% for node in mptt_tree(comment_list) recursive %}
|
||||
<li id="comment-{{ node.id }}" data-revision="{{ node.revisions - 1 }}" data-max-revision="{{ node.revisions - 1 }}"
|
||||
data-revision-ajax="{{ url('comment_revision_ajax', node.id) }}" class="comment">
|
||||
<div class="comment-display{% if node.score <= vote_hide_threshold %} bad-comment{% endif %}">
|
||||
<div class="info">
|
||||
<div class="vote">
|
||||
{% if logged_in %}
|
||||
<a href="javascript:comment_upvote({{ node.id }})"
|
||||
class="upvote-link fa fa-chevron-up fa-fw{% if node.vote_score == 1 %} voted{% endif %}"></a>
|
||||
{% else %}
|
||||
<a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')"
|
||||
title="{{ _('Please login to vote') }}" class="upvote-link fa fa-chevron-up fa-fw"></a>
|
||||
{% endif %}
|
||||
<br>
|
||||
<div class="comment-score">{{ node.score }}</div>
|
||||
{% if logged_in %}
|
||||
<a href="javascript:comment_downvote({{ node.id }})"
|
||||
class="downvote-link fa fa-chevron-down fa-fw{% if node.vote_score == -1 %} voted{% endif %}"></a>
|
||||
{% else %}
|
||||
<a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')"
|
||||
title="{{ _('Please login to vote') }}" class="downvote-link fa fa-chevron-down fa-fw"></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% with author=node.author, user=node.author.user %}
|
||||
<a href="{{ url('user_page', user.username) }}" class="user">
|
||||
<img src="{{ gravatar(author, 135) }}" class="gravatar">
|
||||
</a>
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="header">
|
||||
{{ link_user(node.author) }}
|
||||
{{ relative_time(node.time, abs=_('commented on {time}'), rel=_('commented {time}')) }}
|
||||
<span class="comment-spacer"></span>
|
||||
<span class="comment-operation">
|
||||
{% if node.revisions > 1 %}
|
||||
<span class="comment-edits">
|
||||
<a href="javascript:show_revision({{ node.id }}, -1)" class="previous-revision">←</a>
|
||||
<span class="comment-edit-text">
|
||||
{% if node.revisions > 2 %}
|
||||
{% trans edits=node.revisions - 1 %}edit {{ edits }}{% endtrans %}
|
||||
{% else %}
|
||||
{{ _('edited') }}
|
||||
{% endif %}
|
||||
</span>
|
||||
<a href="javascript:show_revision({{ node.id }}, 1)" style="visibility: hidden"
|
||||
class="next-revision">→</a>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="comment-edits"></span>
|
||||
{% endif %}
|
||||
<a href="#comment-{{ node.id }}" title="{{ _('Link') }}" class="comment-link">
|
||||
<i class="fa fa-link fa-fw"></i>
|
||||
</a>
|
||||
{% if logged_in and not comment_lock %}
|
||||
{% set can_edit = node.author.id == profile.id and not profile.mute %}
|
||||
{% if can_edit %}
|
||||
<a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
|
||||
href="{{ url('comment_edit', node.id) }}" title="{{ _('Edit') }}" class="edit-link">
|
||||
<i class="fa fa-pencil fa-fw"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="javascript:reply_comment({{ node.id }})" title="{{ _('Reply') }}">
|
||||
<i class="fa fa-reply fa-fw"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if perms.judge.change_comment %}
|
||||
{% if can_edit %}
|
||||
<a href="javascript:reply_comment({{ node.id }})" title="{{ _('Reply') }}"><i
|
||||
class="fa fa-reply fa-fw"></i></a>
|
||||
{% else %}
|
||||
<a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
|
||||
href="{{ url('comment_edit', node.id) }}" title="{{ _('Edit') }}" class="edit-link"><i
|
||||
class="fa fa-pencil fa-fw"></i></a>
|
||||
{% endif %}
|
||||
<a href="javascript:" title="{{ _('Hide') }}" data-id="{{ node.id }}" class="hide-comment"><i
|
||||
class="fa fa-trash fa-fw"></i></a>
|
||||
<a href="{{ url('admin:judge_comment_change', node.id) }}" title="{{ _('Admin') }}"><i
|
||||
class="fa fa-cog fa-fw"></i></a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="content content-description">
|
||||
<div class="comment-body" {% if node.score <=vote_hide_threshold %} style="display:none" {% endif %}>
|
||||
{{ node.body|markdown(lazy_load=True)|reference|str|safe }}
|
||||
</div>
|
||||
{% if node.score <= vote_hide_threshold %} <div class="comment-body bad-comment-body">
|
||||
<p>
|
||||
{% trans id=node.id %}This comment is hidden due to too much negative feedback. Click <a
|
||||
href="javascript:comment_show_content({{ id }})">here</a> to view it.{% endtrans %}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- {{ node.count_replies }}
|
||||
{{node.revisions - 1}} -->
|
||||
{% if node.revisions == 1 %}
|
||||
{% set real_replies = node.count_replies - node.revisions + 1 %}
|
||||
{% else %}
|
||||
{% set real_replies = node.count_replies - node.revisions + 2 %}
|
||||
{% endif %}
|
||||
|
||||
{% if real_replies > 1 %}
|
||||
<a href="javascript:comment_reply({{ node.id }}, {{ object.id }})" class="show_more_reply"> {{ real_replies }} {{ _(' Replies ') }} </a>
|
||||
{% elif real_replies %}
|
||||
<a href="javascript:comment_reply({{ node.id }}, {{ object.id }})" class="show_more_reply"> {{ real_replies }} {{ _(' Reply ') }} </a>
|
||||
{% endif %}
|
||||
</li>
|
||||
<ul id="comment-{{ node.id }}-reply" class="reply-comment" hidden></ul>
|
||||
<ul id="comment-{{ node.id }}-children" class="comments"> </ul>
|
||||
{% endfor %}
|
||||
|
||||
{% if replies - offset > 0 %}
|
||||
<a href="javascript:comment_show_more({{ comment_root_id }}, {{ object.id }}, {{ offset }} )" class="show_more_comment"> {{ replies - offset }} Replies More</a>
|
||||
{% endif %}
|
||||
|
|
@ -37,118 +37,8 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
{% if has_comments %}
|
||||
<ul class="comments top-level-comments new-comments">
|
||||
{% set logged_in = request.user.is_authenticated %}
|
||||
{% set profile = request.profile if logged_in else None %}
|
||||
{% for node in mptt_tree(comment_list) recursive %}
|
||||
<li id="comment-{{ node.id }}" data-revision="{{ node.revisions - 1 }}"
|
||||
data-max-revision="{{ node.revisions - 1 }}"
|
||||
data-revision-ajax="{{ url('comment_revision_ajax', node.id) }}" class="comment">
|
||||
<div class="comment-display{% if node.score <= vote_hide_threshold %} bad-comment{% endif %}">
|
||||
<div class="info">
|
||||
<div class="vote">
|
||||
{% if logged_in %}
|
||||
<a href="javascript:comment_upvote({{ node.id }})"
|
||||
class="upvote-link fa fa-chevron-up fa-fw{% if node.vote_score == 1 %} voted{% endif %}"></a>
|
||||
{% else %}
|
||||
<a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')" title="{{ _('Please login to vote') }}"
|
||||
class="upvote-link fa fa-chevron-up fa-fw"></a>
|
||||
{% endif %}
|
||||
<br>
|
||||
<div class="comment-score">{{ node.score }}</div>
|
||||
{% if logged_in %}
|
||||
<a href="javascript:comment_downvote({{ node.id }})"
|
||||
class="downvote-link fa fa-chevron-down fa-fw{% if node.vote_score == -1 %} voted{% endif %}"></a>
|
||||
{% else %}
|
||||
<a href="javascript:alert('{{ _('Please login to vote')|escapejs }}')" title="{{ _('Please login to vote') }}"
|
||||
class="downvote-link fa fa-chevron-down fa-fw"></a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% with author=node.author, user=node.author.user %}
|
||||
<a href="{{ url('user_page', user.username) }}" class="user">
|
||||
<img src="{{ gravatar(author, 135) }}" class="gravatar">
|
||||
</a>
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="header">
|
||||
{{ link_user(node.author) }}
|
||||
{{ relative_time(node.time, abs=_('commented on {time}'), rel=_('commented {time}')) }}
|
||||
<span class="comment-spacer"></span>
|
||||
<span class="comment-operation">
|
||||
{% if node.revisions > 1 %}
|
||||
<span class="comment-edits">
|
||||
<a href="javascript:show_revision({{ node.id }}, -1)"
|
||||
class="previous-revision">←</a>
|
||||
<span class="comment-edit-text">
|
||||
{% if node.revisions > 2 %}
|
||||
{% trans edits=node.revisions - 1 %}edit {{ edits }}{% endtrans %}
|
||||
{% else %}
|
||||
{{ _('edited') }}
|
||||
{% endif %}
|
||||
</span>
|
||||
<a href="javascript:show_revision({{ node.id }}, 1)" style="visibility: hidden"
|
||||
class="next-revision">→</a>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="comment-edits"></span>
|
||||
{% endif %}
|
||||
<a href="#comment-{{ node.id }}" title="{{ _('Link') }}" class="comment-link">
|
||||
<i class="fa fa-link fa-fw"></i>
|
||||
</a>
|
||||
{% if logged_in and not comment_lock %}
|
||||
{% set can_edit = node.author.id == profile.id and not profile.mute %}
|
||||
{% if can_edit %}
|
||||
<a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
|
||||
href="{{ url('comment_edit', node.id) }}"
|
||||
title="{{ _('Edit') }}" class="edit-link">
|
||||
<i class="fa fa-pencil fa-fw"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="javascript:reply_comment({{ node.id }})"
|
||||
title="{{ _('Reply') }}">
|
||||
<i class="fa fa-reply fa-fw"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if perms.judge.change_comment %}
|
||||
{% if can_edit %}
|
||||
<a href="javascript:reply_comment({{ node.id }})"
|
||||
title="{{ _('Reply') }}"><i class="fa fa-reply fa-fw"></i></a>
|
||||
{% else %}
|
||||
<a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
|
||||
href="{{ url('comment_edit', node.id) }}" title="{{ _('Edit') }}"
|
||||
class="edit-link"><i class="fa fa-pencil fa-fw"></i></a>
|
||||
{% endif %}
|
||||
<a href="javascript:" title="{{ _('Hide') }}" data-id="{{ node.id }}"
|
||||
class="hide-comment"><i class="fa fa-trash fa-fw"></i></a>
|
||||
<a href="{{ url('admin:judge_comment_change', node.id) }}"
|
||||
title="{{ _('Admin') }}"><i class="fa fa-cog fa-fw"></i></a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="content content-description">
|
||||
<div class="comment-body"{% if node.score <= vote_hide_threshold %} style="display:none"{% endif %}>
|
||||
{{ node.body|markdown(lazy_load=True)|reference|str|safe }}
|
||||
</div>
|
||||
{% if node.score <= vote_hide_threshold %}
|
||||
<div class="comment-body bad-comment-body">
|
||||
<p>
|
||||
{% trans id=node.id %}This comment is hidden due to too much negative feedback. Click <a href="javascript:comment_show_content({{ id }})">here</a> to view it.{% endtrans %}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<ul id="comment-{{ node.id }}-reply" class="reply-comment" hidden></ul>
|
||||
{% with children=node.get_children() %}
|
||||
{% if children %}
|
||||
<ul id="comment-{{ node.id }}-children" class="comments">{{ loop(children) }}</ul>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
<ul class="comments top-level-comments new-comments" id="comment-0">
|
||||
{% include "comments/content-list.html" %}
|
||||
</ul>
|
||||
{% elif not comment_lock %}
|
||||
<p class="no-comments-message">{{ _('There are no comments at the moment.') }}</p>
|
||||
|
|
|
|||
|
|
@ -120,6 +120,55 @@
|
|||
});
|
||||
}
|
||||
|
||||
window.comment_reply = function (id, page) {
|
||||
ajax_get_reply('{{ url('comment_reply') }}', id, page);
|
||||
}
|
||||
|
||||
function ajax_get_reply(url, id, page) {
|
||||
return $.ajax({
|
||||
url: url,
|
||||
type: 'GET',
|
||||
data: {
|
||||
id: id,
|
||||
page: page,
|
||||
},
|
||||
success: function(data) {
|
||||
var $comment = $("#comment-" + id + "-children");
|
||||
var $comment_show_btn = $("#comment-" + id + " .show_more_reply");
|
||||
console.log($comment_show_btn);
|
||||
$comment_show_btn.hide();
|
||||
$comment.append(data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.comment_show_more = function (id, page, offset) {
|
||||
ajax_comment_show_more('{{ url('comment_show_more') }}', id, page, offset);
|
||||
}
|
||||
|
||||
function ajax_comment_show_more(url, id, page, offset) {
|
||||
return $.ajax({
|
||||
url: url,
|
||||
type: 'GET',
|
||||
data: {
|
||||
id: id,
|
||||
page: page,
|
||||
offset: offset,
|
||||
},
|
||||
success: function(data) {
|
||||
var $comment_show_btn = $("#comment-" + id + " .show_more_comment");
|
||||
$comment_show_btn.hide();
|
||||
if (id == 0) {
|
||||
var $comment = $("#comment-" + id);
|
||||
$comment.append(data);
|
||||
} else {
|
||||
var $comment = $("#comment-" + id + "-children");
|
||||
$comment.append(data);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var get_$votes = function (id) {
|
||||
var $comment = $('#comment-' + id);
|
||||
return {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue