diff --git a/app/assets/javascripts/comments.js b/app/assets/javascripts/comments.js
index 44d70bb38..4e9012f1e 100644
--- a/app/assets/javascripts/comments.js
+++ b/app/assets/javascripts/comments.js
@@ -2,11 +2,8 @@
"use strict";
App.Comments = {
add_comment: function(parent_selector, response_html) {
- $(parent_selector + " .comment-list:first").prepend($(response_html));
- var hidden_responses = $(parent_selector + " .comment-list:first").is(":hidden");
- if (parent_selector && hidden_responses) {
- $(parent_selector).find(".comment-list:first").toggle("slow");
- }
+ $(parent_selector + " .comment-list:first").prepend($(response_html)).show("slow");
+ $(parent_selector + " .responses-count:first").removeClass("collapsed");
this.update_comments_count();
},
update_comments_count: function() {
@@ -45,8 +42,7 @@
$("body").on("click", ".js-toggle-children", function() {
$(this).closest(".comment").find(".comment-list:first").toggle("slow");
- $(this).children(".far").toggleClass("fa-minus-square fa-plus-square");
- $(this).children(".js-child-toggle").toggle();
+ $(this).closest(".responses-count").toggleClass("collapsed");
return false;
});
}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 3c195b1d8..9eb5c734b 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2121,14 +2121,6 @@ table {
padding-left: rem-calc(18);
}
- .far {
- font-size: $small-font-size;
- left: 0;
- position: absolute;
- text-decoration: none;
- top: 2px;
- }
-
.divider {
color: $text-light;
display: inline-block;
@@ -2139,6 +2131,35 @@ table {
}
}
+ .responses-count {
+ .far {
+ @extend .fa-minus-square;
+ font-size: $small-font-size;
+ left: 0;
+ position: absolute;
+ text-decoration: none;
+ top: 2px;
+ }
+
+ .show-children {
+ display: none;
+ }
+
+ &.collapsed {
+ .far {
+ @extend .fa-plus-square;
+ }
+
+ .collapse-children {
+ display: none;
+ }
+
+ .show-children {
+ display: inline;
+ }
+ }
+ }
+
.comment-user {
margin-top: $line-height / 4;
padding: $line-height / 4 0;
diff --git a/app/views/comments/_responses_count.html.erb b/app/views/comments/_responses_count.html.erb
index 62b4103ac..3915b5495 100644
--- a/app/views/comments/_responses_count.html.erb
+++ b/app/views/comments/_responses_count.html.erb
@@ -1,8 +1,8 @@
<% if count > 0 %>
<%= link_to "", class: "js-toggle-children relative" do %>
-
- <%= t("comments.comment.responses_show", count: count) %>
- <%= t("comments.comment.responses_collapse", count: count) %>
+
+ <%= t("comments.comment.responses_show", count: count) %>
+ <%= t("comments.comment.responses_collapse", count: count) %>
<% end %>
<% else %>
<%= t("comments.comment.responses", count: 0) %>
diff --git a/spec/system/comments/debates_spec.rb b/spec/system/comments/debates_spec.rb
index 740258b8b..ceaeede4f 100644
--- a/spec/system/comments/debates_spec.rb
+++ b/spec/system/comments/debates_spec.rb
@@ -91,8 +91,7 @@ describe "Commenting debates" do
end
scenario "can collapse comments after adding a reply", :js do
- parent_comment = create(:comment, body: "Main comment", commentable: debate)
- create(:comment, body: "First subcomment", commentable: debate, parent: parent_comment)
+ create(:comment, body: "Main comment", commentable: debate)
login_as(user)
visit debate_path(debate)
@@ -104,7 +103,7 @@ describe "Commenting debates" do
expect(page).to have_content("It will be done next week.")
- find(".fa-minus-square").click
+ click_link text: "1 response (collapse)"
expect(page).not_to have_content("It will be done next week.")
end