Updated drawer for updates and share report-tools

mysociety · Oct 28, 2024 · 10f277b · 10f277b
1 parent 871ff53
commit 10f277b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 34 deletions.
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
@@ -46,8 +46,6 @@
 
 [% TRY %][% INCLUDE 'report/_message_manager.html' %][% CATCH file %][% END %]
 [% INCLUDE 'report/display_tools_mobile.html' %]
-[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
-[% INCLUDE 'report/updates.html' %]
 
 [% IF problem.duplicate_of %]
 [% INCLUDE 'report/duplicate-no-updates.html' %]
@@ -58,6 +56,8 @@
 [% END %]
 
 [% INCLUDE 'report/display_tools.html' %]
+[% TRY %][% INCLUDE 'report/sharing.html' %][% CATCH file %][% END %]
+[% INCLUDE 'report/updates.html' %]
   </div>
 
   [% second_column | safe %]

diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html
@@ -1,5 +1,5 @@
 <div class="shadow-wrap">
-    <ul id="key-tools">
+    <ul id="key-tools" class="js-key-tools">
       [% IF c.user_exists OR NOT problem.non_public %]
         [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
         <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
@@ -15,13 +15,13 @@
           <svg role="presentation" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z"/></svg></a></li>
         [% END %]
         [% IF c.cobrand.moniker != 'zurich' %]
-        <li><a rel="nofollow" id="key-tool-report-updates" class="has-inline-svg" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">
+        <li><a rel="nofollow" class="has-inline-svg js-key-tool-report-updates" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">
           [% loc('Get updates' ) %]
           <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
         </a></li>
         [% END %]
         [% IF c.cobrand.moniker == 'fixmystreet' %]
-        <li><a rel="nofollow" id="key-tool-report-share" class="has-inline-svg" href="#report-share">
+        <li><a rel="nofollow" class="has-inline-svg js-key-tool-report-share" href="#report-share">
           [% loc('Share') %]
           <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
         </a></li>

diff --git a/templates/web/base/report/display_tools_mobile.html b/templates/web/base/report/display_tools_mobile.html
@@ -1,5 +1,5 @@
 <div class="shadow-wrap">
-  <ul id="key-tools-mobile">
+  <ul id="key-tools-mobile" class="js-key-tools">
     [% IF c.user_exists OR NOT problem.non_public %]
       [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
       <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
@@ -16,13 +16,13 @@
       </a></li>
       [% END %]
       [% IF c.cobrand.moniker != 'zurich' %]
-      <li><a rel="nofollow" id="key-tool-report-updates" class="has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">
+      <li><a rel="nofollow" class="js-key-tool-report-updates has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">
         <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" fill="currentColor" role="presentation" aria-hidden="true"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>
         [% loc('Get updates' ) %]
       </a></li>
       [% END %]
       [% IF c.cobrand.moniker == 'fixmystreet' %]
-      <li><a rel="nofollow" id="key-tool-report-share" class="has-inline-svg has-inline-svg--column-wrap" href="#report-share">
+      <li><a rel="nofollow" class="js-key-tool-report-share has-inline-svg has-inline-svg--column-wrap" href="#report-share">
         <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M378,324a69.78,69.78,0,0,0-48.83,19.91L202,272.41a69.68,69.68,0,0,0,0-32.82l127.13-71.5A69.76,69.76,0,1,0,308.87,129l-130.13,73.2a70,70,0,1,0,0,107.56L308.87,383A70,70,0,1,0,378,324Z"/></svg>
         [% loc('Share') %]
       </a></li>
@@ -40,22 +40,4 @@
       </a></li>
     [% END %]
   </ul>
-
-[% IF c.cobrand.moniker == 'fixmystreet' %]
-  <div id="report-share" class="hidden-js" align="center">
-      <a class="btn btn--social btn--twitter" href="https://twitter.com/intent/tweet?text=I%20just%20viewed%20this%20report:%20&lsquo;[% problem.title_safe | uri %]&rsquo;&amp;url=[% c.cobrand.base_url | uri %][% c.req.uri.path | uri %]&amp;via=fixmystreet&amp;related=mySociety">
-          <img alt="" src="/i/twitter-icon-32.png" width="17" height="32">
-          Tweet
-      </a>
-      <a class="btn btn--social btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=[% c.cobrand.base_url %][% c.req.uri.path %]">
-          <img alt="" src="/i/facebook-icon-32.png" width="17" height="32">
-          Share
-      </a>
-  </div>
-[% END %]
-
-<div id="report-updates-data" class="hidden-js">
-  [% INCLUDE 'alert/_updates.html' %]
-</div>
-
 </div>
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
@@ -28,9 +28,17 @@ function isR2L() {
                     opened.trigger('click');
                 }
                 if (!$this.addClass('hover').data('setup')) {
+                    var parentWidth = d.parent().width();
+                    var isMobile = $('html').hasClass('mobile');
+                    var bottomValue = ( $(window).height() - $this.offset().top + 3 ) + 'px';
                     d.hide().removeClass('hidden-js').css({
-                    padding: '1em',
-                    background: '#fff'
+                        padding: '1em',
+                        background: '#fff',
+                        position: 'fixed',
+                        top: isMobile ? '0' : '',
+                        bottom: isMobile ? '' : bottomValue,
+                        'z-index': 9999,
+                        width: parentWidth
                     });
                     $this.data('setup', true);
                 }
@@ -98,7 +106,7 @@ function isR2L() {
 
                 // Insert the .shadow-wrap controls into the top of the drawer.
                 $sw.addClass('static').prependTo($drawer);
-                $('#key-tools').addClass('area-js');
+                $('.js-key-tools').addClass('area-js');
                 $('#key-tool-wards').addClass('hover');
 
                 // Animate the drawer into place, enitrely covering the sidebar.
@@ -1293,11 +1301,11 @@ $.extend(fixmystreet.set_up, {
 
     if ($('.mobile').length) {
         // Make sure we end up with one Get updates link
-        if ($('#key-tools a.js-feed').length) {
+        if ($('#key-tools-mobile a.js-feed').length) {
             $('#sub_map_links a.js-feed').remove();
-            $('#key-tools a.js-feed').appendTo('#sub_map_links');
+            $('#key-tools-mobile a.js-feed').appendTo('#sub_map_links');
         }
-        $('#key-tools li:empty').remove();
+        $('#key-tools-mobile li:empty').remove();
         $('#report-updates-data').insertAfter($('#map_box'));
         if (fixmystreet.page !== 'around' && fixmystreet.page !== 'new' && !$('#toggle-fullscreen').length) {
             $('#sub_map_links').append('<a href="#" id="toggle-fullscreen" data-expand-text="'+ translation_strings.expand_map +'" data-compress-text="'+ translation_strings.collapse_map +'" >'+ translation_strings.expand_map +'</span>');
@@ -1362,8 +1370,12 @@ $.extend(fixmystreet.set_up, {
         $('#key-tool-wards').drawer('council_wards', false);
         $('#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');
+    $('.js-key-tool-report-updates').each(function() {
+        $(this).small_drawer('report-updates-data');
+    });
+    $('.js-key-tool-report-share').each(function() {
+        $(this).small_drawer('report-share');
+    });
   },
 
   ward_select_multiple: function() {