jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

comments: tweak styling of vote buttons.

Browse Source 
* Tweak hover colors for vote buttons.
* Tweak sizes to avoid the vote buttons shifting when the score changes.
This commit is contained in:
evazion
2021-01-21 06:40:03 -06:00
parent f4216b323f
commit 49bc2364bd
5 changed files with 54 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/comment_component/comment_component.html.erb
View File

@@ -47,21 +47,21 @@
<% if votable? %>
<li class="comment-votes">
<% if current_user.is_anonymous? %>
<%= link_to upvote_icon, login_path(url: request.fullpath), class: "comment-upvote-link" %>
<%= link_to upvote_icon, login_path(url: request.fullpath), class: "comment-upvote-link inactive-link" %>
<% elsif upvoted? %>
<%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-upvote-link comment-unvote-link", method: :delete, remote: true %>
<%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-upvote-link comment-unvote-link active-link", method: :delete, remote: true %>
<% else %>
<%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link", method: :post, remote: true %>
<%= link_to upvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "1"), class: "comment-upvote-link inactive-link", method: :post, remote: true %>
<% end %>
<span class="comment-score"><%= comment.score %></span>
<% if current_user.is_anonymous? %>
<%= link_to downvote_icon, login_path(url: request.fullpath), class: "comment-downvote-link" %>
<%= link_to downvote_icon, login_path(url: request.fullpath), class: "comment-downvote-link inactive-link" %>
<% elsif downvoted? %>
<%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-downvote-link comment-unvote-link", method: :delete, remote: true %>
<%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id), class: "comment-downvote-link comment-unvote-link active-link", method: :delete, remote: true %>
<% else %>
<%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "-1"), class: "comment-downvote-link", method: :post, remote: true %>
<%= link_to downvote_icon, comment_comment_votes_path(comment_id: comment.id, score: "-1"), class: "comment-downvote-link inactive-link", method: :post, remote: true %>
<% end %>
</li>
<% end %>

26
app/components/comment_component/comment_component.scss
View File

@@ -9,18 +9,6 @@ article.comment {
background-color: var(--moderation-report-background-color);
}
&[data-is-upvoted="true"] {
a.comment-upvote-link {
color: var(--link-color);
}
}
&[data-is-downvoted="true"] {
a.comment-downvote-link {
color: var(--link-color);
}
}
&[data-is-dimmed="true"] {
opacity: 0.3;
@@ -42,12 +30,16 @@ article.comment {
.comment-votes {
color: var(--muted-text-color);
a {
color: var(--muted-text-color);
// Fix it so that the vote buttons don't move when the score changes width.
.comment-score {
display: inline-block;
text-align: center;
min-width: 1.25em;
white-space: nowrap;
}
&:hover {
color: var(--link-color);
}
.icon {
width: 1.25em;
}
}