[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

2 files changed, 100 insertions, 4 deletions

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));
 }