Add sharing buttons.

5 files changed, 50 insertions, 15 deletions

diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html
index ab4ee52df..f5e45eba2 100644
--- a/templates/web/fixmystreet/report/display.html
+++ b/templates/web/fixmystreet/report/display.html
@@ -25,9 +25,20 @@
     <ul id="key-tools">
         <li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[% loc('Report abuse' ) %]</a></li>
         <li><a rel="nofollow" id="key-tool-report-updates" class="feed" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Get updates' ) %]</a></li>
+        [% IF c.cobrand.moniker == 'fixmystreet' %]
+        <li><a rel="nofollow" id="key-tool-report-share" class="share" href="#report-share">[% loc('Share') %]</a></li>
+        [% END %]
         <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => short_latitude, lon => short_longitude } ) %]">[% loc( 'Problems nearby' ) %]</a></li>
     </ul>
 
+[% IF c.cobrand.moniker == 'fixmystreet' %]
+    <div id="report-share" class="hidden-js" align="center">
+        <a href="https://twitter.com/share" class="twitter-share-button" data-text="I just reported &lsquo;[% problem.title | html %]&rsquo;" data-via="fixmystreet" data-related="mysociety" data-count="none" data-dnt="true">Tweet</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+        <iframe src="//www.facebook.com/plugins/like.php?href=[% c.req.uri | uri %]&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
+    </div>
+[% END %]
+
 <div id="report-updates-data" class="hidden-js">
     <form action="[% c.uri_for( '/alert/subscribe' ) %]" method="post">
         <p><a href="[% c.uri_for( '/rss', problem.id ) %]">
diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss
index c5c7854a8..900f4010e 100644
--- a/web/cobrands/fixmystreet/_base.scss
+++ b/web/cobrands/fixmystreet/_base.scss
@@ -585,6 +585,10 @@ p.label-valid {
           background-image:url('/cobrands/fixmystreet/images/sprite.png');
           background-position:center -2563px;
         }
+        &.share {
+          background-image: url('/cobrands/fixmystreet/images/share.png');
+          background-position: center 25%;
+        }
         &.chevron {
           background-image:url('/cobrands/fixmystreet/images/sprite.png');
           background-position:center -2716px;
@@ -631,6 +635,9 @@ p.label-valid {
   }
 }
 
+#report-share iframe {
+    vertical-align: top;
+}
 
 //footer blocks
 #footer-mobileapps {
diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss
index 0973e645d..d2e47d76c 100644
--- a/web/cobrands/fixmystreet/_layout.scss
+++ b/web/cobrands/fixmystreet/_layout.scss
@@ -589,6 +589,11 @@ body.twothirdswidthpage {
           background-image:url(/cobrands/fixmystreet/images/sprite.png);
           background-position:right -3074px;
         }
+        &.share {
+          min-width: 5em;
+          background-image: url(/cobrands/fixmystreet/images/share.png);
+          background-position: 90% 50%;
+        }
         &.chevron {
           background-image:url(/cobrands/fixmystreet/images/sprite.png);
           background-position:right -3225px;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 21f13d47c..714699386 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -246,23 +246,34 @@ $(function(){
 
 // A sliding drawer from the bottom of the page, small version
 // that doesn't change the main content at all.
-$.fn.small_drawer = function(id) {
-    this.toggle(function(){
-        var $this = $(this), d = $('#' + id);
-        if (!$this.addClass('hover').data('setup')) {
-            d.hide().removeClass('hidden-js').css({
+(function($){
+
+    var opened;
+
+    $.fn.small_drawer = function(id) {
+        this.toggle(function(){
+            if (opened) {
+                opened.click();
+            }
+            var $this = $(this), d = $('#' + id);
+            if (!$this.addClass('hover').data('setup')) {
+                d.hide().removeClass('hidden-js').css({
                 padding: '1em',
                 background: '#fff'
-            });
-            $this.data('setup', true);
-        }
-        d.slideDown();
-    }, function(e){
-        var $this = $(this), d = $('#' + id);
-        $this.removeClass('hover');
-        d.slideUp();
-    });
-};
+                });
+                $this.data('setup', true);
+            }
+            d.slideDown();
+            opened = $this;
+        }, function(e){
+            var $this = $(this), d = $('#' + id);
+            $this.removeClass('hover');
+            d.slideUp();
+            opened = null;
+        });
+    };
+
+})(jQuery);
 
 // A sliding drawer from the bottom of the page, large version
 $.fn.drawer = function(id, ajax) {
@@ -337,6 +348,7 @@ $.fn.drawer = function(id, ajax) {
         $('#key-tool-around-updates').drawer('updates_ajax', true);
     }
     $('#key-tool-report-updates').small_drawer('report-updates-data');
+    $('#key-tool-report-share').small_drawer('report-share');
 
     // Go directly to RSS feed if RSS button clicked on alert page
     // (due to not wanting around form to submit, though good thing anyway)
diff --git a/web/cobrands/fixmystreet/images/share.png b/web/cobrands/fixmystreet/images/share.png
new file mode 100644
index 000000000..6eb1b6cdb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/share.png