Improve print layout for report list pages.

The main map page elements are given `position:static` to ensure they
flow onto as many pages as required. The map image is floated to the
right, rather than wasting space at the top of the file.

We also, if the user has the inspect permission, include hidden
rrint-only metadata in the report lists.

5 files changed, 156 insertions, 4 deletions

diff --git a/templates/web/base/admin/report_blocks.html b/templates/web/base/admin/report_blocks.html
index 3561d865d..1dd4c9dd0 100644
--- a/templates/web/base/admin/report_blocks.html
+++ b/templates/web/base/admin/report_blocks.html
@@ -1,5 +1,7 @@
 [%
 
+SET report_blocks_included = 1;
+
 SET state_pretty = {
     'confirmed' = loc('Open')
     'investigating' = loc('Investigating')
diff --git a/templates/web/base/report/_item.html b/templates/web/base/report/_item.html
index 0f42b00ce..939dc5da6 100644
--- a/templates/web/base/report/_item.html
+++ b/templates/web/base/report/_item.html
@@ -1,9 +1,16 @@
+[% IF NOT report_blocks_included ~%]
+[% PROCESS 'admin/report_blocks.html' ~%]
+[% END ~%]
+
 <li class="item-list__item item-list--reports__item [% item_extra_class %]" data-report-id="[% problem.id | html %]">
 <a href="[% c.cobrand.base_url_for_report( problem ) %][% problem.url %]">
     [% IF problem.photo %]
         <img class="img" height="60" width="90" src="[% problem.photos.first.url_fp %]" alt="">
     [% END %]
         <h3 class="item-list__heading">[% problem.title | html %]</h3>
+    [% IF c.user.has_permission_to('report_inspect', problem.bodies_str_ids) %]
+        <div class="item-list__description">[% problem.detail | html %]</div>
+    [% END %]
         <small>
             [%- IF c.cobrand.moniker != 'fixamingata' %] [%# Default: %]
                 [%- prettify_dt( problem.confirmed, 1 ) %]
@@ -27,5 +34,54 @@
                 [% loc('(closed)') %]
             [% END %]
         </small>
+
+    [% IF c.user.has_permission_to('report_inspect', problem.bodies_str_ids) %]
+        <div class="item-list__item__metadata">
+            <div>
+                <h4>[% loc('Report ID:') %]</h4>
+                <p>[% problem.id %]</p>
+            </div>
+          [% IF problem.local_coords %]
+            <div>
+                <h4>[% loc('Easting/Northing:') %]</h4>
+                <p>[% problem.local_coords.0 %], [% problem.local_coords.1 %]</p>
+            </div>
+          [% END %]
+            <div>
+                <h4>[% loc('Latitude/Longitude:') %]</h4>
+                <p>[% problem.latitude %], [% problem.longitude %]</p>
+            </div>
+            <div>
+                <h4>[% loc('Category') %]</h4>
+                <p>[% (problem.category OR '-') | html %]</p>
+            </div>
+            <div>
+                <h4>[% loc('State') %]</h4>
+                <p>[% state_pretty.${problem.state} %]</p>
+            </div>
+            <div>
+                <h4>[% loc('Priority') %]</h4>
+                <p>[% problem.response_priority.name OR '-' %]</p>
+            </div>
+            <div>
+                <h4>[% loc('Traffic management required?') %]</h4>
+                <p>[% problem.get_extra_metadata('traffic_information') %]</p>
+            </div>
+            <div>
+                <h4>[% loc('Extra details') %]</h4>
+                <p>[% problem.get_extra_metadata('detailed_information') | html %]</p>
+            </div>
+          [% SET fields = problem.get_extra_fields; IF fields.size %]
+          [% FOR f IN fields %]
+            <div>
+                <h4>[% f.name %]</h4>
+                <p>[% f.value %]</p>
+            </div>
+          [% END %]
+          [% END %]
+        </div>
+    [% END %]
+
+
 </a>
 </li>
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 955c341bf..72ddbd437 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -87,3 +87,14 @@ dd, p {
         #fff
     );
 }
+
+@media print {
+    body {
+        background-color: #fff !important;
+    }
+
+    .mappage #oxford-header,
+    .mappage #side > .extra-text {
+        display: none !important;
+    }
+}
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7fb0c797f..93e3cf201 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -925,6 +925,14 @@ input.final-submit {
   margin: 0.25em 0 0;
   padding: 0.5em 1em;
   display: block;
+
+  @media print {
+    background-color: transparent !important;
+    margin: 0 !important;
+    padding: 1em 0 !important;
+    border-top: 1px solid #ccc;
+    page-break-inside: avoid;
+  }
 }
 
 .item-list__update-wrap {
@@ -954,28 +962,75 @@ input.final-submit {
 
 .item-list--reports__item {
   @extend %item-list__item--link;
+
   a {
     @include clearfix;
     padding: flip(0 0 0 1em, 0 1em 0 0);
+
+    @media print {
+      padding: 0;
+    }
   }
+
   .img {
     width: 90px;
     float: $right;
     height: auto;
     margin-#{$left}: 1em;
   }
+
   small {
     color: #666;
     display: block;
     padding: 0.25em 0;
   }
 }
+
+.item-list__item__metadata {
+  display: none;
+
+  @media print {
+    display: block;
+    @include flex-container();
+    @include flex-wrap(wrap);
+  }
+
+  & > * {
+    margin-top: 0.5em;
+    width: 33%;
+    @include flex(0 0 auto);
+  }
+
+  h4 {
+    margin: 0;
+    font-size: 0.75em;
+    font-weight: bold;
+  }
+
+  p {
+    margin-bottom: 0;
+    min-height: 1.4em;
+  }
+}
+
 .item-list__heading {
   font-size: 1em;
   font-weight: normal;
   line-height: 1.5;
   padding-top: 0.25em;
   margin: 0;
+
+  @media print {
+    font-weight: bold;
+  }
+}
+
+.item-list__description {
+  display: none;
+
+  @media print {
+    display: block;
+  }
 }
 
 .item-list__item--empty p {
@@ -1987,15 +2042,36 @@ table.nicetable {
   #sub_map_links,
   #fms_pan_zoom,
   .screen-only,
-  .olMapViewport {
+  .olMapViewport,
+  .big-green-banner,
+  .click-the-map,
+  #skip-this-step,
+  .my-account-buttons {
     display: none !important;
   }
 
-  #map_box {
+  #site-header {
+    display: block !important;
+    position: static !important;
+  }
+
+  #map_box,
+  #map_sidebar {
     position: static !important;
-    height: 256px !important;
     width: auto !important;
-    background: #f1eee9 !important; // cream colour to match OSM image
+    background: transparent !important;
+  }
+
+  #map_box {
+    float: right !important;
+    width: 256px !important;
+    height: 256px !important;
+    margin: 0 0 1em 1em !important;
+  }
+
+  #map_sidebar {
+      // Prevent sidebar from clearing below floated map
+      overflow: visible !important;
   }
 
   #map {
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 6d4f523ce..2b05b3c21 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -158,6 +158,13 @@ $right: right;
   flex: $values;
 }
 
+@mixin flex-wrap($wrap) {
+  -webkit-box-wrap: $wrap;
+  -webkit-flex-wrap: $wrap;
+  -ms-flex-wrap: $wrap;
+  flex-wrap: $wrap;
+}
+
 @mixin flex-align($alignment) {
   -webkit-box-align: $alignment;
   -webkit-align-items: $alignment;