From 4a61fd2d8c2689ce53baa5ea1dd754d6e53c9fa0 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Mon, 24 Aug 2020 13:17:17 +0000 Subject: [PATCH 1/9] Bump social-share-button from 1.1.0 to 1.2.3 Bumps [social-share-button](https://github.com/huacnlee/social-share-button) from 1.1.0 to 1.2.3. - [Release notes](https://github.com/huacnlee/social-share-button/releases) - [Changelog](https://github.com/huacnlee/social-share-button/blob/master/CHANGELOG.md) - [Commits](https://github.com/huacnlee/social-share-button/compare/v1.1.0...v1.2.3) Signed-off-by: dependabot-preview[bot] --- Gemfile | 2 +- Gemfile.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Gemfile b/Gemfile index c8e81f860..2779aa9a7 100644 --- a/Gemfile +++ b/Gemfile @@ -53,7 +53,7 @@ gem "rollbar", "~> 3.0.1" gem "sassc-rails", "~> 2.1.2" gem "savon", "~> 2.12.1" gem "sitemap_generator", "~> 6.1.2" -gem "social-share-button", "~> 1.1" +gem "social-share-button", "~> 1.2.3" gem "sprockets", "~> 3.7.2" gem "translator-text", "~> 0.1.0" gem "turbolinks", "~> 5.2.1" diff --git a/Gemfile.lock b/Gemfile.lock index 3dc9a30fb..e848da938 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -557,7 +557,7 @@ GEM sitemap_generator (6.1.2) builder (~> 3.0) smart_properties (1.15.0) - social-share-button (1.1.0) + social-share-button (1.2.3) coffee-rails socksify (1.7.1) spring (2.1.1) @@ -724,7 +724,7 @@ DEPENDENCIES scss_lint (~> 0.59.0) selenium-webdriver (~> 3.142) sitemap_generator (~> 6.1.2) - social-share-button (~> 1.1) + social-share-button (~> 1.2.3) spring (~> 2.1.1) spring-commands-rspec (~> 1.0.4) sprockets (~> 3.7.2) From c5a56214c6d29d821d8aad404038b44917013634 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Aug 2020 20:42:52 +0200 Subject: [PATCH 2/9] Remove redundant social share button styles These styles were defined twice in our layout stylesheet. --- app/assets/stylesheets/layout.scss | 75 ------------------------------ 1 file changed, 75 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 85b7ca3db..0e73eade5 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1718,81 +1718,6 @@ table { .social-share-button { display: inline-block; } - - .ssb-twitter { - background: #45b0e3; - color: #fff; - height: $line-height; - position: relative; - width: $line-height * 2; - - &::before { - content: "f"; - font-family: "icons" !important; - font-size: rem-calc(24); - left: 50%; - line-height: $line-height * 2; - margin-left: rem-calc(-11); - position: absolute; - top: 0; - } - - &:hover, - &:focus { - background: #fff; - color: #40a2d1; - } - } - - .ssb-facebook { - background: #3b5998; - color: #fff; - height: rem-calc(24); - position: relative; - width: rem-calc(48); - - &::before { - content: "A"; - font-family: "icons" !important; - font-size: rem-calc(24); - left: 50%; - line-height: $line-height * 2; - margin-left: rem-calc(-11); - position: absolute; - top: 0; - } - - &:hover, - &:focus { - background: #fff; - color: #354f88; - } - } - - .ssb-telegram { - background: #08c; - color: #fff; - height: $line-height; - position: relative; - width: $line-height * 2; - - &::before { - content: "1"; - font-family: "icons" !important; - font-size: rem-calc(24); - left: 50%; - line-height: $line-height * 2; - margin-left: rem-calc(-11); - position: absolute; - top: 0; - } - - &:hover, - &:focus { - background: #fff; - color: #40a2d1; - } - } } // 13. Pages From ae8afc9b752a72bb77e6ea816e75ae67e5c4d91b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Aug 2020 20:46:48 +0200 Subject: [PATCH 3/9] Remove duplication in social share button styles All buttons were using the same styles, so we might as well style them together. --- app/assets/stylesheets/layout.scss | 42 ++++++++++-------------------- 1 file changed, 14 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 0e73eade5..b8c99cdde 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1569,8 +1569,9 @@ table { } } +.ssb-facebook, +.ssb-telegram, .ssb-twitter { - background: #45b0e3; background-image: none !important; color: #fff; height: $line-height * 2 !important; @@ -1578,7 +1579,6 @@ table { width: $line-height * 2 !important; &::before { - content: "f"; font-family: "icons" !important; font-size: rem-calc(24); left: 50%; @@ -1591,6 +1591,18 @@ table { &:hover, &:focus { background: #fff; + } +} + +.ssb-twitter { + background: #45b0e3; + + &::before { + content: "f"; + } + + &:hover, + &:focus { color: #40a2d1; } } @@ -1607,26 +1619,13 @@ table { .ssb-facebook { background: #3b5998; - background-image: none !important; - color: #fff; - height: rem-calc(48) !important; - position: relative; - width: rem-calc(48) !important; &::before { content: "A"; - font-family: "icons" !important; - font-size: rem-calc(24); - left: 50%; - line-height: $line-height * 2; - margin-left: rem-calc(-11); - position: absolute; - top: 0; } &:hover, &:focus { - background: #fff; color: #354f88; } } @@ -1663,26 +1662,13 @@ table { .ssb-telegram { background: #08c; - background-image: none !important; - color: #fff; - height: $line-height * 2 !important; - position: relative; - width: $line-height * 2 !important; &::before { content: "1"; - font-family: "icons" !important; - font-size: rem-calc(24); - left: 50%; - line-height: $line-height * 2; - margin-left: rem-calc(-11); - position: absolute; - top: 0; } &:hover, &:focus { - background: #fff; color: #40a2d1; } } From 0d8119a1e3594bf721cebb2775ab420ed36222cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Aug 2020 21:40:54 +0200 Subject: [PATCH 4/9] Use social-share-button whatsapp icon 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. --- app/assets/javascripts/social_share.js | 2 +- app/assets/stylesheets/icons.scss | 5 --- app/assets/stylesheets/layout.scss | 19 +++++++++-- app/assets/stylesheets/participation.scss | 12 ------- app/views/shared/_social_share.html.erb | 10 ++---- config/initializers/social_share_button.rb | 2 +- config/locales/en/general.yml | 1 - config/locales/en/social_share_button.yml | 3 +- config/locales/es/general.yml | 1 - config/locales/es/social_share_button.yml | 1 + spec/system/debates_spec.rb | 38 ++++++++++++++++++++-- spec/system/proposals_spec.rb | 38 ++++++++++++++++++++-- 12 files changed, 96 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/social_share.js b/app/assets/javascripts/social_share.js index eb75fe479..70343755a 100644 --- a/app/assets/javascripts/social_share.js +++ b/app/assets/javascripts/social_share.js @@ -3,7 +3,7 @@ App.SocialShare = { initialize: function() { $(".social-share-button a").each(function() { - $(this).append("" + ($(this).data("site")) + ""); + $(this).append("" + ($(this).data("site").replace(/_app$/, "")) + ""); }); }, destroy: function() { diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 5915164d2..aaf6ccb2f 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -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 { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b8c99cdde..3e2c83bae 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -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; } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index d47dda44e..8b833106c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -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, diff --git a/app/views/shared/_social_share.html.erb b/app/views/shared/_social_share.html.erb index 27b8f63c2..ed3cf1f82 100644 --- a/app/views/shared/_social_share.html.erb +++ b/app/views/shared/_social_share.html.erb @@ -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? %> @@ -13,10 +11,6 @@ image: local_assigns.fetch(:image_url, ""), desc: description, "data-twitter-title": local_assigns[:mobile], - "data-telegram-title": local_assigns[:mobile]) %> - - - <%= t("social.whatsapp") %> - + "data-telegram-title": local_assigns[:mobile], + "data-whatsapp_app-title": local_assigns[:mobile]) %> diff --git a/config/initializers/social_share_button.rb b/config/initializers/social_share_button.rb index 48840aeac..0d76f9dac 100644 --- a/config/initializers/social_share_button.rb +++ b/config/initializers/social_share_button.rb @@ -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 diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 3985effb9..6f6672013 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -784,7 +784,6 @@ en: facebook: "%{org} Facebook" twitter: "%{org} Twitter" youtube: "%{org} YouTube" - whatsapp: WhatsApp telegram: "%{org} Telegram" instagram: "%{org} Instagram" stats: diff --git a/config/locales/en/social_share_button.yml b/config/locales/en/social_share_button.yml index dbc62e956..3cddf1c1c 100644 --- a/config/locales/en/social_share_button.yml +++ b/config/locales/en/social_share_button.yml @@ -16,4 +16,5 @@ en: plurk: "Plurk" pinterest: "Pinterest" email: "Email" - telegram: "Telegram" \ No newline at end of file + telegram: "Telegram" + whatsapp_app: "WhatsApp" diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 9b0e15134..d1fff5341 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -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: diff --git a/config/locales/es/social_share_button.yml b/config/locales/es/social_share_button.yml index 2947efcc6..4749ced24 100644 --- a/config/locales/es/social_share_button.yml +++ b/config/locales/es/social_share_button.yml @@ -17,3 +17,4 @@ es: pinterest: "Pinterest" email: "Correo electrónico" telegram: "Telegram" + whatsapp_app: "WhatsApp" diff --git a/spec/system/debates_spec.rb b/spec/system/debates_spec.rb index 6e052681e..7dd5d4cdb 100644 --- a/spec/system/debates_spec.rb +++ b/spec/system/debates_spec.rb @@ -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 "#{debate.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 diff --git a/spec/system/proposals_spec.rb b/spec/system/proposals_spec.rb index 31f2d13a5..e6afeab3d 100644 --- a/spec/system/proposals_spec.rb +++ b/spec/system/proposals_spec.rb @@ -138,9 +138,43 @@ describe "Proposals" do expect(page.html).to include "#{proposal.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 From 86cac524b249a8f9509cc2560d206ad1276a4fe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 23 Aug 2020 22:00:50 +0200 Subject: [PATCH 5/9] Remove unnecessary
tag The `proposal-show` HTML class was only used in this context to style the whatsapp icon, which is now styled the same way as other social share icons. The `proposal-show` class should be reserved for the actual proposal show action. --- app/views/proposals/share.html.erb | 68 +++++++++++++++--------------- 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/app/views/proposals/share.html.erb b/app/views/proposals/share.html.erb index 9c390107a..0cb387809 100644 --- a/app/views/proposals/share.html.erb +++ b/app/views/proposals/share.html.erb @@ -10,47 +10,45 @@ <% end %> <% cache [locale_and_user_status(@proposal), @proposal, @proposal.author, Flag.flagged?(current_user, @proposal), @proposal_votes] do %> -
-
-
+
+
-

<%= t("proposals.proposal.created") %>

+

<%= t("proposals.proposal.created") %>

-

- <%= t("proposals.proposal.share.guide") %>
- <%= t("proposals.proposal.share.edit") %> -

+

+ <%= t("proposals.proposal.share.guide") %>
+ <%= t("proposals.proposal.share.edit") %> +

- <%= render "shared/social_share", - title: @proposal.title, - url: proposal_url(@proposal), - description: @proposal.summary, - mobile: @proposal.title %> + <%= render "shared/social_share", + title: @proposal.title, + url: proposal_url(@proposal), + description: @proposal.summary, + mobile: @proposal.title %> - <% if can?(:dashboard, @proposal) %> -
-

- <%= t("proposals.share.improve_it") %> -

-
- <%= link_to t("proposals.share.dashboard"), - progress_proposal_dashboard_path(@proposal), class: "button expanded" %> -
-
- <% end %> - -
- <%= link_to t("proposals.proposal.share.view_proposal"), proposal_path(@proposal) %> -
-
- -
-
-

- <%= @proposal.title %>
- <%= t("proposals.show.code") %> <%= @proposal.code %> + <% if can?(:dashboard, @proposal) %> +

+

+ <%= t("proposals.share.improve_it") %>

+
+ <%= link_to t("proposals.share.dashboard"), + progress_proposal_dashboard_path(@proposal), class: "button expanded" %> +
+ <% end %> + +
+ <%= link_to t("proposals.proposal.share.view_proposal"), proposal_path(@proposal) %> +
+
+ +
+
+

+ <%= @proposal.title %>
+ <%= t("proposals.show.code") %> <%= @proposal.code %> +

From 780660afc72be94f9ba6e67d4081d1b59d2f19b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 4 Feb 2021 18:39:04 +0100 Subject: [PATCH 6/9] Use the icon-width variable to set SSB icon size The same way we use it for SDG icons. --- app/assets/stylesheets/layout.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 3e2c83bae..b4b02075b 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1575,9 +1575,9 @@ table { .ssb-whatsapp_app { background-image: none !important; color: #fff; - height: $line-height * 2 !important; + height: $icon-width !important; position: relative; - width: $line-height * 2 !important; + width: $icon-width !important; &::before { font-family: "icons" !important; From 68260360ef003f3ec7058a56daf6e5d89d4292fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 4 Feb 2021 18:59:18 +0100 Subject: [PATCH 7/9] Remove unused styles As far as I can see, the `.jumbo-budget` never had social share button elements inside it. --- app/assets/stylesheets/participation.scss | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 8b833106c..f8f03fe72 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1226,22 +1226,6 @@ margin-bottom: rem-calc(3); text-decoration: none; } - - .social-share-button a { - color: #fff; - - &.social-share-button-twitter:hover { - color: #40a2d1; - } - - &.social-share-button-facebook:hover { - color: #354f88; - } - - &.social-share-button-telegram:hover { - color: #ce3e26; - } - } } .groups-and-headings { From abc81b30be644795fa06a6b70db119a854df1934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 4 Feb 2021 19:08:04 +0100 Subject: [PATCH 8/9] Simplify styles for SSB icons By using the same selector used by the social-share-button gem, we can remove all the !important rules. --- app/assets/stylesheets/layout.scss | 13 +++++-------- app/assets/stylesheets/participation.scss | 3 +-- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b4b02075b..64ff558d6 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1569,18 +1569,15 @@ table { } } -.ssb-facebook, -.ssb-telegram, -.ssb-twitter, -.ssb-whatsapp_app { - background-image: none !important; +.social-share-button .ssb-icon { + background-image: none; color: #fff; - height: $icon-width !important; + height: $icon-width; position: relative; - width: $icon-width !important; + width: $icon-width; &::before { - font-family: "icons" !important; + font-family: "icons"; font-size: rem-calc(24); left: 50%; line-height: $line-height * 2; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index f8f03fe72..e91393be5 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1118,8 +1118,7 @@ .ssb-facebook { background: none; color: $text; - height: rem-calc(33) !important; - + height: rem-calc(33); &::before { font-size: rem-calc(18); From aed38aa3cf1069de445b47700869dc36705f82b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 5 Feb 2021 21:11:54 +0100 Subject: [PATCH 9/9] Fix styles for mobile icons in featured proposals We were only adding styles for facebook and twitter, meaning telegram and whatsapp looked out of place. --- app/assets/stylesheets/participation.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index e91393be5..4a3669547 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1114,8 +1114,7 @@ .share-supported { - .ssb-twitter, - .ssb-facebook { + .social-share-button .ssb-icon { background: none; color: $text; height: rem-calc(33);