Improve admin report edit page.

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

3 files changed, 100 insertions, 40 deletions

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' %]