formtastic-plus-bootstrap 1.0.3 → 1.1.0

data/README.md

@@ -23,6 +23,12 @@ Add following lines in `app/assets/stylesheets/application.css`:
      ...
      */
 
+If you use bootstrap-responsive, also add the following additional line:
+
+    /*
+     *= require formtastic-plus-bootstrap/responsive
+     */
+
 All done. Enjoy nice looking forms!
 
 ### Why should I use `formtastic-plus-bootstrap` instead of `formtastic-bootstrap`?

data/lib/assets/stylesheets/bootstrap-without-forms.css.scss

@@ -50,3 +50,5 @@
 
 // Utility classes
 @import "bootstrap/utilities"; // Has to be last to override when necessary
+
+@import "bootstrap-responsive";

data/lib/assets/stylesheets/formtastic-plus-bootstrap/responsive.css.scss

@@ -0,0 +1,126 @@
+/*
+ * This file holds all relevant extensions to use the bootstrap-responsive-formats in formtastic.
+ *
+ * In portrait- and phone-mode all input fields should fit the whole width, while labels and inline-hints
+ * have to have their own rows.
+*/
+
+// Phone to Portrait Tablet
+@media (max-width: 767px) {
+  // this should only apply to formtastic forms
+  .formtastic {
+    // force labels into single rows
+    label {
+      float: none !important;
+      text-align: left !important;
+
+      // set abbr closer to label text
+      abbr {
+        position: relative !important;
+        right: 0px !important;
+      }
+    }
+
+    // legends should also be in single rows
+    legend {
+      float: none !important;
+      display: block !important;
+    }
+
+    // inline-errors and -hints should be lefties
+    p.inline-errors, p.inline-hints {
+      margin-left: 0px !important;
+    }
+
+    // the height of textareas should be limited
+    textarea {
+      height: 200px !important;
+    }
+
+    // push booleans to the left
+    input[type="checkbox"] {
+      margin-left: 0px !important;
+    }
+
+    // groups of choices and fragments go left too
+    ol.choices-group, ol.fragments-group {
+      margin-left: 0px !important;
+    }
+
+    // and finally the actions have to go left
+    .actions ol {
+      margin-left: 0px !important;
+    }
+  } // close .formtastic
+} // close @media (max-width: 767px)
+
+// inputs have to use almost the full span on phones and smaller
+// but just 90% will do because of margins and paddings
+@media (max-width: 480px) {
+  .formtastic {
+    fieldset.inputs {
+      margin: 0 2px !important;
+      padding: 0 !important;
+    }
+
+    fieldset.actions {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+
+    fieldset.inputs ol > li {
+      &.input {
+        width: 100% !important;
+
+        input, textarea, select, .input-xlarge, .input-xxlarge {
+          width: 100% !important;
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
+
+        input[type='checkbox'], input[type='radio'] {
+          width: auto !important;
+        }
+      }
+
+      &.stringish {
+        input, .input-xxlarge {
+          // changing box-sizing we have to correct height
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          height: 28px !important;
+        }
+
+      }
+
+      &.text {
+        textarea {
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+        }
+      }
+    }
+  }
+}
+
+
+@media (min-width: 481px) and (max-width: 640px) {
+  .formtastic {
+    fieldset.inputs ol > li.input {
+      .input-xxlarge {
+        width: 300px !important;
+      }
+    }
+  }
+}
+
+// the xxlarge-input-field is too big for small desktops
+@media (min-width: 768px) and (max-width: 979px) {
+  .formtastic {
+    fieldset.inputs ol > li.input {
+      .input-xxlarge {
+        width: 415px !important;
+      }
+    }
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: formtastic-plus-bootstrap
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.1.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-06 00:00:00.000000000 Z
+date: 2012-07-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
-  requirement: &5377580 !ruby/object:Gem::Requirement
+  requirement: &15226480 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: 3.1.0
   type: :runtime
   prerelease: false
-  version_requirements: *5377580
+  version_requirements: *15226480
 - !ruby/object:Gem::Dependency
   name: sass-rails
-  requirement: &5376840 !ruby/object:Gem::Requirement
+  requirement: &15225580 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *5376840
+  version_requirements: *15225580
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass
-  requirement: &5375600 !ruby/object:Gem::Requirement
+  requirement: &15224440 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -43,10 +43,10 @@ dependencies:
         version: 2.0.3
   type: :runtime
   prerelease: false
-  version_requirements: *5375600
+  version_requirements: *15224440
 - !ruby/object:Gem::Dependency
   name: formtastic
-  requirement: &5374120 !ruby/object:Gem::Requirement
+  requirement: &15222960 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -54,7 +54,7 @@ dependencies:
         version: '2.2'
   type: :runtime
   prerelease: false
-  version_requirements: *5374120
+  version_requirements: *15222960
 description: formtastic-plus-bootstrap makes a formtastic form to look like a bootstrap
   form.
 email: antage@gmail.com
@@ -83,6 +83,7 @@ files:
 - lib/assets/stylesheets/formtastic-plus-bootstrap/inputs/_select.scss
 - lib/assets/stylesheets/formtastic-plus-bootstrap/inputs/_stringish.scss
 - lib/assets/stylesheets/formtastic-plus-bootstrap/inputs/_text.scss
+- lib/assets/stylesheets/formtastic-plus-bootstrap/responsive.css.scss
 - lib/assets/stylesheets/bootstrap-without-forms.css.scss
 - lib/formtastic-plus-bootstrap.rb
 - README.md