[Oxfordshire] Move council info into own section of report page

Oxfordshire reports have a council Reference Number, and an
estimate of how long they'll take to be fixed. To make this
information easier to parse, we've broken it out into its
own section, between the problem description and updates.

Conflicts:
	web/cobrands/oxfordshire/base.scss

4 files changed, 164 insertions, 23 deletions

diff --git a/templates/web/oxfordshire/report/_council_sent_info.html b/templates/web/oxfordshire/report/_council_sent_info.html
index df39acfe6..499fd4637 100644
--- a/templates/web/oxfordshire/report/_council_sent_info.html
+++ b/templates/web/oxfordshire/report/_council_sent_info.html
@@ -1,24 +1,24 @@
 [% IF problem.whensent || problem.can_display_external_id %]
-    <small class="council_sent_info"><br>
-        [% IF problem.whensent %]
-        [% problem.duration_string(c) %]<br>
-        [% END %]
-        [% IF c.cobrand.problem_response_days(problem) > 0 %]
+    <div class="council_info_box">
+      [% IF problem.can_display_external_id %]
+        <h3>
+          [% IF problem.whensent %]
+              Council ref:&nbsp;[% problem.external_id %]
+          [% ELSE %]
+              [% problem.external_body %] ref:&nbsp;[% problem.external_id %]
+          [% END %]
+        </h3>
+      [% END %]
+
+      [% IF c.cobrand.problem_response_days(problem) > 0 %]
+        <p>
             Problems in the
             [% problem.category %]
             category are generally responded to within
             [% c.cobrand.problem_response_days(problem) %]
             working days.
-            <br />
-        [% END %]
-        <strong>
-        [% IF problem.can_display_external_id %]
-            [% IF problem.whensent %]
-                Council ref:&nbsp;[% problem.external_id %]
-            [% ELSE %]
-                [% problem.external_body %] ref:&nbsp;[% problem.external_id %]
-            [% END %]
-        [% END %]
-        </strong>
-    </small>
+        </p>
+      [% END %]
+
+    </div>
 [% END %]
