effective_style_guide 1.3.7 → 1.3.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 216aeae702c2c0e1f55229ca6b337d3f550c7aff
-  data.tar.gz: 0ed0c1daf2fa7a52139aa974a8242eb4b683a2b2
+  metadata.gz: 18b0f17114ce0854f32a746049cb25c1b79fc53b
+  data.tar.gz: 120d946bd4e11ce36b5ae2ece495d85b341013cd
 SHA512:
-  metadata.gz: 39ad4c8d26ebf06b3402d57725c43d909e61c31cbee47463558dcdc778012d0830d15ee3cc84696b5912de8ff28ad9e0b43d18ea1d48611f42fbbc2175c5d3df
-  data.tar.gz: 82055edca53970a0c435a12d85749b23c94f9ed438d8ae1df7db04f4d7f003164abcca558a1cde3d3d5ca71dbe808b6ded92c53275f9ebf96cdff3ccf50d4853
+  metadata.gz: d59129ea4789365675891e6e0cd4bbbedb6d0844e446e63511620515946fc1afefb1b3ca86002457a2011e119bf20d4fbcd9dc2402969b2a655243888ffef9c4
+  data.tar.gz: 4fce52f5ca8b65936aaba06c563c127c8b1369b62daf8a5e02ba815ac28289d1470b6a70fec2d675032ef77248980f5b6931d47a65a43f25cf6ea97029a52f7b

data/README.md

@@ -2,11 +2,11 @@
 
 Ensure that your custom CSS theme looks good with all Twitter Bootstrap3 html components.
 
-Creates a /styleguide page that renders the correct HTML for all bootstrap3 (v3.2.0) components.
+Creates a `/styleguide` page that renders the correct HTML for all bootstrap3 (v3.2.0) components.
 
 Use this page to ensure that your custom CSS theme looks good with the bootstrap3 components.
 
-Create a _my_component.html.erb partial in the /effective/style_guide/ directory to add your own custom components.
+Create a `_my_component.html.erb` partial in the `views/effective/style_guide/` directory to add your own custom components.
 
 Works with simple_form to ensure that the generated form HTML matches the bootstrap3 HTML.
 
@@ -42,197 +42,34 @@ Visit `/styleguide` to test how the bootstrap3 components look with your site's
 
 ### Add Custom Components
 
-Create a _my_component.html.erb partial in the app/views/effective/style_guide/ directory.
+Create a `_my_component.html.erb` partial in the `views/effective/style_guide/` directory.
 
