Merge branch 'master' of ssh://git.mysociety.org/data/git/public/fixmystreet into open311-consumer

Conflicts:
	web/css/core.css
	web/js/fixmystreet.js

5 files changed, 153 insertions, 551 deletions

diff --git a/web/css/_main.scss b/web/css/_main.scss
index b4e4a13f0..d74d70ceb 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -1,5 +1,17 @@
 // Generics
 
+/* Thanks to normalize.css
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 3 */
+    -ms-text-size-adjust: 100%; /* 3 */
+}
+
 body {
     font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
     margin: 0;
@@ -17,6 +29,7 @@ h2 {
 
 select, input, textarea {
     font-size: 99%;
+    max-width: 99%;
 }
 
 #mysociety {
@@ -158,6 +171,20 @@ select, input, textarea {
     right: 10px;
 }
 
+.ie6 #logo {
+    display: none;
+}
+
+.ie6 #logoie {
+    width: 133px;
+    height: 26px;
+    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale');
+    position: absolute;
+    top: 4em;
+    right: 10px;
+    cursor: pointer;
+}
+
 #footer {
     clear: both;
     text-align: center;
@@ -180,3 +207,38 @@ select, input, textarea {
     }
 }
 
+@media all and (max-width: 50em) {
+    #logo {
+        display: none;
+    }
+    #header {
+        font-size: 150%;
+    }
+    #navigation {
+        position: static;
+        border-top: solid 2px $header_colour;
+        border-bottom: solid 2px $header_colour;
+        margin: 1em 0;
+        padding: 0.15em 0.5em;
+        text-align: center;
+        background-color: $header_back;
+        color: $header_colour;
+
+        a:hover, a:active {
+            background-color: $header_colour;
+            color: $header_back;
+            -moz-border-radius: 0.5em;
+            -webkit-border-radius: 0.5em;
+            border-radius: 0.5em;
+        }
+    }
+    #footer {
+        width: auto;
+        padding: 0 1em;
+        border-top: none;
+    }
+    #wrapper {
+        margin: 0em 1em;
+    }
+}
+
diff --git a/web/css/core.css b/web/css/core.css
deleted file mode 100644
index 88181e3e8..000000000
--- a/web/css/core.css
+++ /dev/null
@@ -1,353 +0,0 @@
-#mysociety blockquote {
-  border-left: solid 4px #666666;
-  padding-left: 0.5em; }
-  #mysociety blockquote h2, #mysociety blockquote p {
-    margin: 0; }
-#mysociety dt {
-  font-weight: bold;
-  margin-top: 0.5em; }
-#mysociety .gone {
-  color: #666666;
-  background-color: #cccccc; }
-#mysociety p.dev-site-notice, #mysociety p.error {
-  text-align: center;
-  color: #cc0000;
-  font-size: larger; }
-#mysociety ul {
-  padding: 0 0 0 1.5em;
-  margin: 0; }
-#mysociety ul.error {
-  color: #cc0000;
-  background-color: #ffeeee;
-  padding-right: 4px;
-  text-align: left;
-  font-size: larger; }
-#mysociety div.form-error {
-  color: #cc0000;
-  margin: 5px 1em 5px 1em;
-  padding: 2px 5px 2px 5px;
-  float: left;
-  background-color: #ffeeee;
-  text-align: left; }
-#mysociety div.form-field {
-  clear: both; }
-#mysociety #advert_thin {
-  width: 50%;
-  margin: 1em auto;
-  text-align: center;
-  border-top: dotted 1px #999999; }
-#mysociety #advert_hfymp {
-  border-top: dotted 1px #999999;
-  text-align: center; }
-#mysociety p#expl {
-  text-align: center;
-  font-size: 150%;
-  margin: 0 2em; }
-#mysociety #postcodeForm {
-  display: table;
-  _width: 33em;
-  text-align: center;
-  font-size: 150%;
-  margin: 1em auto;
-  padding: 1em;
-  -moz-border-radius: 1em;
-  -webkit-border-radius: 1em;
-  border-radius: 1em; }
-  #mysociety #postcodeForm label {
-    float: none;
-    padding-right: 0; }
-  #mysociety #postcodeForm #submit {
-    font-size: 83%; }
-#mysociety #front_intro {
-  float: left;
-  width: 48%; }
-  #mysociety #front_intro p {
-    clear: both;
-    margin-top: 0; }
-#mysociety #front_stats div {
-  text-align: center;
-  width: 5.5em;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
-  border-radius: 0.5em;
-  float: left;
-  margin: 0 1em 1em; }
-  #mysociety #front_stats div big {
-    font-size: 150%;
-    display: block; }
-#mysociety #front_recent {
-  float: right;
-  width: 48%;
-  margin-bottom: 1em; }
-#mysociety #front_recent img, #mysociety #alert_recent img {
-  margin-right: 0.25em;
-  margin-bottom: 0.25em; }
-#mysociety #front_recent > h2:first-child, #mysociety #front_intro > h2:first-child {
-  margin-top: 0; }
-#mysociety form {
-  margin: 0; }
-#mysociety label {
-  float: left;
-  text-align: right;
-  padding-right: 0.5em;
-  width: 5em; }
-#mysociety fieldset, #mysociety #fieldset {
-  border: none;
-  padding: 0.5em; }
-  #mysociety fieldset div, #mysociety #fieldset div {
-    margin-top: 2px;
-    clear: left; }
-#mysociety legend {
-  display: none; }
-#mysociety #fieldset div.checkbox, #mysociety #problem_submit {
-  padding-left: 5.5em; }
-#mysociety #fieldset div.checkbox label, #mysociety label.n {
-  float: none;
-  text-align: left;
-  padding-right: 0;
-  width: auto;
-  cursor: pointer;
-  cursor: hand; }
-#mysociety #questionnaire label, #mysociety #alerts label {
-  float: none; }
-#mysociety .confirmed {
-  background-color: #ccffcc;
-  border: solid 2px #009900;
-  padding: 5px;
-  text-align: center; }
-#mysociety #form_sign_in_yes {
-  float: left;
-  width: 47%;
-  padding-right: 1%;
-  border-right: solid 1px #999999;
-  margin-bottom: 1em; }
-#mysociety #form_sign_in_no, #mysociety #fieldset #form_sign_in_no {
-  float: right;
-  width: 47%;
-  padding-left: 1%;
-  clear: none;
-  margin-bottom: 1em; }
-#mysociety #category_meta {
-  margin-bottom: 30px; }
-#mysociety #category_meta label {
-  width: 10em; }
-#mysociety #map_box {
-  float: right;
-  width: 502px;
-  position: relative;
-  padding-left: 20px;
-  background-color: #ffffff; }
-#mysociety p#copyright {
-  float: right;
-  text-align: right;
-  margin: 0 0 1em 0;
-  font-size: 78%; }
-#mysociety #map {
-  border: solid 1px #000000;
-  width: 500px;
-  height: 500px;
-  overflow: hidden;
-  position: relative;
-  background-color: #f1f1f1; }
-#mysociety #drag {
-  position: absolute;
-  width: 500px;
-  height: 500px;
-  right: 0;
-  top: 0; }
-  #mysociety #drag input, #mysociety #drag img {
-    position: absolute;
-    border: none; }
-  #mysociety #drag input {
-    cursor: crosshair;
-    background-color: #cccccc; }
-  #mysociety #drag img {
-    cursor: move; }
-  #mysociety #drag img.pin {
-    z-index: 100;
-    background-color: inherit; }
-  #mysociety #drag a img.pin {
-    cursor: pointer;
-    cursor: hand; }
-#mysociety form#mapForm #map {
-  cursor: pointer; }
-#mysociety form#mapForm .olTileImage {
-  cursor: crosshair;
-}
-#mysociety #text_map {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  padding-left: 0.5em;
-  text-align: left;
-  margin-top: 0;
-  font-size: 110%;
-  background-color: #eeeeee;
-  -moz-border-radius-topleft: 1em;
-  -moz-border-radius-bottomleft: 1em;
-  -webkit-border-top-left-radius: 1em;
-  -webkit-border-bottom-left-radius: 1em;
-  border-top-left-radius: 1em;
-  border-bottom-left-radius: 1em;
-}
-#mysociety #text_map_arrow {
-  display: block;
-  position: absolute;
-  top: 0;
-  right: -28px;
-  width: 0;
-  height: 0;
-  line-height: 0;
-  font-size: 0;
-  border-style: solid;
-  border-width: 26px 14px 26px 14px;
-  border-color: #fff #fff #fff #eee;
-}
-#mysociety #text_no_map {
-  margin-top: 0; }
-#mysociety #sub_map_links {
-  float: right;
-  clear: right;
-  margin-top: 0; }
-#mysociety #fixed {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ccffcc;
-  border: solid 2px #009900; }
-#mysociety #unknown {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ffcccc;
-  border: solid 2px #990000;
-}
-#mysociety #closed {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ccccff;
-  border: solid 2px #000099;
-}
-#mysociety #progress {
-  margin: 0 530px 1em 0;
-  padding: 5px;
-  text-align: center;
-  position: relative;
-  background-color: #ffffcc;
-  border: solid 2px #999900;
-}
-#mysociety #updates div {
-  padding: 0 0 0.5em;
-  margin: 0 0 0.25em;
-  border-bottom: dotted 1px #5e552b; }
-  #mysociety #updates div .problem-update, #mysociety #updates div .update-text {
-    padding: 0;
-    margin: 0;
-    border-bottom: 0; }
-#mysociety #updates p {
-  margin: 0; }
-#mysociety #nearby_lists h2 {
-  margin-top: 1em;
-  margin-bottom: 0;
-}
-#mysociety #nearby_lists li small {
-  color: #666666; }
-#mysociety #alert_links {
-  float: right; }
-#mysociety #alert_links_area {
-  padding-left: 0.5em;
-  margin: 0;
-  color: #666;
-  font-size: smaller;
-}
-#mysociety #rss_alert {
-  text-decoration: none; }
-  #mysociety #rss_alert span {
-    text-decoration: underline; }
-#mysociety #email_alert_box {
-  display: none;
-  position: absolute;
-  padding: 3px;
-  font-size: 83%;
-  border: solid 1px #7399C3;
-  background-color: #eeeeff;
-  color: #000000; }
-#mysociety #email_alert_box p {
-  margin: 0; }
-#mysociety .council_sent_info {
-  font-size: smaller; }
-#mysociety #rss_items {
-  width: 62%;
-  float: left; }
-#mysociety #rss_rhs {
-  border-left: 1px dashed #999;
-  width: 36%;
-  float: right;
-  padding: 0 0 0 0.5em;
-  margin: 0 0 1em 0.5em; }
-#mysociety #rss_box {
-  padding: 10px;
-  border: 1px solid #999999; }
-#mysociety #rss_feed {
-  list-style-type: none;
-  margin-bottom: 2em; }
-#mysociety #rss_feed li {
-  margin-bottom: 1em; }
-#mysociety #alert_or {
-  font-style: italic;
-  font-size: 125%;
-  margin: 0; }
-#mysociety #rss_list {
-  float: left;
-  width: 47%; }
-#mysociety #rss_list ul {
-  list-style-type: none; }
-#mysociety #rss_buttons {
-  float: right;
-  width: 35%;
-  text-align: center;
-  margin-bottom: 2em; }
-#mysociety #rss_local {
-  margin-left: 1.5em;
-  margin-bottom: 0; }
-#mysociety #rss_local_alt {
-  margin: 0 0 2em 4em; }
-#mysociety #alert_photos {
-  text-align: center;
-  float: right;
-  width: 150px;
-  margin-left: 0.5em; }
-#mysociety #alert_photos h2 {
-  font-size: 100%; }
-#mysociety #alert_photos img {
-  margin-bottom: 0.25em; }
-#mysociety #col_problems, #mysociety #col_fixed {
-  float: left;
-  width: 48%;
-  margin-right: 1em; }
-#mysociety .contact-details {
-  font-size: 80%;
-  margin-top: 2em; }
-
-.olControlAttribution {
-  bottom: 3px !important;
-  left: 3px; }
-
-.olControlPermalink {
-  bottom: 3px !important;
-  right: 3px;
-}
-
-@media print {
-  #mysociety #map_box {
-    float: none;
-    margin: 0 auto; }
-  #mysociety #mysociety {
-    max-width: none; }
-  #mysociety #side {
-    margin-right: 0; } }
diff --git a/web/css/core.scss b/web/css/core.scss
index b962b38ae..f8a00a1f4 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -79,12 +79,11 @@ $map_width: 500px;
     p#expl {
         text-align: center;
         font-size: 150%;
