Show a graphic on links to non-admin pages

Graphic and css from FMT. Fixes #579.

7 files changed, 20 insertions, 11 deletions

diff --git a/templates/web/default/admin/body-form.html b/templates/web/default/admin/body-form.html
index e876f3e5e..d334bf401 100644
--- a/templates/web/default/admin/body-form.html
+++ b/templates/web/default/admin/body-form.html
@@ -62,7 +62,7 @@
             your config file is not pointing to a live MapIt service.") %]
         [% END %]
         <br>
-        [% loc("For more information, see <a href='http://code.fixmystreet.com/customising/fms_and_mapit'>How FixMyStreet uses Mapit</a>.")%]
+        [% loc("For more information, see <a href='http://code.fixmystreet.com/customising/fms_and_mapit' class='admin-offsite-link'>How FixMyStreet uses Mapit</a>.")%]
       </p>
     </div>
     <p>
@@ -101,7 +101,7 @@
           "These settings are for bodies that use Open311 (or other back-end integration) to receive problem reports.<br>
            <strong>You don't need to set them if the Send Method is email.</strong>.
            For more information on Open311, see 
-           <a href='http://www.mysociety.org/2013/01/17/open311-explained//'>this article</a>.
+           <a href='http://www.mysociety.org/2013/01/17/open311-explained/' class='admin-offsite-link'>this article</a>.
            "
         ) %]
       </p>
@@ -151,7 +151,7 @@
           "Enable <strong>Open311 update-sending</strong> if the endpoint will send and receive
           updates to existing reports. If you're not sure, it probably does not, so leave this unchecked.
           For more information, see 
-          <a href='http://www.mysociety.org/2013/02/20/open311-extended/'>this article</a>."
+          <a href='http://www.mysociety.org/2013/02/20/open311-extended/' class='admin-offsite-link'>this article</a>."
         ) %]
       </p>
     </div>
diff --git a/templates/web/default/admin/body.html b/templates/web/default/admin/body.html
index 025a1bb88..58780a66f 100644
--- a/templates/web/default/admin/body.html
+++ b/templates/web/default/admin/body.html
@@ -8,12 +8,12 @@
 
 <p>
   [% IF example_pc %]
-    <a href="[% c.uri_for_email( '/around', { pc => example_pc } ) %]">[% tprintf( loc('Example postcode %s'), example_pc ) | html %]</a> |
+    <a href="[% c.uri_for_email( '/around', { pc => example_pc } ) %]" class="admin-offsite-link">[% tprintf( loc('Example postcode %s'), example_pc ) | html %]</a> |
   [% END %]
   [% IF c.cobrand.moniker == 'emptyhomes' %]
-    <a href="[% c.uri_for( 'reports', search => 'body:' _ body_id ) %]">[% loc('List all reported problems' ) %]</a> |
+    <a href="[% c.uri_for( 'reports', search => 'body:' _ body_id ) %]" class="admin-offsite-link">[% loc('List all reported problems' ) %]</a> |
   [% ELSE %]
-    <a href="[% c.uri_for_email( '/reports/' _ body_id ) %]">[% loc('List all reported problems' ) %]</a> |
+    <a href="[% c.uri_for_email( '/reports/' _ body_id ) %]" class="admin-offsite-link">[% loc('List all reported problems' ) %]</a> |
   [% END %]
   <a href="[% c.uri_for( 'body', body_id, { text => 1 } ) %]">[% loc('Text only version') %]</a>
 </p>
diff --git a/templates/web/default/admin/body_edit.html b/templates/web/default/admin/body_edit.html
index 1eeff9ab5..f2bae0c0b 100644
--- a/templates/web/default/admin/body_edit.html
+++ b/templates/web/default/admin/body_edit.html
@@ -15,7 +15,7 @@
 
 <p>
 [% IF example_pc %]
-<a href="[% c.uri_for_email( '/around', { pc => example_pc } ) %]">[% tprintf( loc('Example postcode %s'), example_pc ) | html %]</a>
+<a href="[% c.uri_for_email( '/around', { pc => example_pc } ) %]" class="admin-offsite-link">[% tprintf( loc('Example postcode %s'), example_pc ) | html %]</a>
 [% END %]
 </p>
 
diff --git a/templates/web/default/admin/config_page.html b/templates/web/default/admin/config_page.html
index a7db39cc8..959dcc422 100644
--- a/templates/web/default/admin/config_page.html
+++ b/templates/web/default/admin/config_page.html
@@ -113,7 +113,7 @@
 
 Other things can be changed on a cobrand basis by using functions in an
 (optional) Cobrand .pm module, as explained in the
-<a href="http://code.fixmystreet.com/customising/">customising section of our
+<a href="http://code.fixmystreet.com/customising/" class="admin-offsite-link">customising section of our
 documentation</a>. If you wish to add new functionality just for your cobrand
 that can't be done simply by changes to your cobrand's templates, you might
 need to add a new Cobrand function.
@@ -121,7 +121,7 @@ need to add a new Cobrand function.
 <p>Examples of cobrand functions are below; this is not exhaustive.
 Many were added for one specific cobrand, so didn't need a general
 configuration option. Please feel free to discuss on <a
-href="http://code.fixmystreet.com/community/">our mailing list</a> if you think
+href="http://code.fixmystreet.com/community/" class="admin-offsite-link">our mailing list</a> if you think
 something should be moved to the general.yml file, done differently,
 or have any questions.</p>
 
diff --git a/templates/web/default/admin/index.html b/templates/web/default/admin/index.html
index 5415222ab..ad5932d97 100644
--- a/templates/web/default/admin/index.html
+++ b/templates/web/default/admin/index.html
@@ -29,7 +29,7 @@
 
 [% IF c.cobrand.admin_show_creation_graph -%]
     <p>
-        <a href="[% c.config.BASE_URL %]/fms-live-creation.png">[% loc('Graph of problem creation by status over time') %]</a>
+        <a href="[% c.config.BASE_URL %]/fms-live-creation.png" class="admin-offsite-link">[% loc('Graph of problem creation by status over time') %]</a>
     </p>
 [% END -%]
 
diff --git a/web/cobrands/fixmystreet/images/external-link.png b/web/cobrands/fixmystreet/images/external-link.png
new file mode 100644
index 000000000..8e8ba74bf
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/external-link.png
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index b580f1927..80fec955f 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -1046,13 +1046,16 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
         margin-top: 0;
       }
     }
-  .fms-admin-warning, .fms-admin-info, .admin-hint {
+  .fms-admin-warning, .fms-admin-info, .admin-hint, .admin-offsite-link {
     display: none; // don't display admin-notes unless .show-admin-notes class is present
   }
   &.show-admin-notes {
     .fms-admin-warning, .fms-admin-info, .admin-hint {
       display: block;
     }
+    .admin-offsite-link {
+      display: inline;
+    }
     .fms-admin-warning, .fms-admin-info {
       padding: 1em;
       font-size: 90%;
@@ -1115,6 +1118,12 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
         }
       }
     }
+    .admin-offsite-link {
+      padding-right:12px;
+      background-image:url(/cobrands/fixmystreet/images/external-link.png);
+      background-position: right top;
+      background-repeat: no-repeat;
+    }
   }
 }