diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index bbe7d56b2..26957cbba 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1720,6 +1720,11 @@ table { } } + .in-favor, + .against { + display: inline; + } + .in-favor button { @include like-unlike-icon(thumbs-up, $like); } diff --git a/app/components/comments/votes_component.html.erb b/app/components/comments/votes_component.html.erb index 8ef3a8293..75215e984 100644 --- a/app/components/comments/votes_component.html.erb +++ b/app/components/comments/votes_component.html.erb @@ -2,17 +2,17 @@ <%= t("comments.comment.votes", count: comment.total_votes) %>  |  - +
<%= render Shared::VoteButtonComponent.new(comment, value: "yes", title: t("votes.agree")) %> <%= comment.total_likes %> - +
- +
<%= render Shared::VoteButtonComponent.new(comment, value: "no", title: t("votes.disagree")) %> <%= comment.total_dislikes %> - +
diff --git a/spec/components/comments/votes_component_spec.rb b/spec/components/comments/votes_component_spec.rb index 59708d71a..5c373b051 100644 --- a/spec/components/comments/votes_component_spec.rb +++ b/spec/components/comments/votes_component_spec.rb @@ -5,6 +5,14 @@ describe Comments::VotesComponent do let(:comment) { create(:comment, user: user) } let(:component) { Comments::VotesComponent.new(comment) } + it "generates valid HTML" do + render_inline component + + expect(page).not_to have_css "span form" + expect(page).to have_css "div.in-favor > form" + expect(page).to have_css "div.against > form" + end + describe "aria-pressed and method attributes" do it "have expected values when the in-favor button is pressed" do comment.vote_by(voter: user, vote: "yes")