Add customized Formtastic BooleanInput to align label like other inputs

2 files changed, 29 insertions, 8 deletions

diff --git a/app/assets/stylesheets/vendor/formtastic_changes.css.scss b/app/assets/stylesheets/vendor/formtastic_changes.css.scss
index 7eb6b10c5..8eab55de1 100644
--- a/app/assets/stylesheets/vendor/formtastic_changes.css.scss
+++ b/app/assets/stylesheets/vendor/formtastic_changes.css.scss
@@ -5,19 +5,31 @@
         text-align: right;
     }
 
+    .boolean {
+        // to align horizontally boolean label with other labels
+        // (with the help of customized BooleanInput)
+        label {
+            padding-left: inherit;
+        }
+        // to align vertically checkbox with align text
+        input[type="checkbox"] {
+            margin-top: 0.3em;
+        }
+    }
+
     .stringish input{
         width: auto;
     }
-    
+
     fieldset.inputs {
-        
-        a.action { float: right; }          
+
+        a.action { float: right; }
     }
-    
+
     .choices .label, .formtastic .fragments .label {
         width: 25%;
         border: 0px;
-        
+
         label {
             position: relative;
             font-size: 14px;
@@ -28,13 +40,13 @@
         @extend .label;
         font-size: 14px !important;
         width: 100% !important;
-    }    
-    
+    }
+
     .token-input-list {
         display: inline-block;
     }
 
-    /* Hack to remove!!!! */ 
+    /* Hack to remove!!!! */
     .inputs input[type="file"] {
         display: initial;
     }
diff --git a/app/inputs/boolean_input.rb b/app/inputs/boolean_input.rb
new file mode 100644
index 000000000..a2b9b92ca
--- /dev/null
+++ b/app/inputs/boolean_input.rb
@@ -0,0 +1,9 @@
+class BooleanInput < Formtastic::Inputs::BooleanInput
+  def label_with_nested_checkbox
+    builder.label(
+      method,
+      label_text,
+      label_html_options.merge(class: "label")
+    ) << "" << check_box_html
+  end
+end