consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use has-fa-icon in agree/disagree buttons

Browse Source 
This way we can simplify the code in the views a little bit.
This commit is contained in:
Javi Martín
2022-01-13 19:50:50 +01:00
parent eecaf5876e
commit d347da8a33
2 changed files with 18 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/stylesheets/in_favor_against.scss
View File

@@ -7,8 +7,7 @@
display: inline-block; display: inline-block;
} }
.icon-like, button {
.icon-unlike {
background: #fff; background: #fff;
border: 2px solid; border: 2px solid;
border-radius: rem-calc(3); border-radius: rem-calc(3);
@@ -16,7 +15,7 @@
display: inline-block; display: inline-block;
font-size: rem-calc(30); font-size: rem-calc(30);
line-height: rem-calc(30); line-height: rem-calc(30);
padding: rem-calc(3) rem-calc(6); padding: rem-calc(3) rem-calc(6) rem-calc(6);
position: relative; position: relative;
&:hover, &:hover,
@@ -27,7 +26,8 @@
} }
} }
.icon-like { .in-favor button {
@include has-fa-icon(thumbs-up, solid);
&:hover, &:hover,
&:active { &:active {
@@ -36,7 +36,8 @@
} }
} }
.icon-unlike { .against button {
@include has-fa-icon(thumbs-down, solid);
&:hover, &:hover,
&:active { &:active {
@@ -67,29 +68,21 @@
} }
.voted { .voted {
color: #fff;
}
.icon-like, .in-favor .voted {
.icon-unlike { background: $like;
color: #fff; border: 2px solid $like;
} }
.icon-like { .against .voted {
background: $like; background: $unlike;
border: 2px solid $like; border: 2px solid $unlike;
}
.icon-unlike {
background: $unlike;
border: 2px solid $unlike;
}
} }
.no-voted { .no-voted {
opacity: 0.3;
.icon-like,
.icon-unlike {
opacity: 0.3;
}
} }
.against { .against {

8
app/components/shared/in_favor_against_component.html.erb
View File

@@ -7,9 +7,7 @@
method: "post", method: "post",
remote: true, remote: true,
disabled: !current_user do %> disabled: !current_user do %>
<span class="icon-like"> <span class="show-for-sr"><%= t("votes.agree") %></span>
<span class="show-for-sr"><%= t("votes.agree") %></span>
</span>
<% end %> <% end %>
<span class="percentage"><%= votes_percentage("likes", votable) %></span> <span class="percentage"><%= votes_percentage("likes", votable) %></span>
</div> </div>
@@ -24,9 +22,7 @@
method: "post", method: "post",
remote: true, remote: true,
disabled: !current_user do %> disabled: !current_user do %>
<span class="icon-unlike"> <span class="show-for-sr"><%= t("votes.disagree") %></span>
<span class="show-for-sr"><%= t("votes.disagree") %></span>
</span>
<% end %> <% end %>
<span class="percentage"><%= votes_percentage("dislikes", votable) %></span> <span class="percentage"><%= votes_percentage("dislikes", votable) %></span>
</div> </div>