-        margin: 0 2em;
+        margin: 0;
     }
 
     #postcodeForm {
-        display: table;
-        _width: 33em;
+        display: table; /* IE6 has fixed width set below */
         text-align: center;
         font-size: 150%;
         margin: 1em auto;
@@ -103,6 +102,12 @@ $map_width: 500px;
         }
     }
 
+    #geolocate_para {
+        font-size: 70%;
+        margin: 2px 0 0 0;
+        text-align: right;
+    }
+
     #front_intro {
         float: left;
         width: 48%;
@@ -113,14 +118,19 @@ $map_width: 500px;
         }
     }
 
+    #front_stats {
+        margin: 0 auto;
+        display: table; /* IE6 is set to floats below */
+        border-spacing: 2em 1em;
+    }
+
     #front_stats div {
         text-align: center;
         width: 5.5em;
         -moz-border-radius: 0.5em;
         -webkit-border-radius: 0.5em;
         border-radius: 0.5em;
-        float: left;
-        margin: 0 1em 1em;
+        display: table-cell;
 
         big {
             font-size: 150%;
@@ -141,6 +151,10 @@ $map_width: 500px;
         margin-top: 0;
     }
 
+    #front_photos {
+        text-align: center;
+    }
+
     // Forms
 
     form {
@@ -232,7 +246,7 @@ $map_width: 500px;
     }
 
     #map {
