changes social media iframes/scripts to links, simplifies markup, adds email & bootstrap classes

[vingle]

Overview

As discussed here, updates the social media sharing footer:

• replaces embedded scripts with direct sharing urls
• adds an email share button
• adds Bootstrap classes
• uses <button> for visual fallback in absence of Bootstrap or Greenwich
• adds IDs to buttons to let each be targetted with unique css
• designed and tested against three scenarios: consistent Civi UI with Greenwich, Bootstrap (from CMS or a Civi theme) & without any Civi theming

Before

With Greenwich/automatic set in CiviCRM Display Preferences:

Without Greenwich:

After

With Greenwich/Automatic set

Without Greenwich, but with a Bootstrap-based CMS theme:

Without Greenwich, without a Bootstrap-based theme:

Technical Details

This footer appears at the bottom of contribution and event pages and also is included in a few email tempaltes.

The markup for use in email templates is enabled under {if $emailMode eq true} and uses <a> with Bootstrap css classes (not Civi button classes).

For the contribution/event page footers, <button> is used with an onclick behaviour, in order to provide browser-default button appearance independent of civicrm.css or Bootstrap. IDs are added to each button to support targetted CSS (ie different colours).

Comments

The use of this in email templates hasn't been tested.

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[kcristiano]

@vingle Thanks for undertaking this. I've r-run this on WordPress, Drupal 7 and Drupal 8. The changes are apparent and an improvement on all. I don't have an easy way to test on Joomla, but I imagine you've done that.

I see this as a good improvement and well discussed in the issue, so I'd like to see this merged.

[vingle]

Thanks for the review @kcristiano. Yes my tests were on Joomla. I've just setup Backdrop to test and it works as expected there too.

[homotechsual]

This LGTM - confirming results of the R-Run from others. @eileenmcnaughton or @seamuslee001 can we get this merged? It's a good change and it has some privacy-positive implications.

[seamuslee001]

merging as per review and there doesn't seem to be any objection on the lab ticket either

[eileenmcnaughton]

Yay