From 49bc2364bd129c84cb741281e935da112eedd6b2 Mon Sep 17 00:00:00 2001 From: evazion Date: Thu, 21 Jan 2021 06:40:03 -0600 Subject: [PATCH] comments: tweak styling of vote buttons. * Tweak hover colors for vote buttons. * Tweak sizes to avoid the vote buttons shifting when the score changes. --- .../comment_component.html.erb | 12 ++++----- .../comment_component/comment_component.scss | 26 +++++++------------ .../popup_menu_component.scss | 20 +++++++++----- app/javascript/src/styles/base/030_links.scss | 17 ++++++++++++ .../src/styles/specific/user_tooltips.scss | 8 ++++++ 5 files changed, 54 insertions(+), 29 deletions(-) diff --git a/app/components/comment_component/comment_component.html.erb b/app/components/comment_component/comment_component.html.erb index 701a1c40f..a0271f8be 100644 --- a/app/components/comment_component/comment_component.html.erb +++ b/app/components/comment_component/comment_component.html.erb @@ -47,21 +47,21 @@ <% if votable? %>
  • <% 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 %> <%= comment.score %> <% 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 %>
    • <% end %> diff --git a/app/components/comment_component/comment_component.scss b/app/components/comment_component/comment_component.scss index a685f355b..d50b8ca61 100644 --- a/app/components/comment_component/comment_component.scss +++ b/app/components/comment_component/comment_component.scss @@ -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; } } diff --git a/app/components/popup_menu_component/popup_menu_component.scss b/app/components/popup_menu_component/popup_menu_component.scss index 03460647b..6dce7d5fd 100644 --- a/app/components/popup_menu_component/popup_menu_component.scss +++ b/app/components/popup_menu_component/popup_menu_component.scss @@ -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; } } } diff --git a/app/javascript/src/styles/base/030_links.scss b/app/javascript/src/styles/base/030_links.scss index 34b709cf6..faa94c2a0 100644 --- a/app/javascript/src/styles/base/030_links.scss +++ b/app/javascript/src/styles/base/030_links.scss @@ -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; } diff --git a/app/javascript/src/styles/specific/user_tooltips.scss b/app/javascript/src/styles/specific/user_tooltips.scss index b07cd6abc..ce96b60f7 100644 --- a/app/javascript/src/styles/specific/user_tooltips.scss +++ b/app/javascript/src/styles/specific/user_tooltips.scss @@ -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; }