Improve admin report edit page.

Show map, break into two columns, fix display of sent time after
clicking "Mark as sent", tidy up labels.

9 files changed, 160 insertions, 79 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Admin.pm b/perllib/FixMyStreet/App/Controller/Admin.pm
index 28c543810..b7f051c11 100644
--- a/perllib/FixMyStreet/App/Controller/Admin.pm
+++ b/perllib/FixMyStreet/App/Controller/Admin.pm
@@ -652,23 +652,21 @@ sub report_edit : Path('report_edit') : Args(1) {
 
     $c->forward('/auth/get_csrf_token');
 
-    if ( $c->cobrand->moniker eq 'zurich' ) {
-        $c->stash->{page} = 'admin';
-        FixMyStreet::Map::display_map(
-            $c,
+    $c->stash->{page} = 'admin';
+    FixMyStreet::Map::display_map(
+        $c,
+        latitude  => $problem->latitude,
+        longitude => $problem->longitude,
+        pins      => $problem->used_map
+        ? [ {
             latitude  => $problem->latitude,
             longitude => $problem->longitude,
-            pins      => $problem->used_map
-            ? [ {
-                latitude  => $problem->latitude,
-                longitude => $problem->longitude,
-                colour    => $c->cobrand->pin_colour($problem),
-                type      => 'big',
-              } ]
-            : [],
-            print_report => 1,
-        );
-    }
+            colour    => $c->cobrand->pin_colour($problem, 'admin'),
+            type      => 'big',
+          } ]
+        : [],
+        print_report => 1,
+    );
 
     if (my $rotate_photo_param = $self->_get_rotate_photo_param($c)) {
         $self->rotate_photo($c, $problem, @$rotate_photo_param);
@@ -707,8 +705,7 @@ sub report_edit : Path('report_edit') : Args(1) {
     }
     elsif ( $c->get_param('mark_sent') ) {
         $c->forward('/auth/check_csrf_token');
-        $problem->whensent(\'current_timestamp');
-        $problem->update();
+        $problem->update({ whensent => \'current_timestamp' })->discard_changes;
         $c->stash->{status_message} = '<p><em>' . _('That problem has been marked as sent.') . '</em></p>';
         $c->forward( 'log_edit', [ $id, 'problem', 'marked sent' ] );
     }
diff --git a/templates/web/base/admin/header.html b/templates/web/base/admin/header.html
index 145bb986d..ddaa4aa44 100644
--- a/templates/web/base/admin/header.html
+++ b/templates/web/base/admin/header.html
@@ -1,16 +1,14 @@
-[% INCLUDE 'header.html' admin = 1, bodyclass = 'fullwidthpage admin' %]
+[%
+    SET bodyclass = bodyclass || 'fullwidthpage';
+    INCLUDE 'header.html' admin = 1, bodyclass = bodyclass _ ' admin';
+%]
 <style type="text/css">
 dt { clear: left; float: left; font-weight: bold; }
 dd { margin-left: 8em; }
 .adminhidden { color: #666666; }
 .error { color: red; }
 select { width: auto; }
+.sm { font-size: smaller; }
 </style>
 
-    <p><strong>[% tprintf(loc('%s admin:', "%s here is the site name"), site_name) %]</strong>
-    [%- FOREACH link IN allowed_links %]
-    <a href="[% c.uri_for( link ) %]">[% allowed_pages.$link.0 %]</a>
-    [% IF NOT loop.last %]|[% END %]
-    [% END %]</p>
-
-    <h1>[% title %]</h1>
+[% INCLUDE 'admin/navigation.html' UNLESS bodyclass.match('mappage') %]
diff --git a/templates/web/base/admin/navigation.html b/templates/web/base/admin/navigation.html
new file mode 100644
index 000000000..895589822
--- /dev/null
+++ b/templates/web/base/admin/navigation.html
@@ -0,0 +1,11 @@
+<div class="full-width full-width--top">
+    <p>
+        <strong>[% tprintf(loc('%s admin:', "%s here is the site name"), site_name) %]</strong>
+      [%- FOREACH link IN allowed_links %]
+        <a href="[% c.uri_for( link ) %]">[% allowed_pages.$link.0 %]</a>
+        [% IF NOT loop.last %]|[% END %]
+      [% END %]
+    </p>
+</div>
+
+<h1>[% title %]</h1>
diff --git a/templates/web/base/admin/report_edit.html b/templates/web/base/admin/report_edit.html
index 20ed25c21..e3deccaf6 100644
--- a/templates/web/base/admin/report_edit.html
+++ b/templates/web/base/admin/report_edit.html
@@ -1,12 +1,29 @@
-[% INCLUDE 'admin/header.html' title=tprintf(loc('Editing problem %d'), problem.id ) -%]
-[% PROCESS 'admin/report_blocks.html' %]
+[%
+    PROCESS "maps/${map.type}.html";
+    INCLUDE 'admin/header.html'
+        title = tprintf(loc('Editing problem %d'), problem.id ),
+        bodyclass = 'mappage with-notes';
+    PROCESS 'admin/report_blocks.html'
+-%]
 
-[% status_message %]
+[% map_html %]
+</div>
+
+<div id="map_sidebar">
+
+[% INCLUDE 'admin/navigation.html' title = tprintf(loc('Editing problem %d'), problem.id ) %]
+
+<div id="side">
 
 <form method="post" action="[% c.uri_for( 'report_edit', problem.id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8">
     <input type="hidden" name="token" value="[% csrf_token %]" >
     <input type="hidden" name="submit" value="1" >
-<ul>
+
+<div class="sidebar">
+
+    <p align="center"><input type="submit" name="Submit changes" value="[% loc('Submit changes') %]"></p>
+
+    <ul>
     [%- cobrand_data = problem.cobrand_data;
         cobrand_data = c.data_for_generic_problem IF !problem.cobrand;
         IF cobrand_data;
@@ -15,10 +32,7 @@
             uri = c.uri_for_email( '/report', problem.id );
         END;
     %]
-<li><a href="[% uri %]" class="admin-offsite-link">[% loc('View report on site' )%]</a></li>
-<li><label for='title'>[% loc('Subject:') %]</label> <input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></li>
-<li><label for='detail'>[% loc('Details:') %]</label>
-<textarea name='detail' id='detail' cols=60 rows=10>[% problem.detail | html %]</textarea></li>
+    <li><a href="[% uri %]" class="admin-offsite-link">[% loc('View report on site' )%]</a></li>
 
 <li>[% loc('Co-ordinates:') %]
 <a href="[% c.config.MAPIT_URL %][%
@@ -31,27 +45,59 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
     ([% local_coords.0 %], [% local_coords.1 %])
 [% END %]
 
-([%
+<small>([%
     SET postcode_safe = problem.postcode | html;
     tprintf( loc('originally entered: &ldquo;%s&rdquo;'), postcode_safe )
 %],
-[% IF problem.used_map %][% loc('used map') %][% ELSE %][% loc("didn't use map") %][% END %])
+[% IF problem.used_map %][% loc('used map') %][% ELSE %][% loc("didn't use map") %][% END %])</small>
 </li>
 
 <li>[% loc('Body:') %]
   [% IF problem.bodies_str %]
     [% FOREACH body IN problem.bodies.values %]
+      [% SET body_printed = 1 %]
       <a href="[% c.uri_for('body', body.id) %]">[% body.name | html %]</a>
       [%- ',' IF NOT loop.last %]
     [% END %]
+    [% IF NOT body_printed %]
+      <em>[% problem.bodies_str %]</em>
+    [% END %]
   [% ELSE %]
     <em>[% loc('None' ) %]</em>
   [% END %]
-  ([% loc('other areas:') %] [% problem.areas | remove('^,') | remove( ',$' ) %])</li>
+  <small>([% loc('other areas:') %] [% problem.areas | remove('^,') | remove( ',$' ) | replace(',', ', ') %])</small>
+</li>
 [% IF problem.extra.address %]
 <li>[% loc('Property address:') %] [% problem.extra.address | html %]</li>
 [% END %]
-<li><label class="inline" for="state">[% loc('State:') %]</label> <select name="state"  id="state">
+
+<li class="sm">[% loc('Created:') %] [% PROCESS format_time time=problem.created %]</li>
+<li class="sm">[% loc('Confirmed:') %] [% PROCESS format_time time=problem.confirmed no_time='-' %]</li>
+<li class="sm">[% loc('Sent:') %] [% PROCESS format_time time=problem.whensent %]
+[% IF problem.state == 'confirmed' AND problem.whensent %]<input onclick="return confirm('[% loc('You really want to resend?') %]')" type="submit" name="resend" value="[% loc('Resend report') %]">[% END %]
+[% IF NOT problem.whensent %]<input type="submit" name="mark_sent" value="[% loc('Mark as sent') %]">[% END %]
+</li>
+<li class="sm">[% loc('Last update:') %] [% PROCESS format_time time=problem.lastupdate %]</li>
+<li>[% loc('Service:') %] [% problem.service OR '<em>' _ loc('None') _ '</em>' %]</li>
+<li>[% loc('Cobrand:') %] [% problem.cobrand %]
+<br><small>[% loc('Cobrand data:') %] [% cobrand_data OR '<em>' _ loc('None') _ '</em>' %]</small>
+</li>
+<li>[% loc('Extra data:') %] [% problem.extra ? 'Yes' : 'No' %]</li>
+<li>[% loc('Going to send questionnaire?') %] [% IF problem.send_questionnaire %][% loc('Yes') %][% ELSE %][% loc('No') %][% END %]</li>
+
+</ul>
+</div>
+
+[% status_message %]
+
+<ul class="plain-list">
+<li><label for='title'>[% loc('Subject:') %]</label>
+    <input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></li>
+<li><label for='detail'>[% loc('Details:') %]</label>
+<textarea name='detail' id='detail' cols=60 rows=10>[% problem.detail | html %]</textarea></li>
+
+<li><label class="inline-text" for="state">[% loc('State:') %]</label>
+<select name="state"  id="state">
 [% FOREACH group IN state_groups %]
     <optgroup label="[% group.0 %]">
     [% FOREACH state IN group.1 %]
@@ -60,28 +106,26 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
     </optgroup>
 [% END %]
 </select></li>
-<li>[% loc('Category:') %] [% problem.category | html %] </li>
-<li><label class="inline" for="anonymous">[% loc('Anonymous:') %]</label> <select name="anonymous"  id="anonymous">
+<li><label class="inline-text" for="category">[% loc('Category:') %]</label>
+    [% problem.category | html %]
+</li>
+<li><label class="inline-text" for="anonymous">[% loc('Anonymous:') %]</label>
+<select name="anonymous"  id="anonymous">
 <option [% 'selected ' IF problem.anonymous %]value="1">[% loc('Yes') %]</option>
 <option [% 'selected ' IF !problem.anonymous %]value="0">[% loc('No') %]</option>
 </select></li>
-<li>[% loc('Name:') %] <input type='text' name='name' id='name' value='[% problem.name | html %]'></li>
-<li>[% loc('Email:') %] <input type='text' id='email' name='email' value='[% problem.user.email | html %]'> [% PROCESS abuse_button %] [% PROCESS flag_button user=problem.user %]</li>
-<li>[% loc('Phone:') %] [% problem.user.phone | html %]</li>
-<li>[% loc('Created:') %] [% PROCESS format_time time=problem.created %]</li>
-<li>[% loc('Confirmed:') %] [% PROCESS format_time time=problem.confirmed no_time='-' %]</li>
-<li>[% loc('Sent:') %] [% PROCESS format_time time=problem.whensent %]
-[% IF problem.state == 'confirmed' AND problem.whensent %]<input onclick="return confirm('[% loc('You really want to resend?') %]')" type="submit" name="resend" value="[% loc('Resend report') %]">[% END %]
-[% IF NOT problem.whensent %]<input type="submit" name="mark_sent" value="[% loc('Mark as sent') %]">[% END %]
+<li><label for="name">[% loc('Name:') %]</label>
+    <input type='text' name='name' id='name' value='[% problem.name | html %]'></li>
+<li><label for="email">[% loc('Email:') %]</label>
+    <input type='text' id='email' name='email' value='[% problem.user.email | html %]'>
+    [% PROCESS abuse_button %]
+    [% PROCESS flag_button user=problem.user %]
 </li>
-<li>[% loc('Last update:') %] [% PROCESS format_time time=problem.lastupdate %]</li>
-<li>[% loc('Service:') %] [% problem.service %]</li>
-<li>[% loc('Cobrand:') %] [% problem.cobrand %]</li>
-<li>[% loc('Cobrand data:') %] [% problem.cobrand_data %]</li>
-<li>[% loc('Extra data:') %] [% problem.extra ? 'Yes' : 'No' %]</li>
-<li>[% loc('Going to send questionnaire?') %] [% IF problem.send_questionnaire %][% loc('Yes') %][% ELSE %][% loc('No') %][% END %]</li>
-<li><label class="inline" for="flagged">[% loc('Flagged:') %]</label> <input type="checkbox" name="flagged"[% ' checked' IF problem.flagged %]></li>
-<li><label class="inline" for="non_public">[% loc('Private') %]:</label> <input type="checkbox" name="non_public"[% ' checked' IF problem.non_public %]></li>
+<li>[% loc('Phone:') %] [% problem.user.phone | html %]</li>
+<li><label class="inline-text" for="flagged">[% loc('Flagged:') %]</label>
+    <input type="checkbox" id="flagged" name="flagged"[% ' checked' IF problem.flagged %]></li>
+<li><label class="inline-text" for="non_public">[% loc('Private') %]:</label>
+    <input type="checkbox" id="non_public" name="non_public"[% ' checked' IF problem.non_public %]></li>
 
 [% IF problem.photo %]
 <li>
@@ -96,7 +140,7 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
         </div>
         <input type="submit" name="rotate_photo_[% loop.index %]" value="[% loc('Rotate Left') %]">
         <input type="submit" name="rotate_photo_[% loop.index %]" value="[% loc('Rotate Right') %]">
-        <input type="checkbox" id="remove_photo_[% loop.index %]" name="remove_photo_[% loop.index %]" value="1">
+        <br><input type="checkbox" id="remove_photo_[% loop.index %]" name="remove_photo_[% loop.index %]" value="1">
         <label class="inline" for="remove_photo_[% loop.index %]">[% loc("Remove photo (can't be undone!)") %]</label></li>
     </li>
   [% END %]
@@ -105,8 +149,15 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a>
 [% END %]
 
 </ul>
-<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" ></form>
+<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]">
+</form>
 
+</div>
+
+<div class="full-width full-width--bottom">
 [% INCLUDE 'admin/list_updates.html' %]
+</div>
+
+</div>
 
 [% INCLUDE 'admin/footer.html' %]
diff --git a/templates/web/fixmystreet.com/report/new/extra_name.html b/templates/web/fixmystreet.com/report/new/extra_name.html
index d1eec5fa3..4663c025d 100644
--- a/templates/web/fixmystreet.com/report/new/extra_name.html
+++ b/templates/web/fixmystreet.com/report/new/extra_name.html
@@ -10,13 +10,13 @@ shared with the council or displayed publicly.</em>
 [% SET gender = report.get_extra_metadata('gender') %]
 <p class="radio-segmented-control" style="font-size: 80%">
     <input type="radio" name="gender" id="gender_female" value="female"[% ' checked' IF gender == 'female' %]>
-    <label class="inline" for="gender_female">Female</label>
+    <label for="gender_female">Female</label>
     <input type="radio" name="gender" id="gender_male" value="male"[% ' checked' IF gender == 'male' %]>
-    <label class="inline" for="gender_male">Male</label>
+    <label for="gender_male">Male</label>
     <input type="radio" name="gender" id="gender_other" value="other"[% ' checked' IF gender == 'other' %]>
-    <label class="inline" for="gender_other">Other</label>
+    <label for="gender_other">Other</label>
     <input type="radio" name="gender" id="gender_unknown" value="unknown"[% ' checked' IF gender == 'unknown' %]>
-    <label class="inline" for="gender_unknown">Prefer not to say</label>
+    <label for="gender_unknown">Prefer not to say</label>
 </p>
 [% END %]
 
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 43e47e099..38bbf4ea0 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -307,10 +307,6 @@ $(function(){
     /*
      * Map controls prettiness
      */
-    //add links container (if its not there)
-    if($('#sub_map_links').length === 0){
-        $('<p id="sub_map_links" />').insertAfter($('#map'));
-    }
 
 // A sliding drawer from the bottom of the page, small version
 // that doesn't change the main content at all.
@@ -446,11 +442,15 @@ $.fn.drawer = function(id, ajax) {
     });
 
     //add permalink on desktop, force hide on mobile
-    if (cobrand != 'zurich') {
+    //add links container (if its not there)
+    if (cobrand != 'zurich' && !$('.mobile').length) {
+        if ($('#sub_map_links').length === 0) {
+            $('<p id="sub_map_links" />').insertAfter($('#map'));
+        }
         $('#sub_map_links').append('<a href="#" id="map_permalink">' + translation_strings.permalink + '</a>');
     }
 
-    if($('.mobile').length){
+    if ($('.mobile').length) {
         $('#map_permalink').hide();
         $('#key-tools a.feed').appendTo('#sub_map_links');
         $('#key-tools li:empty').remove();
diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss
index 36323f295..a53f9f60a 100644
--- a/web/cobrands/sass/_admin.scss
+++ b/web/cobrands/sass/_admin.scss
@@ -9,6 +9,11 @@ $button_col:    #fff;
 $button_bg_col: #a1a1a1;  // also search bar (tables)
 
 .admin {
+    .full-width {
+        padding: 0 1em;
+        background-color: #fff;
+    }
+
     table {
         width: 100%;
         font-size: 0.9em;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index f81d969ab..5cff6e769 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -301,11 +301,15 @@ label{
   margin-top: 1.25em;
   margin-bottom: 0.25em;
   font-weight: bold;
-  &.inline{
+  &.inline {
     display: inline;
     padding: flip(0 2em 0 1em, 0 1em 0 2em);
     font-weight: normal;
   }
+  &.inline-text {
+    display: inline;
+    font-weight: normal;
+  }
 }
 
 // grey background, full width box
@@ -542,10 +546,9 @@ body.mappage .wrapper {
   position: static;
 }
 
-
 // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
 .shadow-wrap {
-  @extend .full-width;
+  margin: 0 -1em;
   ul#key-tools{
     @include list-reset-soft;
     margin-bottom: 1em;
@@ -644,7 +647,7 @@ footer {
 }
 
 #footer-mobileapps {
-  @extend .full-width;
+  margin: 0 -1em;
   padding: 1em 1em 0;
   h4 {
     margin:0;
@@ -998,10 +1001,9 @@ input.final-submit {
 
 // map stuff
 #map_box {
-  @extend .full-width;
+  margin: 0 -1em 1em;
   background: #333;
   height: 29em;
-  margin-bottom: 1em;
   overflow: hidden;
   position: relative;
 
@@ -1348,11 +1350,10 @@ table.nicetable {
 }
 
 .promo {
-  @extend .full-width;
+  margin: 0 -1em 1em;
   color: $primary_text;
   background: $primary;
   padding:1em;
-  margin-bottom:1em;
   overflow:hidden;
   position: relative;
   .close-promo {
@@ -1372,10 +1373,9 @@ table.nicetable {
 }
 
 .alert {
-  @extend .full-width;
+  margin: 0 -1em 1em;
   background:#ff0000;
   padding:1em;
-  margin-bottom:1em;
   color:#fff;
   a, a:hover {
     color:$primary;
@@ -1442,7 +1442,7 @@ table.nicetable {
     margin: 0.5em 0 0;
   }
   #postcodeForm {
-    @extend .full-width;
+    margin: 0 -1em;
     padding:1em;
     color: $primary_text;
     background: $primary;
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index cd90b74ed..536825b5a 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -324,6 +324,18 @@ body.mappage {
   }
 }
 
+// Want to cover over the blue sidebar
+body.mappage.admin {
+    .full-width--top {
+        margin-top: -1em;
+        padding-top: 1em;
+    }
+    .full-width--bottom {
+        padding-bottom: 1em;
+        margin-bottom: -4em;
+    }
+}
+
 #map_box {
   position: absolute;
   z-index: auto;
@@ -839,7 +851,7 @@ textarea.form-error {
 }
 
 // Notes presented alongside the reporting form
-#report-a-problem-sidebar {
+.sidebar, #report-a-problem-sidebar {
   margin-bottom: 2em;
 
   // If the parent is .with-notes we know we have space to
@@ -854,6 +866,13 @@ textarea.form-error {
     font-size: 0.75em;
   }
 
+  ul {
+      @include list-reset-soft;
+      li {
+          margin-bottom: 0.5em;
+      }
+  }
+
   .sidebar-notes {
     color: #666;
   }