[Zurich] 2-column layout for printed reports

 - Involves a not-as-bad-as-it-looks refactoring of the HTML markup for
    report_edit.html and report_edit-sdm.html, with some actual indentation
    so you can tell what's going on, and definition lists to give the
    label/content pairs more logical structure.
 - Also replaces .report-edit-action with .print-only and .screen-only
    which are less semantic, but much more obvious to newcomers.
 - Allows SDMs to enlarge images on report edit page
 - Displays category in report edit form on screen as well as in print

See mysociety/FixMyStreet-Commercial#677

2 files changed, 67 insertions, 3 deletions

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7917c4a46..60a70f77e 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1742,9 +1742,15 @@ table.nicetable {
 }
 
 
+@media screen {
+  .print-only {
+    display: none !important;
+  }
+}
+
 @media print {
-  body {
-    padding: 3em;
+  @page {
+    margin: 3em;
   }
 
   #main-nav,
@@ -1754,7 +1760,7 @@ table.nicetable {
   .olControlPanZoom,
   #sub_map_links,
   #fms_pan_zoom,
-  .report-edit-action,
+  .screen-only,
   .olMapViewport {
     display: none !important;
   }
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index bb515bf79..b9c4f1134 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -247,6 +247,12 @@ h4.static-with-rule {
     border-radius: 0;
 }
 
+@media screen {
+    dd.screen-no-space-after {
+      margin-bottom: 0;
+    }
+}
+
 @media print {
     #site-header .container {
         position: relative;
@@ -254,4 +260,56 @@ h4.static-with-rule {
     #site-logo {
         top: 0;
     }
+
+    .mappage.admin {
+      .container {
+        padding: 0;
+      }
+
+      .content {
+        overflow: auto;
+        font-size: 0.8em;
+        background: transparent url(/cobrands/zurich/admin-print-columns.gif) top center repeat-y;
+        min-height: 0 !important; // override hard-coded inline min-height style
+      }
+
+      #map_box {
+        display: none; // I am out of ideas for this element, so let's hide it for now
+      }
+    }
+
+    .admin-report-edit {
+        margin-top: 1em;
+        width: 47%;
+
+        input[type=text],
+        textarea {
+            border: none;
+            padding: 0;
+        }
+
+        dd {
+            padding-left: 1em;
+        }
+
+        h2 {
+            font-family: inherit;
+            font-size: inherit;
+            font-weight: bold;
+        }
+    }
+
+    .admin-report-edit--details {
+        float: left;
+        border-right: 1px solid #ddd;
+        padding-right: 3%;
+    }
+
+    .admin-report-edit--interact {
+        float: right;
+    }
+
+    dd.print-no-space-after {
+        margin-bottom: 0;
+    }
 }