Merge pull request #175 from ministryofjustice/ie-fixes

IE fixes

app/assets/javascripts/application.js

@@ -14,7 +14,6 @@
 
 //= require jquery_ujs
 
-//= require govuk/selection-buttons
 //= require details.polyfill
 //= require is-nan.polyfill
 

app/assets/javascripts/modules/selection-buttons.js

@@ -1,8 +1,103 @@
 'use strict';
 
 window.moj.Modules.SelectionButtonsModule = {
+  selectedClass: 'selected',
+  focusedClass: 'focused',
+
   init: function() {
-    var $buttons = $("label input[type='radio'], label input[type='checkbox']"),
-        selectionButtons = new GOVUK.SelectionButtons($buttons);
+    var self = this,
+        $buttons = $("label input[type='radio'], label input[type='checkbox']");
+
+    if($buttons.length) {
+      self.bindButtonEvents($buttons);
+      $buttons.filter(':checked').each(function(n, el) {
+        self.selectElement($(el));
+      });
+    }
+  },
+
+  bindButtonEvents: function($els) {
+    var self = this;
+
+    $els.on('click', function(e) {
+      var $el = $(e.target);
+
+      if($el.attr('type') === 'checkbox') {
+        self.clickCheckbox($el);
+      } else {
+        self.clickRadio($el);
+      }
+    }).on('focus blur', function(e) {
+      self.focusBlurElement(e);
+    });
+  },
+
+  clickCheckbox: function($el) {
+    var self = this;
+
+    if($el.is(':checked')) {
+      self.selectElement($el, true);
+    } else {
+      self.deselectCheckbox($el);
+    }
+  },
+
+  clickRadio: function($el) {
+    var self = this,
+        group = $el.attr('name');
+
+    self.deselectRadio($('input[name="' + group + '"]'));
+    self.selectElement($el, true);
+  },
+
+  focusBlurElement: function(e) {
+    var self = this,
+        $el = $(e.target),
+        type = e.type;
+
+    if(type === 'focus') {
+      self.focusElement($el);
+    } else {
+      self.blurElement($el);
+    }
+  },
+
+  deselectCheckbox: function($el) {
+    var self = this;
+
+    $el.closest('label').removeClass(self.selectedClass);
+    self.focusElement($el);
+  },
+
+  deselectRadio: function($els) {
+    var self = this;
+
+    $els.each(function(n, el) {
+      var $el = $(el);
+
+      $el.closest('label').removeClass(self.selectedClass);
+      self.blurElement($el);
+    });
+  },
+
+  selectElement: function($el, focus) {
+    var self = this;
+
+    $el.closest('label').addClass(self.selectedClass);
+    if(focus) {
+      self.focusElement($el);
+    }
+  },
+
+  focusElement: function($el) {
+    var self = this;
+
+    $el.closest('label').addClass(self.focusedClass);
+  },
+
+  blurElement: function($el) {
+    var self = this;
+
+    $el.closest('label').removeClass(self.focusedClass);
   }
 };

app/assets/stylesheets/ie7.scss

@@ -0,0 +1,3 @@
+#content {
+  margin: 0 auto;
+}

app/assets/stylesheets/ie8.scss

@@ -0,0 +1,3 @@
+#content {
+  margin: 0 auto;
+}

app/assets/stylesheets/local/inputs.scss

