Move reply comment editor to under replied comment

This commit is contained in:
cuom1999 2020-09-15 14:24:44 -05:00
parent 50a576fd5c
commit c3eb8eed9b
3 changed files with 26 additions and 7 deletions

View file

@ -69,14 +69,14 @@
<i class="fa fa-pencil fa-fw"></i> <i class="fa fa-pencil fa-fw"></i>
</a> </a>
{% else %} {% else %}
<a href="javascript:comment_set_parent({{ node.id }})" <a href="javascript:reply_comment({{ node.id }})"
title="{{ _('Reply') }}"> title="{{ _('Reply') }}">
<i class="fa fa-reply fa-fw"></i> <i class="fa fa-reply fa-fw"></i>
</a> </a>
{% endif %} {% endif %}
{% if perms.judge.change_comment %} {% if perms.judge.change_comment %}
{% if can_edit %} {% if can_edit %}
<a href="javascript:comment_set_parent({{ node.id }})" <a href="javascript:reply_comment({{ node.id }})"
title="{{ _('Reply') }}"><i class="fa fa-reply fa-fw"></i></a> title="{{ _('Reply') }}"><i class="fa fa-reply fa-fw"></i></a>
{% else %} {% else %}
<a data-featherlight="{{ url('comment_edit_ajax', node.id) }}" <a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
@ -109,6 +109,7 @@
</div> </div>
</div> </div>
</li> </li>
<ul id="comment-{{ node.id }}-reply" class="reply-comment" hidden></ul>
{% with children=node.get_children() %} {% with children=node.get_children() %}
{% if children %} {% if children %}
<ul id="comment-{{ node.id }}-children" class="comments">{{ loop(children) }}</ul> <ul id="comment-{{ node.id }}-children" class="comments">{{ loop(children) }}</ul>
@ -121,7 +122,7 @@
{% endif %} {% endif %}
{% if request.user.is_authenticated and comment_form and not comment_lock %} {% if request.user.is_authenticated and comment_form and not comment_lock %}
<div class="form-area comment-submit"> <div id="new-comment" class="form-area comment-submit">
{% block comment_submit_title %} {% block comment_submit_title %}
<h3>{{ _('New comment') }}</h3> <h3>{{ _('New comment') }}</h3>
<hr> <hr>
@ -131,7 +132,7 @@
{{ _('You need to have solved at least one problem before your voice can be heard.') }} {{ _('You need to have solved at least one problem before your voice can be heard.') }}
</div> </div>
{% else %} {% else %}
<form id="comment-submit" action="" method="post"> <form class="comment-submit-form" action="" method="post">
{% csrf_token %} {% csrf_token %}
{% if comment_form.errors %} {% if comment_form.errors %}
<div id="form-errors"> <div id="form-errors">

View file

@ -99,5 +99,9 @@
-o-transform: translatez(0); -o-transform: translatez(0);
transform: translatez(0); transform: translatez(0);
} }
.reply-comment {
margin: -50px 23px 10px -40px;
padding-top: 50px;
}
</style> </style>
{% endcompress %} {% endcompress %}

View file

@ -30,13 +30,27 @@
{% endif %} {% endif %}
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
window.comment_set_parent = function (parent) { window.reply_comment = function (parent) {
$('form#comment-submit input#id_parent').val(parent); var $comment_reply = $('#comment-' + parent + '-reply');
var reply_id = 'reply-' + parent;
if ($comment_reply.find('#' + reply_id).length == 0) {
var $reply_form = $('#new-comment').clone(true).prop('id', reply_id);
$reply_form.find('h3').html('{{ _('Replying to comment') }}');
$reply_form.prepend('<a class="close">x</a>');
$reply_form.find('form.comment-submit-form input#id_parent').val(parent);
$reply_form.appendTo($comment_reply);
}
$comment_reply.fadeIn();
$('html, body').animate({ $('html, body').animate({
scrollTop: $('.form-area.comment-submit').offset().top - $('#navigation').height() - 4 scrollTop: $comment_reply.offset().top - $('#navigation').height() - 4
}, 500); }, 500);
}; };
$(document).on('click', '.close', function() {
$(this).closest('.reply-comment').fadeOut();
});
function update_math($comment) { function update_math($comment) {
if ('MathJax' in window) { if ('MathJax' in window) {
var $body = $comment.find('.comment-body'); var $body = $comment.find('.comment-body');