-        border: solid 1px #000000;
+        border: solid 1px #666666;
         width: $map_width; // Twice a tile width
         height: $map_width;
         overflow: hidden;
@@ -240,6 +254,7 @@ $map_width: 500px;
         background-color: #f1f1f1;
     }
 
+    /* Drag is only present in noscript form */
     #drag {
         position: absolute;
         width: $map_width;
@@ -542,6 +557,18 @@ $map_width: 500px;
     right: 3px;
 }
 
+.ie6 {
+    #mysociety {
+        #front_stats div {
+            float: left;
+            margin: 0 1em 1em;
+        }
+        #postcodeForm {
+            width: 33em;
+        }
+    }
+}
+
 // Printing, SCSS doesn't handle @media nesting
 
 @media print {
@@ -552,3 +579,61 @@ $map_width: 500px;
     }
 }
 
+@media all and (max-width: 50em) {
+    #mysociety {
+        p#expl {
+            font-size: 110%;
+        }
+
+        #postcodeForm {
+            font-size: 100%;
+            span {
+                display: block;
+                font-size: 150%;
+            }
+            #submit {
+                font-size: 100%;
+            }
+        }
+
+        #geolocate_para {
+            font-size: 100%;
+        }
+
+        #front_intro {
+            float: none;
+            width: auto;
+        }
+        #front_recent {
+            margin-top: 1em;
+            float: none;
+            width: auto;
+            clear: both;
+        }
+        #front_photos {
+            white-space: nowrap;
+            overflow: hidden;
+        }
+        #front_stats {
+            border-spacing: 0.5em 1em;
+        }
+
+        #form_sign_in_yes {
+            float: none;
+            width: auto;
+            padding-right: 0;
+            border-right: none;
+            margin-bottom: 1em;
+        }
+
+        #form_sign_in_no, #fieldset #form_sign_in_no {
+            float: none;
+            width: auto;
+            padding-left: 0;
+            clear: none;
+            margin-bottom: 1em;
+        }
+
+    }
+}
+
diff --git a/web/css/ie6.css b/web/css/ie6.css
deleted file mode 100644
index fd3e26047..000000000
--- a/web/css/ie6.css
+++ /dev/null
@@ -1,17 +0,0 @@
-#logo {
-    display: none;
-}
-
-#logoie {
-    width: 133px;
-    height: 26px;
-    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale');
-    position: absolute;
-    top: 4em;
-    right: 10px;
-    cursor: pointer;
-}
-
-#emptyhomes-footer {
-    zoom: 1;
-}
diff --git a/web/css/main.css b/web/css/main.css
deleted file mode 100644
index a3fe3b400..000000000
--- a/web/css/main.css
+++ /dev/null
@@ -1,175 +0,0 @@
-a:link {
-  color: #0000ff;
-}
-a:visited {
-  color: #000099;
-}
-a:hover, a:active {
-  color: #ff0000;
-}
-
-body {
-  font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-h1 {
-  margin: 0;
-  font-size: 175%;
-}
-
-h2 {
-  font-size: 140%;
-}
-
-select, input, textarea {
-  font-size: 99%;
-}
-
-#mysociety a.unsuitable-report {
-  font-size: small;
-}
-#mysociety blockquote {
-  border-left: solid 4px #5e552b;
-}
-#mysociety .a {
-  color: #000000;
-  background-color: #f3e5a5;
-}
-#mysociety #postcodeForm {
-  background-color: #e3d595;
-}
-#mysociety #front_stats div {
-  background-color: #e3d595;
-}
-#mysociety p.promo {
-  border-top: 1px solid #bbb;
-  border-bottom: 1px solid #bbb;
-  background-color: #eee;
-  text-align: center;
-  padding: 0 0.5em;
-}
-
-#header {
-  font-size: 200%;
-  font-weight: bold;
-  border-bottom: solid 2px #5e552b;
-  margin: 0;
-  padding: 0.15em 0.5em;
-  background-color: #e3d595;
-  color: #5e552b;
-}
-#header a:link, #header a:visited {
-  color: #5e552b;
-  background-color: #e3d595;
-  text-decoration: none;
-}
-#header a:active, #header a:hover {
-  text-decoration: underline;
-}
-
-#my {
-  color: #4e451b;
-  background-color: #e3d595;
-}
-
-#mysociety {
-  width: 100%;
-  /* Must specify a width or IE goes crazy wrong! */
-  position: relative;
-  margin: 0 auto;
-  max-width: 60em;
-  overflow: auto;
-}
-
-/* Can't put the margin in #mysociety because of above IE craziness */
-#wrapper {
-  margin: 1em 2em;
-}
-
-#meta {
-  list-style-type: none;
-  margin: 0.25em 0 0 1em;
-  padding: 0;
-  font-size: 0.875em;
-}
-#meta li {
-  display: inline;
-  margin: 0;
-  padding: 0 0 0 0.25em;
-  border-left: solid 1px #5e552b;
-}
-#meta li:first-child {
-  border-left: none;
-}
-
-.v {
-  display: none;
-}
-
-#navigation {
-  position: absolute;
-  top: 1em;
-  right: 1em;
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-#navigation li {
-  display: inline;
-  padding: 0;
-  margin: 0;
-}
-#navigation a {
-  display: -moz-inline-box;
-  display: inline-block;
-  padding: 0.4em 1em;
-}
-#navigation a:link, #navigation a:visited {
-  color: #5e552b;
-}
-#navigation a:hover, #navigation a:active {
-  background-color: #5e552b;
-  color: #e3d595;
-  -moz-border-radius-topleft: 0.5em;
-  -webkit-border-top-left-radius: 0.5em;
-  border-radius-top-left: 0.5em;
-  -moz-border-radius-topright: 0.5em;
-  -webkit-border-top-right-radius: 0.5em;
-  border-radius-top-right: 0.5em;
-}
-
-#nav_new a {
-  background-image: url("/i/new.png");
-  background-repeat: no-repeat;
-  background-position: 100% 0;
-}
-
-#logo {
-  border: none;
-  position: absolute;
-  top: 3.3em;
-  right: 10px;
-}
-
-#footer {
-  clear: both;
-  text-align: center;
-  border-top: solid 2px #ccc;
-  width: 50%;
-  margin: 1em auto 0;
-  padding: 0;
-  color: #333333;
-}
-#footer .l, #footer .r {
-  margin-top: 0;
-  text-align: left;
-  width: 45%;
-}
-#footer .l {
-  float: left;
-}
-#footer .r {
-  float: right;
-}