@@ -1,3 +1,37 @@
+.form-control {
+  width: 50%;
+
+  @media (min-width: 0px) {
+    width: 100%;
+  }
+  @media (min-width: 641px) {
+    width: 50%;
+  }
+
+  &.form-control-smaller {
+    width: 25%;
+
+    @media (min-width: 0px) {
+      width: 100%;
+    }
+    @media (min-width: 641px) {
+      width: 25%;
+    }
+  }
+}
+
+
+.block-label {
+  float: left;
+
+  @media (min-width: 0px) {
+    float: none;
+  }
+  @media (min-width: 641px) {
+    float: left;
+  }
+}
+
 .form-control-smaller {
   width: 100%;
 

app/assets/stylesheets/local/lists.scss

@@ -21,15 +21,23 @@
 
     .hwf-ref {
       margin-top: 10px;
-      width: 211px; // 227px;
-      height: 31px; // 231px;
       overflow: hidden;
-      background: asset-url('icon-hwf-form-sprite.png') left bottom no-repeat;
-      padding: 24px 8px 176px 8px;
       text-align: center;
       font-size: 24px;
       font-weight: bold;
 
+      width: 211px; // 364px;
+      height: 47px; // 162px;
+      padding: 24px 8px 91px 145px;
+      background: asset-url('icon-hwf-form-sprite.png') right bottom no-repeat;
+
+      @media (min-width: 0px) {
+        width: 211px; // 227px;
+        height: 31px; // 231px;
+        padding: 24px 8px 176px 8px;
+        background-position: left bottom;
+      }
+
       @media (min-width: 641px) {
         width: 211px; // 364px;
         height: 47px; // 162px;

app/assets/stylesheets/local/panels.scss

@@ -15,15 +15,22 @@
 
 .post {
   display: table;
-  min-height: 100px;
-  padding-left: 125px;
   background-image: asset-url('icon-post.png');
-  background-size: 100px 100px;
   background-repeat: no-repeat;
   background-position: left middle;
 
+  height: 145px;
+  background-size: 145px 145px;
+  padding-left: 165px;
+
+  @media (min-width: 0px) {
+    height: 100px;
+    padding-left: 125px;
+    background-size: 100px 100px;
+  }
+
   @media (min-width: 641px) {
-    min-height: 145px;
+    height: 145px;
     background-size: 145px 145px;
     padding-left: 165px;
   }

app/assets/stylesheets/local/phase-banner.scss

@@ -1,13 +1,20 @@
 .phase-banner {
   @include phase-banner($state: beta);
-  max-width: 960px;
-  margin: 0 15px;
+  max-width: 1020px;
+  margin: 0 auto;
+  border-bottom: none;
 
-  @media (min-width: 640px) {
+  p {
     margin: 0 30px;
-  }
+    border-bottom: 1px solid $grey-3;
+    padding-bottom: 10px;
+
+    @media (min-width: 0px) {
+      margin: 0 15px;
+    }
 
-  @media (min-width: 1020px) {
-    margin: 0 auto;
+    @media (min-width: 640px) {
+      margin: 0 30px;
+    }
   }
 }

app/views/layouts/application.html.slim

@@ -3,6 +3,13 @@
 
 - content_for :stylesheets
   = stylesheet_link_tag('application.css')
+  /[if IE 8]
+    = stylesheet_link_tag('ie8.css')
+  /[if IE 7]
+    = stylesheet_link_tag('ie7.css')
+
+- content_for :js_gt_ie
+  6
 
 - content_for :content_override
   #wrapper.group

app/views/questions/forms/_dob.html.slim

@@ -1,8 +1,7 @@
-fieldset
-  legend.visuallyhidden =t('text', scope: @form.i18n_scope)
-  .form-group  class=('error' if @form.errors.any?)
-    label.form-label for='dob_date_of_birth'
-      span.visuallyhidden =t('date_of_birth', scope: @form.i18n_scope)
-      span.hint = t('hint', scope: @form.i18n_scope)
-      span.error-message#date_of_birth = @form.errors[:date_of_birth].join(' ') if @form.errors[:date_of_birth].any?
-      = f.text_field :date_of_birth, class: 'form-control'
+legend.visuallyhidden =t('text', scope: @form.i18n_scope)
+.form-group  class=('error' if @form.errors.any?)
+  label.form-label for='dob_date_of_birth'
+    span.visuallyhidden =t('date_of_birth', scope: @form.i18n_scope)
+    span.hint = t('hint', scope: @form.i18n_scope)
+    span.error-message#date_of_birth = @form.errors[:date_of_birth].join(' ') if @form.errors[:date_of_birth].any?
+  = f.text_field :date_of_birth, class: 'form-control'

config/initializers/assets.rb

@@ -9,4 +9,4 @@
 
 Rails.application.config.assets.precompile += %w[*.png *.ico]
 Rails.application.config.assets.precompile += %w[.svg .eot .woff .ttf]
-Rails.application.config.assets.precompile += %w[confirmation-print.css]
+Rails.application.config.assets.precompile += %w[confirmation-print.css ie8.css ie7.css]