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

Refactor scss for in favor against component

Browse Source 
In order to reduce the code used to add styles to the buttons,
we removed the classes that had been added and handled it with
the new aria-pressed attribute
This commit is contained in:
taitus
2023-05-29 12:10:21 +02:00
parent daf9692753
commit 10cfa0e59f
4 changed files with 22 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,10 +25,10 @@
&:not([disabled]) {
&:hover,
&:active {
&:active,
&[aria-pressed=true] {
color: #fff;
cursor: pointer;
opacity: 1 !important;
}
}
}
@@ -38,7 +38,8 @@
&:not([disabled]) {
&:hover,
&:active {
&:active,
&[aria-pressed=true] {
background: $like;
border: 2px solid $like;
}
@@ -50,19 +51,14 @@
&:not([disabled]) {
&:hover,
&:active {
&:active,
&[aria-pressed=true] {
background: $unlike;
border: 2px solid $unlike;
}
}
}
.like,
.unlike {
vertical-align: super;
text-decoration: none;
}
.percentage {
display: inline-block;
font-size: $small-font-size;
@@ -76,22 +72,4 @@
padding-right: 0;
}
}
.voted {
color: #fff;
}
.in-favor .voted {
background: $like;
border: 2px solid $like;
}
.against .voted {
background: $unlike;
border: 2px solid $unlike;
}
.no-voted {
opacity: 0.3;
}
}

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

@@ -1,7 +1,6 @@
<div class="in-favor-against">
<div class="in-favor">
<%= button_to polymorphic_path(votable, action: :vote, value: "yes"),
class: "like #{voted_classes[:in_favor]}",
title: t("votes.agree"),
"aria-label": agree_aria_label,
"aria-pressed": pressed?("yes"),
@@ -14,7 +13,6 @@
<div class="against">
<%= button_to polymorphic_path(votable, action: :vote, value: "no"),
class: "unlike #{voted_classes[:against]}",
title: t("votes.disagree"),
"aria-label": disagree_aria_label,
"aria-pressed": pressed?("no"),

15
app/components/shared/in_favor_against_component.rb
View File

@@ -8,21 +8,6 @@ class Shared::InFavorAgainstComponent < ApplicationComponent
private
def voted_classes
@voted_classes ||= css_classes_for_vote
end
def css_classes_for_vote
case current_user&.voted_as_when_voted_for(votable)
when true
{ in_favor: "voted", against: "no-voted" }
when false
{ in_favor: "no-voted", against: "voted" }
else
{ in_favor: "", against: "" }
end
end
def agree_aria_label
t("votes.agree_label", title: votable.title)
end

40
spec/system/votes_spec.rb
View File

@@ -19,37 +19,31 @@ describe "Votes" do
within("#debates") do
within("#debate_#{debate1.id}_votes") do
within(".in-favor") do
expect(page).to have_button class: "voted"
expect(page).not_to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='true']"
end
within(".against") do
expect(page).to have_button class: "no-voted"
expect(page).not_to have_button class: "voted"
expect(page).to have_css "button[aria-pressed='false']"
end
end
within("#debate_#{debate2.id}_votes") do
within(".in-favor") do
expect(page).not_to have_button class: "voted"
expect(page).not_to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='false']"
end
within(".against") do
expect(page).not_to have_button class: "no-voted"
expect(page).not_to have_button class: "voted"
expect(page).to have_css "button[aria-pressed='false']"
end
end
within("#debate_#{debate3.id}_votes") do
within(".in-favor") do
expect(page).to have_button class: "no-voted"
expect(page).not_to have_button class: "voted"
expect(page).to have_css "button[aria-pressed='false']"
end
within(".against") do
expect(page).to have_button class: "voted"
expect(page).not_to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='true']"
end
end
end
@@ -63,14 +57,12 @@ describe "Votes" do
within(".in-favor") do
expect(page).to have_content "0%"
expect(page).not_to have_button class: "voted"
expect(page).not_to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='false']"
end
within(".against") do
expect(page).to have_content "0%"
expect(page).not_to have_button class: "voted"
expect(page).not_to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='false']"
end
end
@@ -83,12 +75,12 @@ describe "Votes" do
within(".in-favor") do
expect(page).to have_content "100%"
expect(page).to have_button class: "voted"
expect(page).to have_css "button[aria-pressed='true']"
end
within(".against") do
expect(page).to have_content "0%"
expect(page).to have_css("button.no-voted")
expect(page).to have_css "button[aria-pressed='false']"
end
expect(page).to have_content "1 vote"
@@ -97,12 +89,12 @@ describe "Votes" do
within(".in-favor") do
expect(page).to have_content "0%"
expect(page).to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='false']"
end
within(".against") do
expect(page).to have_content "100%"
expect(page).to have_button class: "voted"
expect(page).to have_css "button[aria-pressed='true']"
end
expect(page).to have_content "1 vote"
@@ -136,12 +128,12 @@ describe "Votes" do
within(".in-favor") do
expect(page).to have_content "50%"
expect(page).to have_button class: "voted"
expect(page).to have_css "button[aria-pressed='true']"
end
within(".against") do
expect(page).to have_content "50%"
expect(page).to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='false']"
end
end
@@ -154,12 +146,12 @@ describe "Votes" do
within(".in-favor") do
expect(page).to have_content "100%"
expect(page).to have_button class: "voted"
expect(page).to have_css "button[aria-pressed='true']"
end
within(".against") do
expect(page).to have_content "0%"
expect(page).to have_button class: "no-voted"
expect(page).to have_css "button[aria-pressed='false']"
end
expect(page).to have_content "1 vote"