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.
121 lines
5.2 KiB
Plaintext
121 lines
5.2 KiB
Plaintext
<% valuation = local_assigns.fetch(:valuation, false) %>
|
|
<% cache [locale_and_user_status(comment), comment, commentable_cache_key(comment.commentable), comment.author] do %>
|
|
<div id="<%= dom_id(comment) %>" class="comment small-12">
|
|
<div class="comment-body">
|
|
<% if comment.hidden? || comment.user.hidden? %>
|
|
<% if comment.children.size > 0 %>
|
|
<div class="callout secondary">
|
|
<p><%= t("comments.comment.deleted") %></p>
|
|
</div>
|
|
<% end %>
|
|
<% else %>
|
|
<% if comment.as_administrator? %>
|
|
<%= image_tag("avatar_admin.png", size: 32, class: "admin-avatar float-left") %>
|
|
<% elsif comment.as_moderator? %>
|
|
<%= image_tag("avatar_moderator.png", size: 32, class: "moderator-avatar float-left") %>
|
|
<% else %>
|
|
<% if comment.user.hidden? || comment.user.erased? %>
|
|
<span class="icon-deleted user-deleted"></span>
|
|
<% elsif comment.user.organization? %>
|
|
<%= image_tag("avatar_collective.png", size: 32, class: "avatar float-left") %>
|
|
<% else %>
|
|
<%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "float-left") %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="comment-info">
|
|
|
|
<% if comment.as_administrator? %>
|
|
<span class="user-name">
|
|
<%= t("comments.comment.admin") %>
|
|
<% if valuation %>
|
|
<%= Administrator.find(comment.administrator_id).description_or_name %>
|
|
<% else %>
|
|
#<%= comment.administrator_id %>
|
|
<% end %>
|
|
</span>
|
|
<% elsif comment.as_moderator? %>
|
|
<span class="user-name"><%= t("comments.comment.moderator") %> #<%= comment.moderator_id %></span>
|
|
<% else %>
|
|
|
|
<% if comment.user.hidden? || comment.user.erased? %>
|
|
<span class="user-name"><%= t("comments.comment.user_deleted") %></span>
|
|
<% else %>
|
|
<span class="user-name"><%= link_to comment.user.name, user_path(comment.user) %></span>
|
|
<% if comment.user.display_official_position_badge? %>
|
|
•
|
|
<span class="label round level-<%= comment.user.official_level %>">
|
|
<%= comment.user.official_position %>
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
<% if comment.user.verified_organization? %>
|
|
•
|
|
<span class="label round is-association">
|
|
<%= t("shared.collective") %>
|
|
</span>
|
|
<% end %>
|
|
<% if comment.user_id == comment.commentable.author_id %>
|
|
•
|
|
<span class="label round is-author">
|
|
<%= t("comments.comment.author") %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
•
|
|
<span>
|
|
<%= link_to comment_path(comment) do %>
|
|
<%= l comment.created_at.to_datetime, format: :datetime %>
|
|
<% end %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="comment-user
|
|
<%= user_level_class comment %>
|
|
<%= comment_author_class comment, comment.commentable.author_id %>">
|
|
<%= simple_format sanitize_and_auto_link(comment.body), {}, sanitize: false %>
|
|
</div>
|
|
|
|
<div id="<%= dom_id(comment) %>_reply" class="reply">
|
|
<% unless valuation %>
|
|
<div id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
|
|
<%= render "comments/votes", comment: comment %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if comment.children.size > 0 %>
|
|
<%= link_to "", class: "js-toggle-children relative" do %>
|
|
<span class="far fa-minus-square"></span>
|
|
<span class="js-child-toggle" style="display: none;"><%= t("comments.comment.responses_show", count: comment.children.size) %></span>
|
|
<span class="js-child-toggle"><%= t("comments.comment.responses_collapse", count: comment.children.size) %></span>
|
|
<% end %>
|
|
<% else %>
|
|
<%= t("comments.comment.responses", count: 0) %>
|
|
<% end %>
|
|
|
|
<% if user_signed_in? && !comments_closed_for_commentable?(comment.commentable) && !require_verified_resident_for_commentable?(comment.commentable, current_user) %>
|
|
<span class="divider"> | </span>
|
|
<%= link_to(comment_link_text(comment), "",
|
|
class: "js-add-comment-link", data: { "id": dom_id(comment) }) %>
|
|
|
|
<% unless valuation %>
|
|
<%= render "comments/actions", { comment: comment } %>
|
|
<% end %>
|
|
|
|
<% if !valuation || can?(:comment_valuation, comment.commentable) %>
|
|
<%= render "comments/form", { commentable: comment.commentable,
|
|
parent_id: comment.id,
|
|
toggeable: true,
|
|
valuation: valuation } %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= render "comments/comment_list", comments: child_comments_of(comment), valuation: valuation %>
|
|
</div>
|
|
<% end %>
|