3 files changed, 47 insertions, 21 deletions
diff --git a/web/cobrands/southampton/css.css b/web/cobrands/southampton/css.css
index 85f66dcc3..fa0e07548 100644
--- a/web/cobrands/southampton/css.css
+++ b/web/cobrands/southampton/css.css
@@ -1,22 +1,17 @@
 #mysociety #map_box {
-  width: 380px;
+  width: 422px;
 }
 #mysociety #map, #mysociety #drag {
-  width: 378px;
-  height: 378px;
-}
-#mysociety #watermark {
-  background: url("/i/mojwatermark-378.png");
-  height: 84px;
-  width: 171px;
-  position: absolute;
-  bottom: 0;
-  right: 0;
+  width: 420px;
+  height: 420px;
 }
 #mysociety p#fixed, #mysociety p#unknown {
-  margin-right: 400px;
+  margin-right: 442px;
   width: auto;
 }
+#mysociety #problem_form {
+  clear: both;
+}
 #mysociety h1 {
   margin: 0;
   font-size: 175%;
diff --git a/web/cobrands/southampton/css.scss b/web/cobrands/southampton/css.scss
index 57cb95a8f..0760c982c 100644
--- a/web/cobrands/southampton/css.scss
+++ b/web/cobrands/southampton/css.scss
@@ -1,4 +1,4 @@
-$map_width: 378px;
+$map_width: 420px;
 $background: #E9EEF7;
 $darker: #768EB5;
 
@@ -13,20 +13,16 @@ $darker: #768EB5;
         width: $map_width;
         height: $map_width;
     }
-    #watermark {
-        background: url("/i/mojwatermark-378.png");
-        height: 84px;
-        width: 171px;
-        position: absolute;
-        bottom: 0;
-        right: 0;
-    }
 
     p#fixed, p#unknown {
         margin-right: $map_width + 22px;
         width: auto;
     }
 
+    #problem_form {
+        clear: both;
+    }
+
     // Generics
 
     h1 {
diff --git a/web/js/southampton.js b/web/js/southampton.js
new file mode 100644
index 000000000..da9552f05
--- /dev/null
+++ b/web/js/southampton.js
@@ -0,0 +1,35 @@
+/*
+ * southampton.js
+ * FixMyStreet JavaScript for Southampton
+ */
+
+
+$(function(){
+
+    $('#form_category').change(function(){
+        var category = $(this).val();
+        if ('Potholes' == category) {
+            if (!$('#potholes_extra').length) {
+                var qns = '<div id="potholes_extra" style="margin:0; display:none;">' +
+                '<div class="form-field"><label for="form_size">Size:</label>' +
+                '<select name="detail_size"><option>-- Please select --<option>Unknown' +
+                '<option>Small: No larger than a dinner plate (up to 30cm/12inches)' +
+                '<option>Medium: No larger than a dustbin lid (up to 60cm/24inches)' +
+                '<option>Large: Larger than a dustbin lid (over 60cm/24inches)' +
+                '</select></div>' +
+                '<div class="form-field"><label for="form_depth">Depth:</label>' +
+                '<select name="detail_depth"><option>-- Please select --<option>Unknown' +
+                '<option>No deeper than a golf ball (up to 4cm/1.5inches)' +
+                '<option>No deeper than a tennis ball (up to 6.5cm/2.5inches)' +
+                '<option>Deeper than a tennis ball' +
+                '</select></div></div>';
+                $('#form_title').closest('div.form-field').after(qns);
+            }
+            $('#potholes_extra').show('fast');
+        } else {
+            $('#potholes_extra').hide('fast');
+        }
+    }).change();
+
+});
+