Styling for .extra-category-questions container

3 files changed, 59 insertions, 24 deletions

diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html
index 47d6b84e6..e6ad1a26e 100644
--- a/templates/web/base/report/new/category_extras.html
+++ b/templates/web/base/report/new/category_extras.html
@@ -1,30 +1,33 @@
 <div id="category_meta">
     [%- category = report.category -%]
 
-    [%- IF unresponsive.$category %]
-      [% INCLUDE "report/new/unresponsive_body.html" body_id = unresponsive.$category %]
-    [%- END %]
+  [%- IF unresponsive.$category %]
+    [%# Note: this is only shown on FMS.com %]
+    [% INCLUDE "report/new/unresponsive_body.html" body_id = unresponsive.$category %]
+  [%- END %]
 
-    [%- IF category_extras.$category.size %]
+  [%- IF category_extras.$category.size %]
+    <div class="extra-category-questions full-width">
     <h4>[% loc('Additional Information') %]</h4>
-        [%- FOR meta IN category_extras.$category %]
+      [%- FOR meta IN category_extras.$category %]
         [%- meta_name = meta.code -%]
 
-            <label for="form_[% meta_name %]">[% meta.description %]</label>
-            [% IF field_errors.$meta_name %]
-                <p class='form-error'>[% field_errors.$meta_name %]</p>
-            [% END -%]
-            [% IF meta.variable != 'false' %]
-                [% IF meta.exists('values') %]
-                    <select class="form-control" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
-                        [% FOR option IN meta.values %]
-                            <option value="[% option.key %]"[% IF option.key == report_meta.$meta_name.value %] selected[% END %]>[% option.name %]</option>
-                        [% END %]
-                    </select>
-                [% ELSE %]
-                    <input class="form-control" type="text" value="[% report_meta.$meta_name.value | html %]" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
-                [% END %]
-            [% END %]
-        [%- END %]
-    [%- END %]
+        <label for="form_[% meta_name %]">[% meta.description %]</label>
+        [% IF field_errors.$meta_name %]
+        <p class='form-error'>[% field_errors.$meta_name %]</p>
+        [% END -%]
+        [% IF meta.variable != 'false' %]
+          [% IF meta.exists('values') %]
+            <select class="form-control" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
+              [% FOR option IN meta.values %]
+                <option value="[% option.key %]"[% IF option.key == report_meta.$meta_name.value %] selected[% END %]>[% option.name %]</option>
+              [% END %]
+            </select>
+          [% ELSE %]
+            <input class="form-control" type="text" value="[% report_meta.$meta_name.value | html %]" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
+          [% END %]
+        [% END %]
+      [%- END %]
+    </div>
+  [%- END %]
 </div>
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 7417b7081..c44e91586 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -171,7 +171,6 @@ body.mappage {
 
   .full-width {
     width: auto;
-    margin: 0 -1em;
   }
 
   input[type="file"] {
@@ -267,7 +266,15 @@ h4.static-with-rule {
 }
 
 .form-box {
-  background-color: darken($oxfordshire_very_light_green, 5%);
+  background-color: #e3f1d5; // darker version of $oxfordshire_very_light_green
+}
+
+.extra-category-questions {
+  background-color: #e3f1d5; // darker version of $oxfordshire_very_light_green
+
+  &:before {
+    border-bottom-color: #e3f1d5; // darker version of $oxfordshire_very_light_green
+  }
 }
 
 .shadow-wrap {
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index b0a9ac2ab..20aeed2b6 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -1401,6 +1401,31 @@ label .muted {
   margin-top: 0;
 }
 
+.extra-category-questions {
+  background-color: #eee;
+  padding: 1em;
+  margin-top: 1.5em; // make room for the triangle
+  position: relative;
+
+  // An upwards pointing triangle
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 1em 1em 1em;
+    border-color: transparent transparent #eee transparent;
+    position: absolute;
+    top: -0.9em; // avoid hairline gap between triangle and parent
+    #{$left}: 1.5em;
+  }
+
+  & > :first-child {
+    margin-top: 0;
+  }
+}
+
 
 table.nicetable {
   width:100%;