Merge pull request #2108 from betagouv/pimp-checkboxes

Pimp checkboxes

app/assets/stylesheets/new_design/forms.scss

@@ -54,6 +54,20 @@
     .etablissement-titre {
       margin-bottom: 2 * $default-padding;
     }
+
+    // Align checkboxes on the top-left side of the label
+    &.editable-champ-checkbox,
+    &.editable-champ-engagement {
+      label {
+        padding-left: 28px;
+      }
+
+      input[type=checkbox] {
+        position: absolute;
+        top: 1px;
+        left: 0px;
+      }
+    }
   }
 
   .radios {
@@ -112,9 +126,18 @@
 
   input[type=checkbox],
   input[type=radio] {
+    margin-left: 5px;
+    margin-right: 4px;
     margin-bottom: 2 * $default-padding;
   }
 
+  input[type=checkbox] {
+    // Firefox tends to display checkbox controls smaller than other browsers.
+    // Ensure a consistency of size between browsers.
+    width: 16px;
+    height: 16px;
+  }
+
   input[type=date] {
     max-width: 180px;
   }

app/helpers/champ_helper.rb

@@ -1,5 +1,6 @@
 module ChampHelper
-  def is_not_header_nor_explication?(champ)
-    !['header_section', 'explication'].include?(champ.type_champ)
+  def has_label?(champ)
+    types_without_label = ['header_section', 'explication']
+    !types_without_label.include?(champ.type_champ)
   end
 end

app/views/shared/dossiers/editable_champs/_checkbox.html.haml

@@ -2,5 +2,3 @@
   { required: champ.mandatory? },
   'on',
   'off'
-
-%br

app/views/shared/dossiers/editable_champs/_editable_champ.html.haml

@@ -1,5 +1,5 @@
-.editable-champ
-  - if is_not_header_nor_explication?(champ)
+.editable-champ{ class: "editable-champ-#{champ.type_champ}" }
+  - if has_label?(champ)
     = render partial: 'shared/dossiers/editable_champs/champ_label', locals: { form: form, champ: champ, seen_at: defined?(seen_at) ? seen_at : nil }
 
   = render partial: "shared/dossiers/editable_champs/#{champ.type_champ}",