improves styles on comments votes

This commit is contained in:
Alberto Garcia Cabeza
2016-11-02 12:17:15 +01:00
parent e9b5a8980e
commit f8649ad6c2
2 changed files with 47 additions and 17 deletions

View File

@@ -1550,7 +1550,7 @@ table {
.comment-votes { .comment-votes {
color: $text-medium; color: $text-medium;
font-size: rem-calc(14); font-size: $small-font-size;
line-height: $line-height; line-height: $line-height;
a { a {
@@ -1560,12 +1560,21 @@ table {
&:hover { &:hover {
color: $text-medium; color: $text-medium;
text-decoration: none;
.icon-like {
color: $like;
}
.icon-unlike {
color: $unlike;
}
} }
} }
[class^="icon-"] { [class^="icon-"] {
font-size: rem-calc(20); font-size: $base-font-size;
vertical-align: middle; vertical-align: sub;
} }
} }
@@ -1685,7 +1694,8 @@ table {
} }
.flag-disable, .flag-active { .flag-disable, .flag-active {
vertical-align: middle; line-height: 0;
vertical-align: sub;
} }
.flag-disable { .flag-disable {

View File

@@ -6,13 +6,17 @@
<span class="in_favor"> <span class="in_favor">
<% if can?(:vote, comment) %> <% if can?(:vote, comment) %>
<%= link_to vote_comment_path(comment, value: 'yes'), <%= link_to vote_comment_path(comment, value: 'yes'),
method: "post", remote: true do %> method: "post", remote: true, title: t('votes.agree') do %>
<span class="icon-angle-up"> <span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span> <span class="sr-only"><%= t('votes.agree') %></span>
</span> </span>
<% end %> <% end %>
<% else %> <% else %>
<span class="icon-angle-up"></span> <%= link_to new_user_session_path do %>
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
</span>
<% end %>
<% end %> <% end %>
<%= comment.total_likes %> <%= comment.total_likes %>
</span> </span>
@@ -20,13 +24,15 @@
<span class="against"> <span class="against">
<% if can?(:vote, comment) %> <% if can?(:vote, comment) %>
<%= link_to vote_comment_path(comment, value: 'no'), <%= link_to vote_comment_path(comment, value: 'no'),
method: "post", remote: true do %> method: "post", remote: true, title: t('votes.disagree') do %>
<span class="icon-angle-down"> <span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span> <span class="sr-only"><%= t('votes.disagree') %></span>
</span> </span>
<% end %> <% end %>
<% else %> <% else %>
<span class="icon-angle-down"></span> <span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
</span>
<% end %> <% end %>
<%= comment.total_dislikes %> <%= comment.total_dislikes %>
</span> </span>
@@ -40,26 +46,40 @@
<span class="in_favor"> <span class="in_favor">
<% if can?(:vote, comment) %> <% if can?(:vote, comment) %>
<%= link_to vote_comment_path(comment, value: 'yes'), <%= link_to vote_comment_path(comment, value: 'yes'),
method: "post", remote: true do %> method: "post", remote: true, title: t('votes.agree') do %>
<span class="icon-angle-up"></span> <span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
</span>
<% end %> <% end %>
<% else %> <% else %>
<span class="icon-angle-up"></span> <%= link_to new_user_session_path do %>
<span class="icon-like">
<span class="sr-only"><%= t('votes.agree') %></span>
</span>
<% end %>
<% end %> <% end %>
<%= comment.total_likes %> <%= comment.total_likes %>
</span> </span>
<span class="against"> <span class="against">
<% if can?(:vote, comment) %> <% if can?(:vote, comment) %>
<%= link_to vote_comment_path(comment, value: 'no'), <%= link_to vote_comment_path(comment, value: 'no'),
method: "post", remote: true do %> method: "post", remote: true, title: t('votes.disagree') do %>
<span class="icon-angle-down"></span> <span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
</span>
<% end %> <% end %>
<% else %> <% else %>
<span class="icon-angle-down"></span> <%= link_to new_user_session_path do %>
<span class="icon-unlike">
<span class="sr-only"><%= t('votes.disagree') %></span>
</span>
<% end %>
<% end %> <% end %>
<%= comment.total_dislikes %> <%= comment.total_dislikes %>
</span> </span>
</div> </div>
<div class="participation-not-allowed" style='display:none' aria-hidden="false"> <div class="participation-not-allowed" style='display:none' aria-hidden="false">
<%= t("votes.comment_unauthenticated", <%= t("votes.comment_unauthenticated",
signin: link_to(t("votes.signin"), new_user_session_path), signin: link_to(t("votes.signin"), new_user_session_path),