Tidy up a bit of CSS.

12 files changed, 31 insertions, 44 deletions

diff --git a/t/app/controller/about.t b/t/app/controller/about.t
index a5fb215d3..ea7b1af20 100644
--- a/t/app/controller/about.t
+++ b/t/app/controller/about.t
@@ -9,7 +9,7 @@ ok( my $mech = Test::WWW::Mechanize::Catalyst->new, 'Created mech object' );
 # check that we can get the page
 $mech->get_ok('/about');
 $mech->content_like(qr{About us ::\s+FixMyStreet});
-$mech->content_contains('html lang="en-gb"');
+$mech->content_contains('html class="no-js" lang="en-gb"');
 
 SKIP: {
     skip( "Need 'emptyhomes' in ALLOWED_COBRANDS config", 8 )
diff --git a/t/app/controller/alert.t b/t/app/controller/alert.t
index b8e38ec92..e1ebbecb6 100644
--- a/t/app/controller/alert.t
+++ b/t/app/controller/alert.t
@@ -12,18 +12,18 @@ ok( my $mech = Test::WWW::Mechanize::Catalyst->new, 'Created mech object' );
 $mech->get_ok('/alert');
 $mech->title_like(qr/^Local RSS feeds and email alerts/);
 $mech->content_contains('Local RSS feeds and email alerts');
-$mech->content_contains('html lang="en-gb"');
+$mech->content_contains('html class="no-js" lang="en-gb"');
 
 # check that we can get list page
 $mech->get_ok('/alert/list');
 $mech->title_like(qr/^Local RSS feeds and email alerts/);
 $mech->content_contains('Local RSS feeds and email alerts');
-$mech->content_contains('html lang="en-gb"');
+$mech->content_contains('html class="no-js" lang="en-gb"');
 
 $mech->get_ok('/alert/list?pc=EH99 1SP');
 $mech->title_like(qr/^Local RSS feeds and email alerts/);
 $mech->content_contains('Here are the types of local problem alerts for ‘EH99 1SP’');
-$mech->content_contains('html lang="en-gb"');
+$mech->content_contains('html class="no-js" lang="en-gb"');
 $mech->content_contains('Problems within 8.5km');
 $mech->content_contains('rss/pc/EH991SP/2');
 $mech->content_contains('rss/pc/EH991SP/5');
diff --git a/templates/web/default/around/display_location.html b/templates/web/default/around/display_location.html
index 242253ab8..8d8e1dc3c 100755
--- a/templates/web/default/around/display_location.html
+++ b/templates/web/default/around/display_location.html
@@ -66,7 +66,7 @@
 </div>
 <div id="side">
 
-<p id="text_map">
+<p id="text_map" class="banner">
     [% loc( 'To <strong>report a problem</strong>, simply click on the map at the correct location.' ) %]
     [%
         tprintf(
diff --git a/templates/web/default/auth/change_password.html b/templates/web/default/auth/change_password.html
index be7c14e43..c10560c3e 100644
--- a/templates/web/default/auth/change_password.html
+++ b/templates/web/default/auth/change_password.html
@@ -7,10 +7,8 @@
 [% END %]
 
 
-<form action="[% c.uri_for('change_password') %]" method="post" name="change_password">
+<form action="[% c.uri_for('change_password') %]" method="post" name="change_password" class="fieldset">
     
-    <div id="fieldset">
-
     [% IF password_error;
 
         errors = {
@@ -35,8 +33,6 @@
         <input type="submit" value="[% loc('Change Password') %]">
     </div>
 
-    </div>
-    
 </form>
 
 
diff --git a/templates/web/default/auth/general.html b/templates/web/default/auth/general.html
index 234aadf52..6c9d4497a 100644
--- a/templates/web/default/auth/general.html
+++ b/templates/web/default/auth/general.html
@@ -54,7 +54,7 @@
 
         <p>[% loc('<strong>No</strong>, I do not, let me sign in by email:') %]</p>
 
-        <div id="fieldset">
+        <div class="fieldset">
             <div class="form-field">
                 <label for="name">[% loc('Your name:') %]</label>
                 <input type="text" name="name" value="">
diff --git a/templates/web/default/faq/faq-en-gb.html b/templates/web/default/faq/faq-en-gb.html
index bd9ee889f..599d3a37e 100755
--- a/templates/web/default/faq/faq-en-gb.html
+++ b/templates/web/default/faq/faq-en-gb.html
@@ -108,12 +108,6 @@ by a user of the site.</dd>
     Ordnance Survey and so this is what we use to display distances.
     There you have it: not everything British is in miles!</dd>
 
-        <dt>Why doesn&rsquo;t dragging the map work on reporting-a-problem pages in Safari or Konqueror?</dt>
-        <dd>There&rsquo;s a bug in these two browsers to do with setting images on form
-submit buttons, which the map uses when reporting a problem. It&rsquo;s fixed in the
-latest nightly build of Safari, so will presumably be fixed in the next
-release. Until then, I&rsquo;ve sadly had to disable dragging to avoid people
-dragging an empty square.</dd>
     <dt>Why can&rsquo;t I zoom out more on the reporting map?</dt>
     <dd>We want to keep FixMyStreet locally focused, so restrict the ability to
     move radically between areas. The map on Your Reports will let you see all
diff --git a/templates/web/default/header.html b/templates/web/default/header.html
index 7d9a7fbd9..f9df75f8f 100644
--- a/templates/web/default/header.html
+++ b/templates/web/default/header.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<!--[if lt IE 7]><html class="ie6 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if IE 7]>   <html class="ie7 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if IE 8]>   <html class="ie8 oldie" lang="[% lang_code %]"><![endif]-->
-<!--[if gt IE 8]><!--><html lang="[% lang_code %]"><!--<![endif]-->
+<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="[% lang_code %]"><![endif]-->
+<!--[if IE 7]>   <html class="no-js ie7 oldie" lang="[% lang_code %]"><![endif]-->
+<!--[if IE 8]>   <html class="no-js ie8 oldie" lang="[% lang_code %]"><![endif]-->
+<!--[if gt IE 8]><!--><html class="no-js" lang="[% lang_code %]"><!--<![endif]-->
     <head>
 
         <meta name="viewport" content="initial-scale=1.0; target-densitydpi=device-dpi">
diff --git a/templates/web/default/report/display.html b/templates/web/default/report/display.html
index fe26ec60d..ae0404df8 100644
--- a/templates/web/default/report/display.html
+++ b/templates/web/default/report/display.html
@@ -21,7 +21,7 @@
 <div id="side">
 
 [% IF banner %]
-<p id="[% banner.id %]">
+<p class="banner" id="[% banner.id %]">
     [% banner.text %]
 </p>
 [% END %]
@@ -72,7 +72,7 @@
 
     [% INCLUDE 'errors.html' %]
 
-    <form method="post" action="[% c.uri_for( '/report/update' ) %]" name="updateForm" id="fieldset"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %]>
+    <form method="post" action="[% c.uri_for( '/report/update' ) %]" name="updateForm" class="fieldset"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %]>
 
         <input type="hidden" name="submit_update" value="1">
         <input type="hidden" name="id" value="[% problem.id | html %]">
@@ -172,7 +172,7 @@
 
         <p>[% loc('<strong>No</strong>, let me confirm my update by email:') %]</p>
 
-        <div id="fieldset">
+        <div class="fieldset">
 
             [% INCLUDE name %]
 
diff --git a/templates/web/default/report/new/fill_in_details_form.html b/templates/web/default/report/new/fill_in_details_form.html
index eea020e3f..395007782 100644
--- a/templates/web/default/report/new/fill_in_details_form.html
+++ b/templates/web/default/report/new/fill_in_details_form.html
@@ -34,7 +34,7 @@
 
 [% INCLUDE 'report/new/form_heading.html' %]
 
-<div id="fieldset">
+<div class="fieldset">
 
 
 
@@ -153,7 +153,7 @@
 
         <p>[% loc('<strong>No</strong>, let me confirm my report by email:') %]</p>
 
-        <div id="fieldset">
+        <div class="fieldset">
 
             [% INCLUDE name_phone %]
 
diff --git a/web/cobrands/fiksgatami/css.scss b/web/cobrands/fiksgatami/css.scss
index aa09b024a..f0a9bc91c 100644
--- a/web/cobrands/fiksgatami/css.scss
+++ b/web/cobrands/fiksgatami/css.scss
@@ -15,7 +15,7 @@ $header_darker: #0a3f6f;
         width: 6em;
     }
 
-    #fieldset div.checkbox, #problem_submit {
+    .fieldset div.checkbox, #problem_submit {
         padding-left: 6.5em;
     }
 
