Simpler report meta information display

Removes the italics, and breaks the wording into two
separate paragraphs, at the top of the report page.

5 files changed, 27 insertions, 12 deletions

diff --git a/perllib/FixMyStreet/DB/Result/Problem.pm b/perllib/FixMyStreet/DB/Result/Problem.pm
index bee2e9bce..e55c26cd8 100644
--- a/perllib/FixMyStreet/DB/Result/Problem.pm
+++ b/perllib/FixMyStreet/DB/Result/Problem.pm
@@ -687,14 +687,14 @@ sub processed_summary_string {
     }
     if ($problem->can_display_external_id) {
         if ($duration_clause) {
-            $external_ref_clause = sprintf(_('council ref: %s'), $problem->external_id);
+            $external_ref_clause = '<strong>' . sprintf(_('Council ref:&nbsp;%s'), $problem->external_id) . '.</strong>';
         } else {
-            $external_ref_clause = sprintf(_('%s ref:&nbsp;%s'), $problem->external_body, $problem->external_id);
+            $external_ref_clause = '<strong>' . sprintf(_('%s ref:&nbsp;%s'), $problem->external_body, $problem->external_id) . '.</strong>';
         }
     }
     if ($duration_clause and $external_ref_clause) {
-        return "$duration_clause, $external_ref_clause"
-    } else { 
+        return "$duration_clause. $external_ref_clause"
+    } else {
         return $duration_clause || $external_ref_clause
     }
 }
diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm
index cd846dcd8..bd2ca4096 100644
--- a/perllib/FixMyStreet/TestMech.pm
+++ b/perllib/FixMyStreet/TestMech.pm
@@ -320,6 +320,7 @@ sub extract_problem_meta {
     my $result = scraper {
         process 'div#side p em', 'meta', 'TEXT';
         process '.problem-header p em', 'meta', 'TEXT';
+        process '.problem-header p.report_meta_info', 'meta', 'TEXT';
     }
     ->scrape( $mech->response );
 
diff --git a/templates/web/base/report/_council_sent_info.html b/templates/web/base/report/_council_sent_info.html
index 958562dc2..4496611e0 100644
--- a/templates/web/base/report/_council_sent_info.html
+++ b/templates/web/base/report/_council_sent_info.html
@@ -1,5 +1,5 @@
 [% IF problem.whensent || problem.can_display_external_id %]
-    <small class="council_sent_info"><br>
+    <p class="council_sent_info">
         [% problem.processed_summary_string(c) %]
-    </small>
+    </p>
 [% END %]
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index 00b0188af..a7aafb6d0 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -52,18 +52,19 @@
     </div>
     [% END %]
 
-    <p><em>
-    [% 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 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.bodies_str %]
         [% INCLUDE 'report/_council_sent_info.html' %]
     [% ELSE %]
-        <br><small>[% loc('Not reported to council') %]</small>
+        <p class="council_sent_info">[% loc('Not reported to council') %]</p>
     [% END %]
     [% mlog = problem.latest_moderation_log_entry(); IF mlog %]
-        <br /> Moderated by [% mlog.user.from_body.name %] at [% prettify_dt(mlog.whenedited) %]
+        <p>Moderated by [% mlog.user.from_body.name %] at [% prettify_dt(mlog.whenedited) %]</p>
     [% END %]
-    </em></p>
+
     [% INCLUDE 'report/_support.html' %]
 
     [% INCLUDE 'report/photo.html' object=problem %]
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index a26f67ee8..a9ffe7295 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -976,6 +976,19 @@ a:hover.button-left {
     margin-bottom: 0.5em;
 }
 
+.report_meta_info,
+.council_sent_info {
+  font-size: 0.9em;
+}
+
+.council_sent_info {
+  color: #666;
+
+  p + & {
+    margin-top: -0.6em; // partly counteract margin-bottom on previous paragraph
+  }
+}
+
 // map stuff
 #map_box{
   @extend .full-width;