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;
}
}

20
app/components/popup_menu_component/popup_menu_component.scss
View File

@@ -1,3 +1,5 @@
@import "../../javascript/src/styles/base/030_links.scss";
div.popup-menu {
display: inline-block;
@@ -10,20 +12,26 @@ div.popup-menu {
border-radius: 50%;
color: var(--muted-text-color);
&:focus, &:hover {
color: var(--link-color);
background-color: var(--subnav-menu-background-color);
// the popup menu is open
&[aria-expanded="true"] {
@extend .active-link;
}
// the popup menu is not open
&:not([aria-expanded="true"]) {
@extend .inactive-link;
}
}
ul.popup-menu-content {
display: none;
li {
margin: 0 2em 0.25em 0;
li a {
display: block;
padding: 0.125em 2em 0.125em 0;
i.icon {
width: 2em;
width: 1.5em;
}
}
}

17
app/javascript/src/styles/base/030_links.scss
View File

@@ -22,6 +22,23 @@ a.active {
font-weight: bold;
}
a.active-link {
color: var(--link-color);
&:hover {
background-color: var(--subnav-menu-background-color);
}
}
a.inactive-link {
color: var(--muted-text-color);
&:hover {
color: var(--link-hover-color);
background-color: var(--subnav-menu-background-color);
}
}
a[rel*="external"] {
word-break: break-all;
}

8
app/javascript/src/styles/specific/user_tooltips.scss
View File

@@ -55,6 +55,10 @@
grid-area: header-bottom;
color: var(--muted-text-color);
font-size: 0.75em;
a {
color: var(--muted-text-color);
}
}
div.popup-menu {
@@ -74,6 +78,10 @@
.user-tooltip-stat-item {
text-align: center;
a {
color: var(--text-color);
}
.user-tooltip-stat-value {
font-weight: bold;
}