Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Heaps of new HTML classes (and using them in the CSS).

.choices for the fieldset inside a .radio or .check_boxes input
.choices-group for the ol inside the .choices
.choice for each li in .choices-group
.fragments for the fieldset inside date/time inputs
.fragments-group for the ol inside .fragments
.fragment for the li inside .fragments-group

Still some duplication to remove and we don't need all this specificity.
  • Loading branch information...
commit 105386df18e356582974adf5da04c90c40bac92d 1 parent 057eabe
@justinfrench authored
View
9 lib/formtastic/inputs/base/choices.rb
@@ -11,7 +11,7 @@ def choices_wrapping(&block)
end
def choices_wrapping_html_options
- {}
+ { :class => "choices" }
end
def choices_group_wrapping(&block)
@@ -22,7 +22,7 @@ def choices_group_wrapping(&block)
end
def choices_group_wrapping_html_options
- {}
+ { :class => "choices-group" }
end
def choice_wrapping(html_options, &block)
@@ -33,7 +33,10 @@ def choice_wrapping(html_options, &block)
end
def choice_wrapping_html_options(choice)
- { :class => value_as_class? ? "#{sanitized_method_name.singularize}_#{choice_html_safe_value(choice)}" : '' }
+ classes = ['choice']
+ classes << "#{sanitized_method_name.singularize}_#{choice_html_safe_value(choice)}" if value_as_class?
+
+ { :class => classes.join(" ") }
end
def choice_html(choice)
View
25 lib/formtastic/inputs/base/timeish.rb
@@ -7,15 +7,14 @@ def to_html
input_wrapping do
fragments_wrapping do
fragments_label <<
- template.content_tag(:fieldset,
- template.content_tag(:ol,
- fragments.map do |fragment|
- fragment_wrapping do
- fragment_label_html(fragment) <<
- fragment_input_html(fragment)
- end
- end.join.html_safe # TODO is this safe?
- )
+ template.content_tag(:ol,
+ fragments.map do |fragment|
+ fragment_wrapping do
+ fragment_label_html(fragment) <<
+ fragment_input_html(fragment)
+ end
+ end.join.html_safe, # TODO is this safe?
+ { :class => 'fragments-group' } # TODO refactor to fragments_group_wrapping
)
end
end
@@ -38,7 +37,11 @@ def default_date_fragments
end
def fragment_wrapping(&block)
- template.content_tag(:li, template.capture(&block))
+ template.content_tag(:li, template.capture(&block), fragment_wrapping_html_options)
+ end
+
+ def fragment_wrapping_html_options
+ { :class => 'fragment' }
end
def fragment_label(fragment)
@@ -99,7 +102,7 @@ def fragments_wrapping(&block)
end
def fragments_wrapping_html_options
- {}
+ { :class => "fragments" }
end
def fragments_label
View
56 lib/generators/templates/formtastic.css
@@ -58,23 +58,23 @@ This stylesheet forms part of the Formtastic Rails Plugin
/* CHECKBOXES AND RADIO LABELS
--------------------------------------------------------------------------------------------------*/
-.formtastic .radio li label,
-.formtastuc .check_boxes li label { line-height:100%; padding-top:0; margin-bottom:0.6em; }
+.formtastic .radio .choice label,
+.formtastuc .check_boxes .choice label { line-height:100%; padding-top:0; margin-bottom:0.6em; }
/* CHECKBOXES AND RADIO INPUTS
--------------------------------------------------------------------------------------------------*/
-.formtastic .input li label input { line-height:100%; }
+.formtastic .input .choice label input { line-height:100%; }
/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets)
--------------------------------------------------------------------------------------------------*/
-.formtastic .input fieldset { position:relative; }
-.formtastic .input fieldset legend { position:absolute; width:95%; left: 0px; }
-.formtastic .input fieldset legend span { position:absolute; }
-.formtastic .input fieldset legend.label label { position:absolute; }
-.formtastic .input fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; }
-.formtastic .input fieldset ol li { padding:0; border:0; }
+.formtastic .input .choices { position:relative; }
+.formtastic .input .choices legend { position:absolute; width:95%; left: 0px; }
+.formtastic .input .choices legend span { position:absolute; }
+.formtastic .input .choices legend.label label { position:absolute; }
+.formtastic .input .choices .choices-group { float:left; width:74%; margin:0; padding:0 0 0 25%; }
+.formtastic .input .choices .choices-group .choice { padding:0; border:0; }
/* INLINE HINTS
@@ -115,33 +115,33 @@ This stylesheet forms part of the Formtastic Rails Plugin
/* RADIO OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .radio { }
-.formtastic .radio fieldset { overflow:visible; }
-.formtastic .radio fieldset ol { margin-bottom:-0.5em; }
-.formtastic .radio fieldset ol li { margin:0.1em 0 0.5em 0; overflow:visible; }
-.formtastic .radio fieldset ol li label { float:none; width:100%; }
-.formtastic .radio fieldset ol li label input { margin-right:0.2em; }
+.formtastic .radio .choices { overflow:visible; }
+.formtastic .radio .choices .choices-group { margin-bottom:-0.5em; }
+.formtastic .radio .choices .choices-group .choice { margin:0.1em 0 0.5em 0; overflow:visible; }
+.formtastic .radio .choices .choices-group .choice label { float:none; width:100%; }
+.formtastic .radio .choices .choices-group .choice label input { margin-right:0.2em; }
/* CHECK BOXES (COLLECTION) OVERRIDES
--------------------------------------------------------------------------------------------------*/
.formtastic .check_boxes { }
-.formtastic .check_boxes fieldset { overflow:visible; }
-.formtastic .check_boxes fieldset ol { margin-bottom:-0.5em; }
-.formtastic .check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; overflow:visible; }
-.formtastic .check_boxes fieldset ol li label { float:none; width:100%; }
-.formtastic .check_boxes fieldset ol li label input { margin-right:0.2em; }
+.formtastic .check_boxes .choices { overflow:visible; }
+.formtastic .check_boxes .choices .choices-group { margin-bottom:-0.5em; }
+.formtastic .check_boxes .choices .choices-group .choice { margin:0.1em 0 0.5em 0; overflow:visible; }
+.formtastic .check_boxes .choices .choices-group .choice label { float:none; width:100%; }
+.formtastic .check_boxes .choices .choices-group .choice label input { margin-right:0.2em; }
/* DATE & TIME OVERRIDES
--------------------------------------------------------------------------------------------------*/
-.formtastic .date fieldset ol li,
-.formtastic .time fieldset ol li,
-.formtastic .datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; }
-.formtastic .date fieldset ol li label,
-.formtastic .time fieldset ol li label,
-.formtastic .datetime fieldset ol li label { display:none; }
+.formtastic .fragments { position:relative; }
+.formtastic .fragments legend { position:absolute; width:95%; left: 0px; }
+.formtastic .fragments legend span { position:absolute; }
+.formtastic .fragments legend.label label { position:absolute; }
+.formtastic .fragments .fragments-group { float:left; width:74%; margin:0; padding:0 0 0 25%; }
+.formtastic .fragments .fragments-group .fragment { padding:0; border:0; }
+.formtastic .fragments .fragments-group .fragment { float:left; width:auto; margin:0 .3em 0 0; }
+.formtastic .fragments .fragments-group .fragment label { display:none; }
+.formtastic .fragments .fragments-group .fragment label input { display:inline; margin:0; padding:0; }
-.formtastic .date fieldset ol li label input,
-.formtastic .time fieldset ol li label input,
-.formtastic .datetime fieldset ol li label input { display:inline; margin:0; padding:0; }
View
38 sample/basic_inputs.html
@@ -74,22 +74,22 @@
</li>
<li class="input date optional">
- <fieldset>
+ <fieldset class="fragments">
<legend class="label"><label>First release</label></legend>
- <ol>
- <li>
+ <ol class="fragments-group">
+ <li class="fragment">
<label>Year</label>
<select id="gem_first_release_1i" name="gem[first_release][1i]">
<option>2009</option>
</select>
</li>
- <li>
+ <li class="fragment">
<label>Month</label>
<select id="gem_first_release_2i" name="gem[first_release][2i]">
<option>October</option>
</select>
</li>
- <li>
+ <li class="fragment">
<label>Day</label>
<select id="gem_first_release_3i" name="gem[first_release][3i]">
<option>15</option>
@@ -120,22 +120,22 @@
</li>
<li class="input radio optional">
- <fieldset>
+ <fieldset class="choices">
<legend class="label"><label>Rate</label></legend>
- <ol>
- <li>
+ <ol class="choices-group">
+ <li class="choice">
<label><input id="gem_rate_five" name="gem[rate]" type="radio" checked="checked"> Five</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_rate_four" name="gem[rate]" type="radio"> Four</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_rate_three" name="gem[rate]" type="radio"> Three</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_rate_two" name="gem[rate]" type="radio"> Two</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_rate_one" name="gem[rate]" type="radio"> One</label></label>
</li>
</ol>
@@ -143,22 +143,22 @@
</li>
<li class="input check_boxes optional">
- <fieldset>
+ <fieldset class="choices">
<legend class="label"><label>Browsers</label></legend>
- <ol>
- <li>
+ <ol class="choices-group">
+ <li class="choice">
<label><input id="gem_browser_google_chrome" name="gem[browser][]" type="checkbox"> Google Chrome</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_browser_apple_safari" name="gem[browser][]" type="checkbox"> Apple Safari</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_browser_mozilla_firefox" name="gem[browser][]" type="checkbox"> Mozilla Firefox</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_browser_opera" name="gem[browser][]" type="checkbox"> Opera</label></label>
</li>
- <li>
+ <li class="choice">
<label><input id="gem_browser_internet_explorer" name="gem[browser][]" type="checkbox"> Internet Explorer</label></label>
</li>
</ol>
View
6 spec/inputs/check_boxes_input_spec.rb
@@ -19,6 +19,8 @@
it_should_have_input_wrapper_with_class(:input)
it_should_have_input_wrapper_with_id("author_posts_input")
it_should_have_a_nested_fieldset
+ it_should_have_a_nested_fieldset_with_class('choices')
+ it_should_have_a_nested_ordered_list_with_class('choices-group')
it_should_apply_error_logic_for_input_type(:check_boxes)
it_should_call_find_on_association_class_when_no_collection_is_provided(:check_boxes)
it_should_use_the_collection_when_provided(:check_boxes, 'input[@type="checkbox"]')
@@ -32,9 +34,9 @@
output_buffer.should_not have_tag('form li fieldset legend label[@for^="author_post_ids_"]')
end
- it 'should generate an ordered list with a list item for each choice' do
+ it 'should generate an ordered list with an li.choice for each choice' do
output_buffer.should have_tag('form li fieldset ol')
- output_buffer.should have_tag('form li fieldset ol li input[@type=checkbox]', :count => ::Post.all.size)
+ output_buffer.should have_tag('form li fieldset ol li.choice input[@type=checkbox]', :count => ::Post.all.size)
end
it 'should have one option with a "checked" attribute' do
View
6 spec/inputs/date_input_spec.rb
@@ -23,6 +23,8 @@
it_should_have_input_wrapper_with_class(:input)
it_should_have_input_wrapper_with_id("post_publish_at_input")
it_should_have_a_nested_fieldset
+ it_should_have_a_nested_fieldset_with_class('fragments')
+ it_should_have_a_nested_ordered_list_with_class('fragments-group')
it_should_apply_error_logic_for_input_type(:date)
it 'should have a legend and label with the label text inside the fieldset' do
@@ -37,8 +39,8 @@
end
it 'should have an ordered list of three items inside the fieldset' do
- output_buffer.should have_tag('form li.date fieldset ol')
- output_buffer.should have_tag('form li.date fieldset ol li', :count => 3)
+ output_buffer.should have_tag('form li.date fieldset ol.fragments-group')
+ output_buffer.should have_tag('form li.date fieldset ol li.fragment', :count => 3)
end
it 'should have three labels for year, month and day' do
View
6 spec/inputs/datetime_input_spec.rb
@@ -24,6 +24,8 @@
it_should_have_input_wrapper_with_class(:input)
it_should_have_input_wrapper_with_id("post_publish_at_input")
it_should_have_a_nested_fieldset
+ it_should_have_a_nested_fieldset_with_class('fragments')
+ it_should_have_a_nested_ordered_list_with_class('fragments-group')
it_should_apply_error_logic_for_input_type(:datetime)
it 'should have a legend and label with the label text inside the fieldset' do
@@ -38,8 +40,8 @@
end
it 'should have an ordered list of five items inside the fieldset' do
- output_buffer.should have_tag('form li.datetime fieldset ol')
- output_buffer.should have_tag('form li.datetime fieldset ol li', :count => 5)
+ output_buffer.should have_tag('form li.datetime fieldset ol.fragments-group')
+ output_buffer.should have_tag('form li.datetime fieldset ol li.fragment', :count => 5)
end
it 'should have five labels for year, month and day' do
View
4 spec/inputs/radio_input_spec.rb
@@ -21,6 +21,8 @@
it_should_have_input_wrapper_with_class(:input)
it_should_have_input_wrapper_with_id("post_author_input")
it_should_have_a_nested_fieldset
+ it_should_have_a_nested_fieldset_with_class('choices')
+ it_should_have_a_nested_ordered_list_with_class('choices-group')
it_should_apply_error_logic_for_input_type(:radio)
it_should_use_the_collection_when_provided(:radio, 'input')
@@ -35,7 +37,7 @@
it 'should generate an ordered list with a list item for each choice' do
output_buffer.should have_tag('form li fieldset ol')
- output_buffer.should have_tag('form li fieldset ol li', :count => ::Author.all.size)
+ output_buffer.should have_tag('form li fieldset ol li.choice', :count => ::Author.all.size)
end
it 'should have one option with a "checked" attribute' do
View
6 spec/inputs/time_input_spec.rb
@@ -47,6 +47,8 @@
it_should_have_input_wrapper_with_class(:input)
it_should_have_input_wrapper_with_id("post_publish_at_input")
it_should_have_a_nested_fieldset
+ it_should_have_a_nested_fieldset_with_class('fragments')
+ it_should_have_a_nested_ordered_list_with_class('fragments-group')
it_should_apply_error_logic_for_input_type(:time)
it 'should have a legend and label with the label text inside the fieldset' do
@@ -58,8 +60,8 @@
end
it 'should have an ordered list of two items inside the fieldset' do
- output_buffer.should have_tag('form li.time fieldset ol')
- output_buffer.should have_tag('form li.time fieldset ol li', :count => 2)
+ output_buffer.should have_tag('form li.time fieldset ol.fragments-group')
+ output_buffer.should have_tag('form li.time fieldset ol li.fragment', :count => 2)
end
it 'should have five labels for hour and minute' do
View
12 spec/support/custom_macros.rb
@@ -31,6 +31,18 @@ def it_should_have_a_nested_fieldset
output_buffer.should have_tag("form li fieldset")
end
end
+
+ def it_should_have_a_nested_fieldset_with_class(klass)
+ it "should have a nested_fieldset with class #{klass}" do
+ output_buffer.should have_tag("form li fieldset.#{klass}")
+ end
+ end
+
+ def it_should_have_a_nested_ordered_list_with_class(klass)
+ it "should have a nested fieldset with class #{klass}" do
+ output_buffer.should have_tag("form li ol.#{klass}")
+ end
+ end
def it_should_have_label_with_text(string_or_regex)
it "should have a label with text '#{string_or_regex}'" do

0 comments on commit 105386d

Please sign in to comment.
Something went wrong with that request. Please try again.