diff --git a/templates/web/oxfordshire/report/_main.html b/templates/web/oxfordshire/report/_main.html
new file mode 100644
index 000000000..3bb786141
--- /dev/null
+++ b/templates/web/oxfordshire/report/_main.html
@@ -0,0 +1,98 @@
+[% moderating = c.user && c.user.has_permission_to('moderate', problem.bodies_str) %]
+
+[% IF moderating %]
+[%# TODO: extract stylesheet! %]
+<style>
+    .moderate-edit label {
+        display: inline-block;
+        height: 1em;
+        margin-top: 0;
+    }
+
+    .moderate-edit input {
+        display: inline-block;
+    }
+
+    .moderate-edit { display: none }
+    .moderate-edit :disabled {
+        background: #ddd;
+    }
+    br {
+        line-height: 0.5em;
+    }
+</style>
+[% END %]
+
+<div class="problem-header cf" problem-id="[% problem.id %]">
+  [% IF moderating %]
+    [% original = problem.moderation_original_data %]
+    <form method="post" action="/moderate/report/[% problem.id %]">
+        <input type="button" class="btn moderate moderate-display" value="moderate">
+        <div class="moderate-edit">
+            <input type="checkbox" class="hide-document" name="problem_hide">
+            <label for="problem_hide">Hide report completely?</label>
+            <br />
+            <input type="checkbox" name="problem_show_name" [% problem.anonymous ? '' : 'checked' %]>
+            <label for="problem_show_name">Show name publicly?</label>
+            [% IF problem.photo or original.photo %]
+                <br />
+                <input type="checkbox" name="problem_show_photo" [% problem.photo ? 'checked' : '' %]>
+                <label for="problem_show_photo">Show Photo?</label>
+            [% END %]
+        </div>
+  [% END %]
+    <h1 class="moderate-display">[% problem.title | html %]</h1>
+    [% IF moderating %]
+    <div class="moderate-edit">
+        [% IF problem.title != original.title %]
+        <input type="checkbox" name="problem_revert_title" class="revert-title">
+        <label for="problem_revert_title">Revert to original title</label>
+        [% END %]
+    <h1><input type="text" name="problem_title" value="[% problem.title | html %]"></h1>
+    </div>
+    [% END %]
+
+    <p class="report_meta_info">
+        [% problem.meta_line(c) | html %]
+        [%- IF !problem.used_map AND c.cobrand.moniker != 'emptyhomes' %]; <strong>([% loc('there is no pin shown as the user did not use the map') %])</strong>[% END %]
+    </p>
+    [% IF problem.whensent %]
+        <p class="council_sent_info">[% problem.duration_string(c) %]</p>
+    [% END %]
+    [% mlog = problem.latest_moderation_log_entry(); IF mlog %]
+        <p>Moderated by [% mlog.user.from_body.name %] at [% prettify_dt(mlog.whenedited) %]</p>
+    [% END %]
+
+    [% INCLUDE 'report/_support.html' %]
+
+    [% INCLUDE 'report/photo.html' object=problem %]
+    <div class="moderate-display">
+        [% add_links( problem.detail ) | html_para %]
+    </div>
+
+    [% IF moderating %]
+        <div class="moderate-edit">
+        [% IF problem.detail != original.detail %]
+        <input type="checkbox" name="problem_revert_detail" class="revert-textarea">
+        <label for="problem_revert_detail">Revert to original text</label>
+        [% END %]
+        <textarea name="problem_detail">[% add_links( problem.detail ) %]</textarea>
+        </div>
+
+        <div class="moderate-edit">
+            <label for="moderation_reason">Moderation reason:</label>
+            <input type="text" name="moderation_reason" placeholder="Describe why you are moderating this">
+            <input type="submit" class="red-btn" value="Moderate it">
+            <input type="button" class="btn cancel" value="cancel">
+        </div>
+    </form>
+  [% END %]
+
+  [% IF problem.bodies_str %]
+      [% INCLUDE 'report/_council_sent_info.html' %]
+  [% ELSE %]
+      <div class="council_info_box">
+          <p>[% loc('Not reported to council') %]</p>
+      </div>
+  [% END %]
+</div>
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index dae1e02f0..2f297582c 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -50,10 +50,24 @@ dd, p {
   line-height: 1em;
 }
 
-body.frontpage {
-    .issue-list-a, .list-a {
-        li .text {
-            padding-left: 3em;
-        }
-    }
+.council_info_box {
+  border-top: 1px solid #ccc;
+  padding: 1em;
+  margin: 0 -1em -1em -1em; // counteract 1em padding on sidebar without using .full-width which sets an explicit width
+
+  h3 {
+    font-weight: bold;
+    font-size: 1em;
+    margin: 0 0 0.5em 0;
+  }
+
+  p {
+    color: #666;
+    margin: 0 0 0.5em 0;
+    font-size: 0.9em;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
 }
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 93361ad95..195c5342f 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -276,6 +276,35 @@ body.mappage {
     }
 }
 
+h4.static-with-rule {
+  margin-top: 1em; // down from default 2em, avoid extra space between heading and .council_info_box
+  margin-bottom: 0; // no space between this and the .issue-list items
+  background: transparent; // rather than light grey
+  padding: 0.75em 1em * (1/0.875); // compensate for 0.875 font-size
+}
+
+.issue-list li {
+  background: transparent;
+  margin-top: 0; // no space between list items
+
+  // Replicate .report-list styling, a bit
+  border-top: 1px solid $oxfordshire_mid_grey_green;
+  padding: 1em 1em 1em 0;
+  margin-left: 1em;
+
+  .update-wrap .update-text > :last-child {
+    margin-bottom: 0;
+  }
+
+  .meta-2 {
+    font-style: normal;
+  }
+}
+
+.form-box {
+  background-color: darken($oxfordshire_very_light_green, 5%);
+}
+
 .shadow-wrap {
     width: 432px;