[Icons] Replace icons in report-tools.svg with inline svg

mysociety · Oct 24, 2024 · 07669d9 · 07669d9
1 parent 540f25a
commit 07669d9
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 101 deletions.
diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html
@@ -80,7 +80,10 @@
 
       [% IF allow_creation %]
         <div style="display:none" id="side-form">
-            <a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
+            <a href="#" class="js-back has-inline-svg problem-back problem-back--top">
+                <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
+                [% loc('Back') %]
+            </a>
         [% INCLUDE "report/new/fill_in_details_form.html"
             js = 1,
             report.used_map = 1

diff --git a/templates/web/base/report/_back_to_all.html b/templates/web/base/report/_back_to_all.html
@@ -1,2 +1,5 @@
 <a href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]"
-    class="problem-back js-back-to-report-list">[% loc('Back to all reports') %]</a>
+    class="has-inline-svg has-inline-svg--left-align problem-back js-back-to-report-list">
+    <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
+    [% loc('Back to all reports') %]
+</a>
diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html
@@ -4,24 +4,39 @@
         [% IF c.cobrand.users_can_hide AND relevant_staff_user %]
         <li><form method="post" action="/report/[% problem.id %]/delete" id="remove-from-site-form">
             <input type="hidden" name="token" value="[% csrf_token %]">
-            <button type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">[% loc('Remove from site') %]</button>
+            <button type="submit" id="key-tool-report-abuse" class="has-inline-svg" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
+              [% loc('Remove from site') %]
+              <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>
+            </button>
         </form></li>
         [% ELSIF c.cobrand.moniker != 'zurich' %]
