[Zurich] improve admin view density for small screens

See mysociety/FixMyStreet-Commercial#674, mysociety/FixMyStreet-Commercial#673

 - two-column layout on admin map pages
 - tightening up admin button sizes and optional labels
 - stack admin notes vertically, to avoid overflowing table layout
 - improve display of zurich admin notes and answers
 - only print admin note headings if there are notes
 - slightly shorter textareas in admin UI
 - simplify display of non-editable problem info, as per customer’s suggestion

6 files changed, 254 insertions, 108 deletions

diff --git a/templates/web/zurich/admin/header.html b/templates/web/zurich/admin/header.html
index a7ae7fb56..1cbcfd233 100644
--- a/templates/web/zurich/admin/header.html
+++ b/templates/web/zurich/admin/header.html
@@ -14,7 +14,6 @@
 %]
 <style type="text/css">
     .adminhidden { color: #666666; }
-    .admininternal { background-color: #eeeeff; }
     .active { background-color: #ffffee; cursor: pointer; }
     .error { color: red; }
     .overdue { background-color: #ffcccc; }
diff --git a/templates/web/zurich/admin/list_updates.html b/templates/web/zurich/admin/list_updates.html
index 2b575f27e..defd83f21 100644
--- a/templates/web/zurich/admin/list_updates.html
+++ b/templates/web/zurich/admin/list_updates.html
@@ -1,45 +1,47 @@
 [% IF updates.size %]
 
-<h2>[% loc('Internal notes') %]</h3>
-
-<table cellspacing="0" cellpadding="2" border="1">
-    <tr>
-        <th>[% loc('ID') %]</th>
-        <th>[% loc('Created') %]</th>
-        <th>[% loc('User') %]</th>
-        <th>[% loc('Text') %]</th>
-    </tr>
-[% FOREACH update IN updates -%]
-    [% IF update.extra.is_internal_note %]
-    <tr class="[% 'admininternal' IF update.extra.is_internal_note %]">
-        <td>[% update.id %]</td>
-        <td>[% PROCESS format_date this_date=update.created %] [% update.created.hms %]</td>
-        <td><a href="mailto:[% update.user.email %]">[% update.user.name || update.user.email %]</a></td>
-        <td>[% update.text | html %]</td>
-    </tr>
-    [% END %]
-[% END -%]
-</table>
-
-<h2>[% loc('Updates') %]</h2>
-
-<table cellspacing="0" cellpadding="2" border="1">
-    <tr>
-        <th>[% loc('ID') %]</th>
-        <th>[% loc('Created') %]</th>
-        <th>[% loc('User') %]</th>
-        <th>[% loc('Text') %]</th>
-    </tr>
-[% FOREACH update IN updates -%]
-    [% IF ! update.extra.is_internal_note %]
-    <tr class="[% 'adminhidden' IF update.state == 'hidden' || update.problem.state == 'hidden' %]">
-        <td>[% update.id %]</td>
-        <td>[% PROCESS format_date this_date=update.created %] [% update.created.hms %]</td>
-        <td><a href="mailto:[% update.user.email %]">[% update.user.name || update.user.email %]</a></td>
-        <td>[% update.text | html %]</td>
-    </tr>
-    [% END %]
-[% END -%]
-</table>
+[%# We assume internal notes are lowest priority, and thus displayed last.
+    All other updates (eg: "I've done this work, here's what you should tell
+    the citizen") are displayed first. %]
+
+[%  internal_updates=[];
+    sdm_notes=[];
+    FOREACH update IN updates;
+        IF update.extra.is_internal_note;
+            internal_updates.unshift(update);
+        ELSE;
+            sdm_notes.unshift(update);
+        END;
+    END
+%]
+
+[% IF sdm_notes.size %]
+    <h2>[% loc('Notes from SDM to DM') %]</h2>
+
+    [% FOREACH update IN sdm_notes -%]
+        <div class="admin-note [% 'adminhidden' IF update.state == 'hidden' || update.problem.state == 'hidden' %]" title="[% loc('ID') %]: [% update.id %]">
+          <p class="admin-note__text">[% update.text | html %]</p>
+          <p class="admin-note__creator">
+            <a href="mailto:[% update.user.email %]">[% update.user.name || update.user.email %]</a>
+            &middot; [% PROCESS format_date this_date=update.created %] [% update.created.hms %]
+          </p>
+        </div>
+    [% END -%]
+[% END %]
+
+[% IF internal_updates.size %]
+    <h2>[% loc('Internal notes') %]</h2>
+
+    [% FOREACH update IN internal_updates -%]
+        <div class="admin-note admininternal" title="[% loc('ID') %]: [% update.id %]">
+          <p class="admin-note__text">[% update.text | html %]</p>
+          <p class="admin-note__creator">
+            <a href="mailto:[% update.user.email %]">[% update.user.name || update.user.email %]</a>
+            &middot; [% PROCESS format_date this_date=update.created %] [% update.created.hms %]
+          </p>
+        </div>
+    [% END -%]
+
+[% END %]
 
 [% END %]
diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html
index 7f8a0d74f..e41fb6060 100644
--- a/templates/web/zurich/admin/report_edit-sdm.html
+++ b/templates/web/zurich/admin/report_edit-sdm.html
@@ -15,13 +15,12 @@
     <input type="hidden" name="token" value="[% token %]" >
     <input type="hidden" name="submit" value="1" >
 
-<p align="right"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
-<p align="right"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
+<div class="admin-report-edit admin-report-edit--details">
 
 <ul class="no-bullets">
-<li><a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></li>
+<li>&raquo; <a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></li>
 
-<li><a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></li>
+<li>&raquo; <a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></li>
 
 <li><span class="mock-label">[% loc('Details:') %]</span> [% problem.detail | html %]
 [% IF problem.extra.original_detail %]
@@ -31,21 +30,37 @@
 %]
 [% END %]
 </li>
-<li><span class="mock-label">[% loc('Co-ordinates:') %]</span> [% problem.local_coords.join(',') %]
-	<input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
-	<input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
-([%
-    SET safe = problem.postcode | html;
-    tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
-%],
-[% IF problem.used_map %][% loc('used map') %][% ELSE %][% loc("didn't use map") %][% END %])</li>
 
 <li><span class="mock-label">[% loc('Category:') %]</span> [% problem.category | html %] </li>
-<li><span class="mock-label">[% loc('Name:') %]</span> [% problem.name | html %]
-<li><span class="mock-label">[% loc('Email:') %]</span> [% problem.user.email | html %]
-[% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
-<li><span class="mock-label">[% loc('Phone:') %]</span> [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('None') %]</em>[% END %]</li>
-<li><span class="mock-label">[% loc('Created:') %]</span> [% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</li>
+<li><span class="mock-label">[% loc('State:') %]</span> [% states.${problem.state} %]</li>
+
+<li>
+    <strong>[% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</strong>
+    <br>
+    [% problem.local_coords.join(',') %]
+    <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
+    <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
+    <br>
+    [% IF problem.used_map %]
+      [% loc('Used map') %]
+    [% ELSE %]
+      [% loc("Didn't use map") %]
+    [% END %]
+    <br>
+    [%
+        SET safe = problem.postcode | html;
+        tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
+    %]
+</li>
+
+<li>
+    <strong>[% IF problem.name %][% problem.name | html %][% ELSE %][% loc('(No name)') %][% END %]</strong>
+    <br>
+    [% problem.user.email | html %]
+    [% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
+    <br>
+    [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('(No phone number)') %]</em>[% END %]
+</li>
 
 <li>
     <label>[% loc('Time spent (in minutes):') %]</label> [% problem.get_time_spent %]
@@ -54,15 +69,21 @@
 [% IF problem.photo %]
 <li><img alt="" src="[% c.cobrand.base_url %]/photo/[% problem.photo %].temp.jpeg"></li>
 [% END %]
+</ul>
 
-<li><span class="mock-label">[% loc('State:') %]</span> [% states.${problem.state} %]</li>
+</div>
 
-<li><label for="new_internal_note">[% loc('New internal note:') %]</label>
-<textarea name='new_internal_note' id='new_internal_note' cols=60 rows=5></textarea></li>
+<div class="admin-report-edit admin-report-edit--interact">
 
-<li><label for="status_update">[% loc('New update:') %]</label>
-<textarea name='status_update' id='status_update' cols=60 rows=5></textarea></li>
+<p align="right"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p>
+<p align="right"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p>
 
+<ul class="no-bullets">
+<li><label for="new_internal_note">[% loc('New internal note:') %]</label>
+<textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4></textarea></li>
+
+<li><label for="status_update">[% loc('New note to DM:') %]</label>
+<textarea name='status_update' id='status_update' cols=60 rows=4></textarea></li>
 </ul>
 
 <p class="report-edit-action">
@@ -83,8 +104,10 @@
     <input style="float:left" type="submit" name="Submit changes" value="[% loc('Submit changes') %]" >
     <input style="float:right" type="submit" name="no_more_updates" value="[% loc('No further updates') %]">
 </p>
-</form>
 
 [% INCLUDE 'admin/list_updates.html' %]
 
+</div>
+</form>
+
 [% INCLUDE 'admin/footer.html' %]
diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html
index 19a076435..aeff9f9a0 100644
--- a/templates/web/zurich/admin/report_edit.html
+++ b/templates/web/zurich/admin/report_edit.html
@@ -16,10 +16,12 @@
     <input type="hidden" name="token" value="[% token %]" >
     <input type="hidden" name="submit" value="1" >
 
+<div class="admin-report-edit admin-report-edit--details">
+
 <ul class="no-bullets">
-<li class="report-edit-action"><a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></li>
+<li class="report-edit-action">&raquo; <a href="[% c.uri_for_email( '/report', problem.id ) %]">[% loc('View report on site' )%]</a></li>
 
-<li class="report-edit-action"><a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></li>
+<li class="report-edit-action">&raquo; <a href="http://webgis.intra.stzh.ch/AV_Online/Direct.asp?Map=AV&Search=Koord&West=[% problem.local_coords.0 %]&Nord=[% problem.local_coords.1 %]&B=300" target="_blank">Standort in AV-Online anzeigen</a></li>
 
 [% IF problem.state == 'fixed - council' OR problem.state == 'closed' %]
     <li><span class="mock-label">[% loc('Details:') %]</span> [% problem.detail | html %]
@@ -33,7 +35,7 @@
 [% ELSE %]
     <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=5>[% problem.detail | html %]</textarea>
+    <textarea name='detail' id='detail' cols=60 rows=4>[% problem.detail | html %]</textarea>
     [% IF problem.extra.original_detail %]
     [%
         SET detail_safe = problem.extra.original_detail | html;
@@ -43,15 +45,27 @@
     </li>
 [% END %]
 
-<li><span class="mock-label">[% loc('Co-ordinates:') %]</span> [% problem.local_coords.join(',') %]
-	<input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
-	<input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
+[%# repeated as static in this column %]
+<li><span class="mock-label">[% loc('Category:') %]</span> [% problem.category | html %] </li>
 
-([%
-    SET safe = problem.postcode | html;
-    tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
-%],
-[% IF problem.used_map %][% loc('used map') %][% ELSE %][% loc("didn't use map") %][% END %])</li>
+<li>
+    <strong>[% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</strong>
+    <br>
+    [% problem.local_coords.join(',') %]
+    <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% problem.latitude %]">
+    <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% problem.longitude %]">
+    <br>
+    [% IF problem.used_map %]
+      [% loc('Used map') %]
+    [% ELSE %]
+      [% loc("Didn't use map") %]
+    [% END %]
+    <br>
+    [%
+        SET safe = problem.postcode | html;
+        tprintf( loc('originally entered: &ldquo;%s&rdquo;'), safe )
+    %]
+</li>
 
 [% SET fields = problem.get_extra_fields; IF fields.size %]
 <li>
@@ -62,12 +76,16 @@
 </li>
 [% END %]
 
-<li><span class="mock-label">[% loc('Name:') %]</span> [% problem.name | html %] <input type='hidden' name='name' id='name' value='[% problem.name | html %]'></li>
-<li><span class="mock-label">[% loc('Email:') %]</span> [% problem.user.email | html %] <input type='hidden' id='email' name='email' value='[% problem.user.email | html %]'>
-[% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
+<li>
+    <strong>[% IF problem.name %][% problem.name | html %][% ELSE %][% loc('(No name)') %][% END %]</strong>
+    <input type='hidden' name='name' id='name' value='[% problem.name | html %]'>
+    <br>
+    [% problem.user.email | html %]
+    [% IF NOT problem.extra.email_confirmed %]<span class="error">[% loc('Unconfirmed') %]</span>[% END %]
+    <input type='hidden' id='email' name='email' value='[% problem.user.email | html %]'>
+    <br>
+    [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('(No phone number)') %]</em>[% END %]
 </li>
-<li><span class="mock-label">[% loc('Phone:') %]</span> [% IF problem.user.phone %][% problem.user.phone | html %][% ELSE %]<em>[% loc('None') %]</em>[% END %]</li>
-<li><span class="mock-label">[% loc('Created:') %]</span> [% PROCESS format_date this_date=problem.created %] [% problem.created.hms %]</li>
 
 <li>
     <label>[% loc('Time spent (in minutes):') %]</label> [% problem.get_time_spent %]
@@ -85,12 +103,32 @@
 <input type="submit" name="rotate_photo_[% loop.index %]" value="[% loc('Rotate Right') %]">
 [% END %]
 <br>
-<br>
 <input type="checkbox" id="publish_photo" name="publish_photo" value="1"[% ' checked' IF problem.extra.publish_photo %]>
 <label class="inline" for="publish_photo">[% loc("Publish photo") %]</label></li>
 [% END %]
 </ul>
 
+</div>
+
+<div class="admin-report-edit admin-report-edit--interact">
+
+<p><label for="new_internal_note">[% loc('New internal note:') %]</label>
+<textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4>[% new_internal_note | html %]</textarea></p>
+
+<p>
+<label for="time_spent">[% loc('Time spent (in minutes):') %]</label>
+<input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
+<script>
+    $(function () {
+        $('#form_time_spent').spinner({
+            spin: function (e, ui) {
+                if (ui.value < 0) { return false }
+            }
+        });
+    });
+</script>
+</p>
+
 <p><span class="mock-label">[% loc('State:') %]</span> <select name="state"  id="state">
     <option value="">--</option>
   [% FOREACH s IN states %]
@@ -223,29 +261,8 @@ $(function(){
             </textarea>
             </li>
         </ul>
-    [% CASE 'fixed - council' %]
-    <p><span class="mock-label">[% loc('Public response:') %]</span>
-    [% problem.extra.public_response | html %]
-    </p>
 [% END %]
 
-<p><label for="new_internal_note">[% loc('New internal note:') %]</label>
-<textarea name='new_internal_note' id='new_internal_note' cols=60 rows=5>[% new_internal_note | html %]</textarea></p>
-
-<p>
-<label for="time_spent">[% loc('Time spent (in minutes):') %]</label>
-<input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0">
-<script>
-    $(function () {
-        $('#form_time_spent').spinner({
-            spin: function (e, ui) {
-                if (ui.value < 0) { return false }
-            }
-        });
-    });
-</script>
-</p>
-
 <p align="right">
 [% IF problem.state == 'planned' %]
 <input type="submit" name="publish_response" value="[% loc('Publish the response') %]">
@@ -253,8 +270,17 @@ $(function(){
 <input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" >
 </p>
 
-</form>
+[% IF problem.state == 'fixed - council' %]
+    <h2>[% loc('Public response:') %]</h2>
+    <div class="admin-official-answer">
+        [% problem.extra.public_response | html_para %]
+    </div>
+[% END %]
 
 [% INCLUDE 'admin/list_updates.html' %]
 
+</div>
+
+</form>
+
 [% INCLUDE 'admin/footer.html' %]
diff --git a/web/cobrands/zurich/admin-faux-columns.gif b/web/cobrands/zurich/admin-faux-columns.gif
new file mode 100644
index 000000000..077fea2e5
--- /dev/null
+++ b/web/cobrands/zurich/admin-faux-columns.gif
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index c753e2081..8df633d0b 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -239,10 +239,98 @@ body.fullwidthpage.admin .content {
     width: 100%;
 }
 
-body.mappage.admin .content {
-    margin-top: 6em;
-    margin-left: 0.5em;
+body.mappage.admin {
+    .content {
+        margin-top: 5em;
+        margin-left: 0;
+        padding: 0px;
+        width: 40em;
+        background: #fff url(/cobrands/zurich/admin-faux-columns.gif) top center repeat-y;
+        @include box-shadow(0 0 5px rgba(0,0,0,0.5));
+    }
+}
+
+.admin-report-edit {
+    padding: 1em;
+    width: 50%;
+    float: right;
+    font-size: 0.8em;
+    box-sizing: border-box;
+
+    button, input[type="submit"], .btn {
+        padding: 0.5em 0.5em 0.3em 0.5em;
+        text-transform: none;
+    }
+
+    h2 {
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: bold;
+    }
+}
+
+.admin-report-edit--details {
+    label[for="title"],
+    label[for="detail"] {
+        display: none;
+    }
+
+    #title {
+        margin-top: 1em;
+        font-weight: bold;
+    }
+
+    #detail {
+        margin-bottom: 1em;
+    }
+}
+
+.admin-note__text {
+    background-color: #eee;
+    padding: 0.5em 1em;
+    border-radius: 4px;
+    position: relative;
+    margin-bottom: 0.5em;
+
+    // add a little speech bubble triangle to the bottom left corner
+    &:after {
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: -10px;
+        left: 10px;
+        border-top: 10px solid #eee;
+        border-left: 10px solid transparent;
+    }
+
+    .admininternal & {
+        background-color: #eef;
+
+        &:after {
+            border-top-color: #eef;
+        }
+    }
+}
+
+.admin-note__creator {
+    padding-left: 30px;
+}
+
+.admin-official-answer {
+    background-color: #1F52A3; // official Zurich blue colour
+    color: #fff;
+    padding: 0.8em 1em;
+    border-radius: 4px;
+
+    p {
+        margin-bottom: 0.5em;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
 }
+
 .admin {
     .content {
         margin: 2em 0 1em;
@@ -260,6 +348,13 @@ body.mappage.admin .content {
           font-weight: bold;
           padding-right: 0.333em;
         }
+        :first-child > label {
+            // avoid empty space above first label in a container
+            margin-top: 0;
+        }
+        textarea {
+            min-height: 0;
+        }
     }
 
     button, input[type=submit], .btn {
@@ -283,11 +378,12 @@ body.mappage.admin .content {
     background-color: white;
     padding: 1.5em 0 1em;
 }
+
 body.mappage .admin-nav-wrapper {
     box-sizing: border-box;
     padding-left: 10px;
     padding-right: 10px;
     position: fixed;
     width: 100%;
-    @include box-shadow(0 0 6px 1px #000);
+    @include box-shadow(0 0 5px rgba(0,0,0,0.5));
 }