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

Use social-share-button whatsapp icon

Browse Source 
We were using a custom icon because in the past social-share-button
didn't have support for whatsapp. But now that it does, we can remove
our custom icon.

Note we're using the `_app` suffix because that's the name of the icon
meant for mobile devices.
This commit is contained in:
Javi Martín
2020-08-23 21:40:54 +02:00
parent ae8afc9b75
commit 0d8119a1e3
12 changed files with 96 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/social_share.js
View File

@@ -3,7 +3,7 @@
App.SocialShare = {
initialize: function() {
$(".social-share-button a").each(function() {
$(this).append("<span class='show-for-sr'>" + ($(this).data("site")) + "</span>");
$(this).append("<span class='show-for-sr'>" + ($(this).data("site").replace(/_app$/, "")) + "</span>");
});
},
destroy: function() {

5
app/assets/stylesheets/icons.scss
View File

@@ -186,10 +186,6 @@
font-weight: normal;
}
.icon-whatsapp::before {
content: "\f232";
}
.icon-zip::before {
content: "\f1c6";
font-weight: normal;
@@ -285,7 +281,6 @@
.icon-instagram,
.icon-telegram,
.icon-twitter,
.icon-whatsapp,
.icon-youtube {
&::before {

19
app/assets/stylesheets/layout.scss
View File

@@ -1571,7 +1571,8 @@ table {
.ssb-facebook,
.ssb-telegram,
.ssb-twitter {
.ssb-twitter,
.ssb-whatsapp_app {
background-image: none !important;
color: #fff;
height: $line-height * 2 !important;
@@ -1673,10 +1674,24 @@ table {
}
}
.ssb-whatsapp_app {
background: #43d854;
&::before {
content: "P";
}
&:hover,
&:focus {
color: #43d854;
}
}
@include breakpoint(medium) {
.button.button-telegram,
.ssb-telegram {
.ssb-telegram,
.ssb-whatsapp_app {
display: none !important;
}
}

12
app/assets/stylesheets/participation.scss
View File

@@ -355,18 +355,6 @@
display: inline;
}
.whatsapp::before {
background-color: #43d854;
color: #fff;
display: inline-block;
font-size: rem-calc(30);
height: rem-calc(48);
padding-top: rem-calc(9);
text-align: center;
vertical-align: top;
width: rem-calc(48);
}
.debate-info,
.proposal-info,
.investment-project-info,

10
app/views/shared/_social_share.html.erb
View File

@@ -1,7 +1,5 @@
<% description = local_assigns.fetch(:description, "") %>
<% description = truncate(ActionView::Base.full_sanitizer.sanitize(description), length: 140) %>
<% mobile = local_assigns[:mobile] %>
<% mobile_url = mobile.present? ? "#{mobile.gsub(/\s+/, "%20")}%20" : "" %>
<% if local_assigns[:share_title].present? %>
<div id="social-share" class="sidebar-divider"></div>
@@ -13,10 +11,6 @@
image: local_assigns.fetch(:image_url, ""),
desc: description,
"data-twitter-title": local_assigns[:mobile],
"data-telegram-title": local_assigns[:mobile]) %>
<a href="whatsapp://send?text=<%= mobile_url %><%= url %>"
class="show-for-small-only" data-action="share/whatsapp/share">
<span class="icon-whatsapp whatsapp"></span>
<span class="show-for-sr"><%= t("social.whatsapp") %></span>
</a>
"data-telegram-title": local_assigns[:mobile],
"data-whatsapp_app-title": local_assigns[:mobile]) %>
</div>

2
config/initializers/social_share_button.rb
View File

@@ -1,3 +1,3 @@
SocialShareButton.configure do |config|
config.allow_sites = %w[twitter facebook telegram]
config.allow_sites = %w[twitter facebook telegram whatsapp_app]
end

1
config/locales/en/general.yml
View File

@@ -784,7 +784,6 @@ en:
facebook: "%{org} Facebook"
twitter: "%{org} Twitter"
youtube: "%{org} YouTube"
whatsapp: WhatsApp
telegram: "%{org} Telegram"
instagram: "%{org} Instagram"
stats:

3
config/locales/en/social_share_button.yml
View File

@@ -16,4 +16,5 @@ en:
plurk: "Plurk"
pinterest: "Pinterest"
email: "Email"
telegram: "Telegram"
telegram: "Telegram"
whatsapp_app: "WhatsApp"

1
config/locales/es/general.yml
View File

@@ -784,7 +784,6 @@ es:
facebook: "Facebook de %{org}"
twitter: "Twitter de %{org}"
youtube: "YouTube de %{org}"
whatsapp: WhatsApp
telegram: "Telegram de %{org}"
instagram: "Instagram de %{org}"
stats:

1
config/locales/es/social_share_button.yml
View File

@@ -17,3 +17,4 @@ es:
pinterest: "Pinterest"
email: "Correo electrónico"
telegram: "Telegram"
whatsapp_app: "WhatsApp"

38
spec/system/debates_spec.rb
View File

@@ -93,9 +93,43 @@ describe "Debates" do
expect(page).to have_content I18n.l(debate.created_at.to_date)
expect(page).to have_selector(avatar(debate.author.name))
expect(page.html).to include "<title>#{debate.title}</title>"
end
within(".social-share-button") do
expect(page.all("a").count).to be(3) # Twitter, Facebook, Telegram
describe "Social share buttons", :js do
context "On desktop browsers" do
scenario "Shows links to share on facebook and twitter" do
visit debate_path(create(:debate))
within(".social-share-button") do
expect(page.all("a").count).to be(2)
expect(page).to have_link "Share to Facebook"
expect(page).to have_link "Share to Twitter"
end
end
end
context "On small devices" do
let!(:window_size) { Capybara.current_window.size }
before do
Capybara.current_window.resize_to(639, 479)
end
after do
Capybara.current_window.resize_to(*window_size)
end
scenario "Shows links to share on telegram and whatsapp too" do
visit debate_path(create(:debate))
within(".social-share-button") do
expect(page.all("a").count).to be(4)
expect(page).to have_link "Share to Facebook"
expect(page).to have_link "Share to Twitter"
expect(page).to have_link "Share to Telegram"
expect(page).to have_link "Share to WhatsApp"
end
end
end
end

38
spec/system/proposals_spec.rb
View File

@@ -138,9 +138,43 @@ describe "Proposals" do
expect(page.html).to include "<title>#{proposal.title}</title>"
expect(page).not_to have_selector ".js-flag-actions"
expect(page).not_to have_selector ".js-follow"
end
within(".social-share-button") do
expect(page.all("a").count).to be(3) # Twitter, Facebook, Telegram
describe "Social share buttons", :js do
context "On desktop browsers" do
scenario "Shows links to share on facebook and twitter" do
visit proposal_path(create(:proposal))
within(".social-share-button") do
expect(page.all("a").count).to be(2)
expect(page).to have_link "Share to Facebook"
expect(page).to have_link "Share to Twitter"
end
end
end
context "On small devices" do
let!(:window_size) { Capybara.current_window.size }
before do
Capybara.current_window.resize_to(639, 479)
end
after do
Capybara.current_window.resize_to(*window_size)
end
scenario "Shows links to share on telegram and whatsapp too" do
visit proposal_path(create(:proposal))
within(".social-share-button") do
expect(page.all("a").count).to be(4)
expect(page).to have_link "Share to Facebook"
expect(page).to have_link "Share to Twitter"
expect(page).to have_link "Share to Telegram"
expect(page).to have_link "Share to WhatsApp"
end
end
end
end