diff --git a/web/css/core.scss b/web/css/core.scss
index 71e290d5c..6186f8965 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -1,12 +1,5 @@
 $map_width: 500px;
 
-@mixin problem-banner {
-    margin: 0 $map_width + 30px 1em 0;
-    padding: 5px;
-    text-align: center;
-    position: relative;
-}
-
 // Generics
 
 #mysociety {
@@ -168,7 +161,7 @@ $map_width: 500px;
         width: 5em;
     }
 
-    fieldset, #fieldset {
+    fieldset, .fieldset {
         border: none;
         padding: 0.5em;
         div {
@@ -181,10 +174,10 @@ $map_width: 500px;
         display: none;
     }
 
-    #fieldset div.checkbox, #problem_submit {
+    .fieldset div.checkbox, #problem_submit {
         padding-left: 5.5em;
     }
-    #fieldset div.checkbox label, label.n {
+    .fieldset div.checkbox label, label.n {
         float: none;
         text-align: left;
         padding-right: 0;
@@ -212,7 +205,7 @@ $map_width: 500px;
         margin-bottom: 1em;
     }
 
-    #form_sign_in_no, #fieldset #form_sign_in_no {
+    #form_sign_in_no, .fieldset #form_sign_in_no {
         float: right;
         width: 47%;
         padding-left: 1%;