-        <li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[%
-            c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse')
-        %]</a></li>
+        <li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">
+          [% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %] 
+          <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="feed" href="[% c.uri_for( '/alert/subscribe', { id => problem.id } ) %]">[% loc('Get updates' ) %]</a></li>
+        <li><a rel="nofollow" id="key-tool-report-updates" class="has-inline-svg" 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="share" href="#report-share">[% loc('Share') %]</a></li>
+        <li><a rel="nofollow" id="key-tool-report-share" class="has-inline-svg" 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>
         [% END %]
       [% END %]
       [% IF c.cobrand.moniker == 'zurich' %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems on the map' ) %]</a></li>
+        <li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+          [% loc( 'Problems on the map' ) %]
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        </a></li>
       [% ELSE %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems nearby' ) %]</a></li>
+        <li><a class="has-inline-svg" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+          [% loc( 'Problems nearby' ) %]
+          <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        </a></li>
       [% END %]
     </ul>
 

diff --git a/templates/web/base/report/display_tools_mobile.html b/templates/web/base/report/display_tools_mobile.html
@@ -1,45 +1,61 @@
 <div class="shadow-wrap">
-    <ul id="key-tools-mobile">
-      [% 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">
-            <input type="hidden" name="token" value="[% csrf_token %]">
-            <button type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">[% loc('Remove from site') %]</button>
-        </form></li>
-        [% ELSIF c.cobrand.moniker != 'zurich' %]
-        <li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[%
-            c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse')
-        %]</a></li>
-        [% END %]
-        [% IF c.cobrand.moniker != 'zurich' %]
-        <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>
-        [% END %]
-        [% IF c.cobrand.moniker == 'fixmystreet' %]
-        <li><a rel="nofollow" id="key-tool-report-share" class="share" href="#report-share">[% loc('Share') %]</a></li>
-        [% END %]
+  <ul id="key-tools-mobile">
+    [% 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">
+          <input type="hidden" name="token" value="[% csrf_token %]">
+          <button type="submit" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site">
+            <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>
+            [% loc('Remove from site') %]
+          </button>
+      </form></li>
+      [% ELSIF c.cobrand.moniker != 'zurich' %]
+      <li><a rel="nofollow" id="key-tool-report-abuse" class="has-inline-svg has-inline-svg--column-wrap" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">
+        <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>
+        [% c.cobrand.moniker == 'fixmystreet' ? 'Unsuitable?' : loc('Report abuse') %] 
+      </a></li>
       [% END %]
-      [% IF c.cobrand.moniker == 'zurich' %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems on the map' ) %]</a></li>
-      [% ELSE %]
-        <li><a class="chevron" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">[% loc( 'Problems nearby' ) %]</a></li>
+      [% 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 } ) %]">
+        <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 %]
-    </ul>
+      [% 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">
+        <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>
+      [% END %]
+    [% END %]
+    [% IF c.cobrand.moniker == 'zurich' %]
+      <li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+        <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        [% loc( 'Problems on the map' ) %]
+      </a></li>
+    [% ELSE %]
+      <li><a class="has-inline-svg has-inline-svg--column-wrap" id="key-tool-problems-nearby" href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]">
+        <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H0L6.5 8L0 16H6.5L13 8L6.5 0Z" fill="currentColor"/></svg>
+        [% loc( 'Problems nearby' ) %]
+      </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>
+  <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' %]
+  [% INCLUDE 'alert/_updates.html' %]
 </div>
 
 </div>
diff --git a/templates/web/base/report/new/fill_in_details.html b/templates/web/base/report/new/fill_in_details.html
@@ -42,7 +42,10 @@
   [% END %]
 
             <div id="report-a-problem-main">
-                <a href="#" class="js-back problem-back problem-back--top">[% loc('Back') %]</a>
+                <a href="#" class="js-back has-inline-svg problem-back problem-back--top">
+                  <svg role="presentation" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 0H13L6.5 8L13 16H6.5L0 8L6.5 0Z" fill="currentColor"/></svg>
+                  [% loc('Back') %]
+                </a>
               [% IF login_success %]
                 [% PROCESS 'report/new/login_success_form.html' %]
               [% ELSIF oauth_need_email %]

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
@@ -933,21 +933,17 @@ html.mobile.js-nav-open #js-menu-open-modal {
   margin: 0 -1em;
 }
 
-#key-tools {
+#key-tools, #key-tools-mobile {
   @include list-reset-soft;
   margin-bottom: 1em;
-  display: table;
+  display: flex;
+  flex-direction: row;
   width: 100%;
+  gap: 0.25rem;
+  box-sizing: border-box;
 
   li {
-    display: table-cell;
-    vertical-align: bottom;
     text-align: center;
-    border-#{$right}: 0.25em solid #fff;
-
-    &:last-child {
-      border-#{$right}: none;
-    }
 
     &.hidden-js {
       display: none;
@@ -962,17 +958,17 @@ html.mobile.js-nav-open #js-menu-open-modal {
 
   a,
   button {
-    display: block;
+    box-sizing: border-box;
+    height: 100%;
     background-color: #f5f5f5;
-    background-repeat: no-repeat;
     color: #333 !important;
-    padding: 1em;
+    padding: 1em 0.5em;
     font-size: 0.6875em;
     font-family: $meta-font;
     font-weight: normal;
     line-height: 1.2em;
-    white-space: normal;
-    border-radius: 0;
+    // Prevents elements with more than two words to break into multiple lines
+    white-space: nowrap;
 
     &:hover,
     &.hover,
@@ -982,34 +978,6 @@ html.mobile.js-nav-open #js-menu-open-modal {
       color: #fff !important;
     }
 
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 16px;
-      height: 16px;
-      margin-#{$left}: 0.5em;
-      vertical-align: -0.25em;
-      background-size: 112px 16px;
-      background-repeat: no-repeat;
-      background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-    }
-
-    &.abuse:after {
-      background-position: -96px 0;
-    }
-
-    &.feed:after {
-      background-position: -64px 0;
-    }
-
-    &.share:after {
-      background-position: -80px 0;
-    }
-
-    &.chevron:after {
-      background-position: flip(-16px 0, 0 0);
-    }
-
     &.offline:after {
       background-size: 16px 16px;
       background-position: 0 0;
@@ -1032,6 +1000,22 @@ html.mobile.js-nav-open #js-menu-open-modal {
   }
 }
 
+#key-tools-mobile {
+  padding: 0 1em;
+  li {
+    flex: 1;
+
+    a, button {
+      border-radius:4px;
+      border: 1px solid #ccc;
+    }
+  }
+}
+
+#key-tools {
+  display: none;
+}
+
 #report-updates-data {
   img {
     float: $right;
@@ -1794,7 +1778,6 @@ input.final-submit {
 }
 
 .problem-back {
-  display: block;
   font-size: 1em;
   line-height: 1.2em;
   margin: -1em -1em 1em -1em;
@@ -1806,19 +1789,6 @@ input.final-submit {
   &:hover {
     color: #666;
   }
-
-  &:before {
-    content: "";
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-#{$right}: 0.5em;
-    vertical-align: -0.15em;
-    background-size: 112px 16px;
-    background-repeat: no-repeat;
-    background-image: url("/cobrands/fixmystreet/images/report-tools.svg");
-    background-position: flip(0 0, -16px 0);
-  }
 }
 .problem-back--top {
     margin-top: 0;

diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
@@ -679,11 +679,13 @@ body.authpage {
 }
 
 #key-tools {
+  display: table;
   border-top: 0.25em solid $primary;
   margin: 0;
   box-shadow: 0 0 1em 1em #fff;
 
   li {
+    display: table-cell;
     border-#{$right}: none; // undo border-right/left from _base.scss
 
     // Cancel centre alignment, if the *only child* in list.
@@ -701,6 +703,10 @@ body.authpage {
   }
 }
 
+#key-tools-mobile {
+  display: none;
+}
+
 // If JS is disabled, these are still CSS positioned, so don't want behind shining through.
 #report-share, #report-updates-data {
     background-color: #fff;