Style Fixes for _comment.html.erb Partial #9079
Conversation
|
|
app/views/comments/_edit.html.erb
Outdated
| <div class="card card-body bg-light"> | ||
| <form method="post" id="c<%= comment.id %>edit" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>> | ||
| <div id="edit-comment-form-wrapper-<%= comment.id %>" class="card card-body bg-light comment-form-wrapper" style="display: none;"> | ||
| <form method="post" id="c<%= comment.id %>edit" style="display:none;" class="well" <% if comment.is_a?Answer %> action= "/answers/update/<%= comment.id %>" <% else %> action="/comment/update/<%= comment.id %>" <% end %>> |
There was a problem hiding this comment.
This is the fix for the weird superfluous grey bar mentioned here. The edit comment form, when opened, was only toggling on <form>, not <form>'s container.
Before: (grey bar below comment)
After: (no grey bar)
Codecov Report
@@ Coverage Diff @@
## main #9079 +/- ##
=======================================
Coverage ? 82.04%
=======================================
Files ? 100
Lines ? 5936
Branches ? 0
=======================================
Hits ? 4870
Misses ? 1066
Partials ? 0 |
| </button> | ||
| <a aria-label="Leave an Emoji Reaction" rel="tooltip" title="Leave an Emoji Reaction" class="btn btn-outline-secondary btn-sm dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | ||
| <i class='far fa-heart'></i> | ||
| </a> |
There was a problem hiding this comment.
I changed the icon for emoji reactions:
Before: (button slightly bigger than the other buttons, two icons squashed inside button, smiley face)
After: (button same size as other buttons, single heart icon)
app/views/comments/_edit.html.erb
Outdated
| onClick=" | ||
| $('#edit-comment-form-wrapper-<%= comment.id %>').toggle(); | ||
| $('#<%= comment.id %>-like-emojis').toggle(); | ||
| $('#c<%= comment.id %>edit').toggle(); |
There was a problem hiding this comment.
I also made a change here to toggle the comment's emoji reactions when opening an Edit Comment form. I think it's a lot less confusing.
Before: (emoji heart reaction is still present):
https://user-images.githubusercontent.com/4361605/105804161-f1e25b80-5f53-11eb-97c7-cccbba252114.mov
After:
https://user-images.githubusercontent.com/4361605/105804185-00307780-5f54-11eb-98f7-db9e6540767e.mov
|
Code Climate has analyzed commit 41637f8 and detected 0 issues on this pull request. View more on Code Climate. |
* add unique ID to edit comment form wrapper * style fixes * update test selector
* add unique ID to edit comment form wrapper * style fixes * update test selector
* add unique ID to edit comment form wrapper * style fixes * update test selector
* add unique ID to edit comment form wrapper * style fixes * update test selector
padding-topandpadding-toparound emoji reaction buttons (also mentioned in that comment)user-select: none;toReply to commentlink (makes it un-highlight-able by the user)Will leave detailed notes in the code review, and screenshots!
(This issue is part of the larger Comment Editor Overhaul Project with Outreachy. Refer to Planning Issue #9069 for more context)