@@ -283,8 +276,14 @@ $map_width: 500px;
         cursor: crosshair;
     }
 
+    .banner {
+        margin: 0 $map_width + 30px 1em 0;
+        padding: 5px;
+        text-align: center;
+        position: relative;
+    }
+
     #text_map {
-        @include problem-banner;
         padding-left: 0.5em;
         text-align: left;
         margin-top: 0;
@@ -326,25 +325,21 @@ $map_width: 500px;
     // Problem pages
 
     #fixed {
-        @include problem-banner;
         background-color: #ccffcc;
         border: solid 2px #009900;
     }
 
     #unknown {
-        @include problem-banner;
         background-color: #ffcccc;
         border: solid 2px #990000;
     }
 
     #closed {
-        @include problem-banner;
         background-color: #ccccff;
         border: solid 2px #000099;
     }
 
     #progress {
-        @include problem-banner;
         background-color: #ffffcc;
         border: solid 2px #999900;
     }
@@ -618,7 +613,7 @@ $map_width: 500px;
             margin-bottom: 1em;
         }
 
-        #form_sign_in_no, #fieldset #form_sign_in_no {
+        #form_sign_in_no, .fieldset #form_sign_in_no {
             float: none;
             width: auto;
             padding-left: 0;
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js
index b67c4d74b..6a11a5832 100644
--- a/web/js/fixmystreet.js
+++ b/web/js/fixmystreet.js
@@ -5,6 +5,8 @@
 
 $(function(){
 
+    $('html').removeClass('no-js').addClass('js');
+
     $('#pc').focus();
 
     $('input[type=submit]').removeAttr('disabled');