-This file will be automatically detected and included in the /styleguide page.
+This file will be automatically detected and included in the `/styleguide` page.
 
 
 ### simple_form
 
 simple_form (https://github.com/plataformatec/simple_form) is a pretty good FormBuilder gem.
 
-At this time of writing, the latest simple_form v3.2.1 includes a bootstrap3 config/initializer that gets very close to generating the correct bootstrap3 form HTML (as per bootstrap's example page).
+At this time of writing, the latest simple_form v3.2.1 includes a bootstrap3 config/initializer that generates correct bootstrap3 form HTML (as per bootstrap's example page).
 
-Very close, but not quite perfect.
+It does a great job with vertical and inline forms, but needs a little bit of help with the horizontal forms.
 
-It is also somewhat cumbersome to work with vertical, horizontal and inline forms from within the same app.
-
-Due to these limitations, we have created our own custom config/initializer that does generate the correct bootstrap3 form HTML.
-
-Here is the initializer:
+Add the following snippet to the bottom of the `config/initializers/simple_form_bootstrap.rb` file:
 
 ```ruby
-SimpleForm.setup do |config|
-  config.error_notification_class = 'alert alert-danger'
-  config.button_class = 'btn btn-primary'
-  config.boolean_label_class = nil
-
-  config.boolean_style = :nested
-  config.browser_validations = true
-
-  config.form_class = ''
-  config.default_wrapper = :vertical_form
-
-  config.wrapper_mappings = {
-    :boolean => :vertical_boolean,
-    :check_boxes => :vertical_radio_and_checkboxes,
-    :radio_buttons => :vertical_radio_and_checkboxes,
-
-    :horizontal_form => {
-      :boolean => :horizontal_boolean,
-      :check_boxes => :horizontal_radio_and_checkboxes,
-      :radio_buttons => :horizontal_radio_and_checkboxes
-    }
-  }
-
-  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.use :placeholder
-    b.optional :maxlength
-    b.optional :pattern
-    b.optional :min_max
-    b.optional :readonly
-    b.use :label, class: 'control-label'
-
-    b.use :input, class: 'form-control'
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-  end
-
-  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.use :placeholder
-    b.optional :maxlength
-    b.optional :readonly
-    b.use :label, class: 'control-label'
-
-    b.use :input
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-  end
-
-  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.optional :readonly
-
-    b.wrapper tag: 'div', class: 'checkbox' do |ba|
-      ba.use :label_input
-    end
-
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-  end
-
-  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.optional :readonly
-    b.use :label_input, :class => 'control-label'
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-  end
-
-  config.wrappers :vertical_inline_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.optional :readonly
-
-    b.use :label, class: 'control-label'
-
-    b.wrapper tag: 'div', class: 'inline-radio-or-checkboxes' do |ba|
-      ba.use :input
-    end
-
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-  end
-
-  config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.use :placeholder
-    b.optional :maxlength
-    b.optional :pattern
-    b.optional :min_max
-    b.optional :readonly
-    b.use :label, class: 'col-sm-3 control-label'
-
-    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
-      ba.use :input, class: 'form-control'
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-    end
-  end
-
-  config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.use :placeholder
-    b.optional :maxlength
-    b.optional :readonly
-    b.use :label, class: 'col-sm-3 control-label'
-
-    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
-      ba.use :input
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-    end
-  end
-
-  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.optional :readonly
-
-    b.wrapper tag: 'div', class: 'col-sm-offset-3 col-sm-9' do |wr|
-      wr.wrapper tag: 'div', class: 'checkbox' do |ba|
-        ba.use :label_input, class: 'col-sm-9'
-      end
-
-      wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      wr.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-    end
-  end
-
-  config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.optional :readonly
-
-    b.use :label, class: 'col-sm-3 control-label'
-
-    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
-      ba.use :input
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-    end
-  end
-
-  config.wrappers :horizontal_inline_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.optional :readonly
-
-    b.use :label, class: 'col-sm-3 control-label'
-
-    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
-      ba.wrapper tag: 'div', :class => 'inline-radio-or-checkboxes' do |bb|
-        bb.use :input
-      end
-
-      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-    end
-  end
-
-  config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
-    b.use :html5
-    b.use :placeholder
-    b.optional :maxlength
-    b.optional :pattern
-    b.optional :min_max
-    b.optional :readonly
-    b.use :label, class: 'sr-only'
-
-    b.use :input, class: 'form-control'
-    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
-    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
-  end
-
-end
+### Custom as per Effective Style Guide ###
+config.browser_validations = true
+
+config.wrapper_mappings[:horizontal_form] = {
+  check_boxes: :horizontal_radio_and_checkboxes,
+  radio_buttons: :horizontal_radio_and_checkboxes,
+  file: :horizontal_file_input,
+  boolean: :horizontal_boolean,
+  datetime: :horizontal_radio_and_checkboxes,
+  date: :horizontal_radio_and_checkboxes,
+  time: :horizontal_radio_and_checkboxes
+}
 ```
 
 To create a bootstrap3 vertical_form:
@@ -246,7 +83,7 @@ To create a bootstrap3 vertical_form:
 To create a bootstrap3 horizontal_form:
 
 ```ruby
-= simple_form_for(@post, :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => SimpleForm.wrapper_mappings[:horizontal_form]) do |f|
+= simple_form_for(@post, html: {class: 'form-horizontal'}, wrapper: :horizontal_form, wrapper_mappings: SimpleForm.wrapper_mappings[:horizontal_form]) do |f|
   # one or more inputs....
   .form-group
     .col-sm-offset-3.col-sm-9= f.button :submit
@@ -255,39 +92,11 @@ To create a bootstrap3 horizontal_form:
 To create a bootstrap3 inline_form:
 
 ```ruby
-= simple_form_for(@post, :html => {:class => 'form-inline'}, :wrapper => :inline_form) do |f|
+= simple_form_for(@post, html: {class: 'form-inline'}, wrapper: :inline_form) do |f|
   # one or more inputs....
   = f.button :submit
 ```
 
-In all 3 of the above examples, the proper wrappers will be used to generate the correct HTML for every type of form field.
-
-This includes the frustrating booleans, radio and checkbox groups.
-
-One gotcha, if you'd like to use the 'Inline checkboxes and radios' component, you will need to pass a wrapper to the f.input.
-
-For a vertical_form or inline_form:
-
-```ruby
-= f.input :favorite_drink, :as => :check_boxes, :wrapper => :vertical_inline_radio_and_checkboxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda']
-```
-
-For a horizontal_form:
-
-```ruby
-= f.input :favorite_drink, :as => :check_boxes, :wrapper => :horizontal_inline_radio_and_checkboxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda']
-```
-
-And add the following CSS:
-
-```css
-form .inline-radio-or-checkboxes > span {
-  display: inline-block;
-  margin: 0px 10px 0px 0px;
-}
-```
-
-
 ## Authorization
 
 All authorization checks are handled via the config.authorization_method found in the config/initializers/ file.

data/app/models/effective/style_guide.rb

@@ -7,7 +7,7 @@ module Effective
     end
 
     ATTRIBUTES = [
-      :id, :title, :email, :password, :number, :range, :category, :content,
+      :id, :title, :email, :password, :number, :range, :category, :content, :phone,
       :archived, :drink, :food, :price, :updated_at, :publish_on, :static_text
     ]
 

data/app/views/effective/style_guide/_form_horizontal.html.haml

@@ -1,4 +1,4 @@
-= simple_form_for Effective::StyleGuide.new(), :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => SimpleForm.wrapper_mappings[:horizontal_form], :url => '/' do |f|
+= simple_form_for Effective::StyleGuide.new(), :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => (SimpleForm.wrapper_mappings[:horizontal_form] || SimpleForm.wrapper_mappings), :url => '/' do |f|
   = f.input :title, :hint => 'please enter a title (this is a standard text field)'
   = f.input :email, :hint => 'please enter an email address (this is an email field)'
   = f.input :password, :hint => 'please enter a password (this is a password field)'
@@ -31,20 +31,18 @@
       :collection => EffectiveStyleGuide.colors,
       :hint => 'please select a category (this is a select field)'
 
-  = f.input :content, :hint => 'please enter a whole bunch of content (this is a textarea)'
-  = f.input :archived, :hint => 'please select true or false (this is a boolean field)'
+  = f.input :content, :as => :text, :hint => 'please enter a whole bunch of content (this is a textarea)'
+  = f.input :archived, :as => :boolean, :hint => 'please select true or false (this is a boolean field)'
 
   = f.input :drink,
     :as => :check_boxes,
     :collection => EffectiveStyleGuide.foods,
-    :hint => 'please select one or more drinks (this is a check_boxes :wrapper => :horizontal_radio_and_checkboxes field)',
-    :wrapper => :horizontal_radio_and_checkboxes
+    :hint => 'please select one or more drinks (this is a check_boxes field)'
 
   = f.input :food,
     :as => :radio_buttons,
     :collection => EffectiveStyleGuide.foods,
-    :hint => 'please select one food (this is a radio_buttons :wrapper => :horizontal_radio_and_checkboxes field)',
-    :wrapper => :horizontal_radio_and_checkboxes
+    :hint => 'please select one food (this is a radio_buttons field)'
 
   - if defined?(EffectiveAssets)
     = f.input :files,
@@ -67,8 +65,14 @@
     = f.input :updated_at, :as => :datetime, :hint => 'please enter a date and time (this is a datetime field)'
     = f.input :publish_on, :as => :date, :hint => 'please enter a date (this is a date field)'
 
-  - if defined?(EffectiveOrders)
-    = f.input :price, :as => :price, :hint => 'please enter a price (this is a price field from EffectiveOrders)'
+  - if defined?(EffectiveFormInputs)
+    = f.input :phone,
+      :as => :effective_tel,
+      :hint => 'please enter a phone number (this is an effective_tel field from EffectiveFormInputs'
+
+    = f.input :price,
+      :as => :effective_price,
+      :hint => 'please enter a price (this is an effective_price field from EffectiveFormInputs'
 
   .form-group
     .col-sm-offset-3.col-sm-9
@@ -79,7 +83,7 @@
 %hr
 .inline-example Form Horizontal Invalid State
 
-= simple_form_for Effective::StyleGuide.new().tap { |s| s.valid? }, :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => SimpleForm.wrapper_mappings[:horizontal_form], :url => '/' do |f|
+= simple_form_for Effective::StyleGuide.new().tap { |s| s.valid? }, :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => (SimpleForm.wrapper_mappings[:horizontal_form] || SimpleForm.wrapper_mappings), :url => '/' do |f|
   = f.input :title, :hint => 'please enter a title (this is a standard text field)'
   = f.input :email, :hint => 'please enter an email address (this is an email field)'
   = f.input :password, :hint => 'please enter a password (this is a password field)'
@@ -112,20 +116,18 @@
       :collection => EffectiveStyleGuide.colors,
       :hint => 'please select a category (this is a select field)'
 
-  = f.input :content, :hint => 'please enter a whole bunch of content (this is a textarea)'
-  = f.input :archived, :wrapper => :horizontal_boolean, :hint => 'please select true or false (this is a boolean field)'
+  = f.input :content, :as => :text, :hint => 'please enter a whole bunch of content (this is a textarea)'
+  = f.input :archived, :as => :boolean, :hint => 'please select true or false (this is a boolean field)'
 
   = f.input :drink,
     :as => :check_boxes,
     :collection => EffectiveStyleGuide.foods,
-    :hint => 'please select one or more drinks (this is a check_boxes :wrapper => :horizontal_radio_and_checkboxes field)',
-    :wrapper => :horizontal_radio_and_checkboxes
+    :hint => 'please select one or more drinks (this is a check_boxes field)'
 
   = f.input :food,
     :as => :radio_buttons,
     :collection => EffectiveStyleGuide.foods,
-    :hint => 'please select one food (this is a radio_buttons :wrapper => :horizontal_radio_and_checkboxes field)',
-    :wrapper => :horizontal_radio_and_checkboxes
+    :hint => 'please select one food (this is a radio_buttons field)'
 
   - if defined?(EffectiveAssets)
     = f.input :files,
@@ -148,8 +150,14 @@
     = f.input :updated_at, :as => :datetime, :hint => 'please enter a date and time (this is a datetime field)'
     = f.input :publish_on, :as => :date, :hint => 'please enter a date (this is a date field)'
 
-  - if defined?(EffectiveOrders)
-    = f.input :price, :as => :price, :hint => 'please enter a price (this is a price field from EffectiveOrders)'
+  - if defined?(EffectiveFormInputs)
+    = f.input :phone,
+      :as => :effective_tel,
+      :hint => 'please enter a phone number (this is an effective_tel field from EffectiveFormInputs)'
+
+    = f.input :price,
+      :as => :effective_price,
+      :hint => 'please enter a price (this is an effective_price field from EffectiveFormInputs)'
 
   .form-group
     .col-sm-offset-3.col-sm-9

data/app/views/effective/style_guide/_form_vertical.html.haml

@@ -38,12 +38,12 @@
   = f.input :drink,
     :as => :check_boxes,
     :collection => EffectiveStyleGuide.foods,
-    :hint => 'please select one or more drinks (this is a check_boxes input)'
+    :hint => 'please select one or more drinks (this is a check_boxes field)'
 
   = f.input :food,
     :as => :radio_buttons,
     :collection => EffectiveStyleGuide.foods,
-    :hint => 'please select one food (this is a radio_buttons input)'
+    :hint => 'please select one food (this is a radio_buttons field)'
 
   - if defined?(EffectiveAssets)
     = f.input :files,
@@ -66,8 +66,14 @@
     = f.input :updated_at, :as => :datetime, :hint => 'please enter a date and time (this is a datetime field)'
     = f.input :publish_on, :as => :date, :hint => 'please enter a date (this is a date field)'
 
-  - if defined?(EffectiveOrders)
-    = f.input :price, :as => :price, :hint => 'please enter a price (this is a price field from EffectiveOrders)'
+  - if defined?(EffectiveFormInputs)
+    = f.input :phone,
+      :as => :effective_tel,
+      :hint => 'please enter a phone number (this is an effective_tel field from EffectiveFormInputs)'
+
+    = f.input :price,
+      :as => :effective_price,
+      :hint => 'please enter a price (this is an effective_price field from EffectiveFormInputs)'
 
   = f.button :submit, 'Save', class: 'btn btn-primary'
   = f.button :submit, 'Save and Add New'
@@ -142,8 +148,14 @@
     = f.input :updated_at, :as => :datetime, :hint => 'please enter a date and time (this is a datetime field)'
     = f.input :publish_on, :as => :date, :hint => 'please enter a date (this is a date field)'
 
-  - if defined?(EffectiveOrders)
-    = f.input :price, :as => :price, :hint => 'please enter a price (this is a price field from EffectiveOrders)'
+  - if defined?(EffectiveFormInputs)
+    = f.input :phone,
+      :as => :effective_tel,
+      :hint => 'please enter a phone number (this is an effective_tel field from EffectiveFormInputs)'
+
+    = f.input :price,
+      :as => :effective_price,
+      :hint => 'please enter a price (this is an effective_price field from EffectiveFormInputs)'
 
   = f.button :submit, 'Save', class: 'btn btn-primary'
   = f.button :submit, 'Save and Add New'

data/lib/effective_style_guide/version.rb

@@ -1,3 +1,3 @@
 module EffectiveStyleGuide
-  VERSION = '1.3.7'.freeze
+  VERSION = '1.3.8'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: effective_style_guide
 version: !ruby/object:Gem::Version
-  version: 1.3.7
+  version: 1.3.8
 platform: ruby
 authors:
 - Code and Effect