We were using a <ul> tag for a single comment, where the first element of the list was the comment itself and the second element was the list of replies. IMHO it makes more sense to have a list of all comments, where every element is a comment and inside it there's a list of replies. We're also rendering the list even if it has no children so it's easier to add comments through JavaScript. Then we use the :empty CSS selector to hide the list if it's empty. However, since ERB adds whitespace if we structure our code the usual way and current browsers don't recognize elements with whitespace as empty, we have to use the `tag` helper so no whitespace is added.
44 lines
1.8 KiB
Plaintext
44 lines
1.8 KiB
Plaintext
<% commentable = comment_tree.commentable %>
|
|
<% valuation = local_assigns.fetch(:valuation, false) %>
|
|
<% cache [locale_and_user_status, comment_tree.order, commentable_cache_key(commentable), comment_tree.comments, comment_tree.comment_authors, commentable.comments_count] do %>
|
|
<section class="expanded comments">
|
|
<div class="row">
|
|
<div id="comments" class="small-12 column">
|
|
<% if display_comments_count %>
|
|
<h2>
|
|
<%= comment_tree_title_text(commentable) %>
|
|
<span class="js-comments-count">(<%= commentable.comments_count %>)</span>
|
|
</h2>
|
|
<% end %>
|
|
|
|
<%= render "shared/wide_order_selector", i18n_namespace: "comments" %>
|
|
|
|
<% if user_signed_in? %>
|
|
<% if comments_closed_for_commentable?(commentable) %>
|
|
<br>
|
|
<div data-alert class="callout primary">
|
|
<%= comments_closed_text(commentable) %>
|
|
</div>
|
|
<% elsif require_verified_resident_for_commentable?(commentable, current_user) %>
|
|
<br>
|
|
<div data-alert class="callout primary">
|
|
<%= sanitize(t("comments.verified_only", verify_account: link_to_verify_account)) %>
|
|
</div>
|
|
<% elsif !valuation || can?(:comment_valuation, commentable) %>
|
|
<%= render "comments/form", { commentable: commentable,
|
|
parent_id: nil,
|
|
toggeable: false,
|
|
valuation: valuation } %>
|
|
<% end %>
|
|
<% else %>
|
|
<br>
|
|
<%= render "shared/login_to_comment" %>
|
|
<% end %>
|
|
|
|
<%= render "comments/comment_list", comments: comment_tree.root_comments, valuation: valuation %>
|
|
<%= paginate comment_tree.root_comments %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<% end %>
|