Swap over to having "(Optional)" (or translation) after optional form elements rather than using placeholder text

Fixes #848

app/views/gardens/_form.html.haml

@@ -16,15 +16,18 @@
   .form-group
     = f.label :description, :class => 'control-label col-md-2'
     .col-md-8
-      = f.text_area :description, :rows => 6, :class => 'form-control', :placeholder => 'optional'
+      = f.text_area :description, :rows => 6, :class => 'form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
 
   .form-group
     = f.label :location, :class => 'control-label col-md-2'
     .col-md-8
-      = f.text_field :location, :value => @garden.location || current_member.location, :class => 'form-control', :placeholder => 'optional', :maxlength => 255
+      = f.text_field :location, :value => @garden.location || current_member.location, :class => 'form-control', :maxlength => 255
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
       %span.help-block
-        If you have a location set in your profile, it will be used when
-        you create a new garden.
+        = t('.location_helper')
         - if current_member.location.blank?
           =link_to "Set your location now.", edit_member_registration_path
         - else
@@ -33,7 +36,9 @@
   .form-group
     = f.label :area, :class => 'control-label col-md-2'
     .col-md-2
-      = f.number_field :area, :class => 'input-small form-control', :placeholder => 'optional'
+      = f.number_field :area, :class => 'input-small form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
     .col-md-2
       = f.select(:area_unit, Garden::AREA_UNITS_VALUES, {:include_blank => false}, :class => 'form-control')
 

app/views/harvests/_form.html.haml

@@ -19,9 +19,11 @@
       = link_to "Request new crops.", new_crop_path
 
   .form-group
-    = f.label :harvested_at, 'When?', :class => 'control-label col-md-2', :placeholder => 'optional'
+    = f.label :harvested_at, 'When?', :class => 'control-label col-md-2'
     .col-md-2
       = f.text_field :harvested_at, :value => @harvest.harvested_at ? @harvest.harvested_at.to_s(:ymd) : '', :class => 'add-datepicker form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
 
   .form-group
     = f.label :quantity, 'How many?', :class => 'control-label col-md-2'
@@ -29,20 +31,26 @@
       -# Some browsers (eg Firefox for Android) assume "number" means
       -# "integer" unless you specify step="any":
       -# http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
-      = f.number_field :quantity, :class => 'input-small form-control', :step => 'any', :placeholder => 'optional'
+      = f.number_field :quantity, :class => 'input-small form-control', :step => 'any'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
     .col-md-2
       = f.select(:unit, Harvest::UNITS_VALUES, {:include_blank => false}, :class => 'input-medium form-control')
 
   .form-group
     = f.label :weight_quantity, 'Weighing (in total):', :class => 'control-label col-md-2'
     .col-md-2
-      = f.number_field :weight_quantity, :class => 'input-small form-control', :step => 'any', :placeholder => 'optional'
+      = f.number_field :weight_quantity, :class => 'input-small form-control', :step => 'any'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
     .col-md-2
       = f.select(:weight_unit, Harvest::WEIGHT_UNITS_VALUES, {:include_blank => false}, :class => 'form-control')
   .form-group
     = f.label :description, 'Notes', :class => 'control-label col-md-2'
     .col-md-8
-      = f.text_area :description, :rows => 6, :class => 'form-control', :placeholder => 'optional'
+      = f.text_area :description, :rows => 6, :class => 'form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
 
   .form-group
     .form-actions.col-md-offset-2.col-md-8

app/views/plantings/_form.html.haml

@@ -23,32 +23,48 @@
         = link_to "Add a garden.", new_garden_path
   .form-group
     = f.label :planted_at, 'When?', :class => 'control-label col-md-2'
-    .col-md-2= f.text_field :planted_at, :value => @planting.planted_at ? @planting.planted_at.to_s(:ymd) : '', :class => 'add-datepicker form-control', :placeholder => 'optional'
+    .col-md-2
+      = f.text_field :planted_at, :value => @planting.planted_at ? @planting.planted_at.to_s(:ymd) : '', :class => 'add-datepicker form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     = f.label :quantity, 'How many?', :class => 'control-label col-md-2'
     .col-md-2
-      = f.number_field :quantity, :class => 'form-control', :placeholder => 'optional'
+      = f.number_field :quantity, :class => 'form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     = f.label :planted_from, 'Planted from:', :class => 'control-label col-md-2'
     .col-md-8
-      = f.select(:planted_from, Planting::PLANTED_FROM_VALUES, {:include_blank => 'optional'}, :class => 'form-control')
+      = f.select(:planted_from, Planting::PLANTED_FROM_VALUES, {:include_blank => ''}, :class => 'form-control')
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     = f.label :sunniness, 'Sun or shade?', :class => 'control-label col-md-2'
     .col-md-8
-      = f.select(:sunniness, Planting::SUNNINESS_VALUES, {:include_blank => 'optional'}, :class => 'form-control')
+      = f.select(:sunniness, Planting::SUNNINESS_VALUES, {:include_blank => ''}, :class => 'form-control')
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     = f.label :description, 'Tell us more about it', :class => 'control-label col-md-2'
-    .col-md-8= f.text_area :description, :rows => 6, :class => 'form-control', :placeholder => 'optional'
+    .col-md-8
+      = f.text_area :description, :rows => 6, :class => 'form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     = f.label :finished, 'Mark as finished', :class => 'control-label col-md-2'
     .col-md-8
       = f.check_box :finished
-      %span.help-block
-        A planting is finished when you've harvested all of the crop, or it dies, or it's otherwise no longer growing in your garden.
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
+        = t('.finish_helper')
+
   .form-group
-    = f.label :finished_at, 'Finished date', { :class => 'control-label col-md-2', :placeholder => 'optional' }
+    = f.label :finished_at, 'Finished date', { :class => 'control-label col-md-2' }
     .col-md-2
       = f.text_field :finished_at, :value => @planting.finished_at ? @planting.finished_at.to_s(:ymd) : '', :class => 'add-datepicker form-control', :placeholder => 'optional'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     .form-actions.col-md-offset-2.col-md-8
       = f.submit 'Save', :class => 'btn btn-primary'

app/views/seeds/_form.html.haml

@@ -16,24 +16,33 @@
         Can't find what you're looking for?
         = link_to "Request new crops.", new_crop_path
   .form-group
-    = f.label :quantity, 'Quantity:', :class => 'control-label col-md-2', :placeholder => 'optional'
+    = f.label :quantity, 'Quantity:', :class => 'control-label col-md-2'
     .col-md-2
-      = f.number_field :quantity, :class => 'form-control', placeholder: 'optional'
+      = f.number_field :quantity, :class => 'form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     = f.label :plant_before, 'Plant before:', :class => 'control-label col-md-2'
     .col-md-2
-      = f.text_field :plant_before, :class => 'add-datepicker form-control', :value => @seed.plant_before ? @seed.plant_before.to_s(:ymd) : '', placeholder: 'optional'
+      = f.text_field :plant_before, :class => 'add-datepicker form-control', :value => @seed.plant_before ? @seed.plant_before.to_s(:ymd) : ''
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
-    = f.label :days_until_maturity_min, 'Days until maturity:', :class => 'control-label col-md-2', :placeholder => 'optional'
+    = f.label :days_until_maturity_min, 'Days until maturity:', :class => 'control-label col-md-2'
     %fieldset
       .col-md-2
-        = f.number_field :days_until_maturity_min, :class => 'form-control', placeholder: 'optional'
+        = f.number_field :days_until_maturity_min, :class => 'form-control'
+        %span.help-block.optional
+          = I18n.t 'optional', :scope => 'forms'
       .col-md-1
         = f.label :days_until_maturity_max, 'to', :class => 'control-label'
       .col-md-2
-        = f.number_field :days_until_maturity_max, :class => 'form-control', placeholder: 'optional'
+        = f.number_field :days_until_maturity_max, :class => 'form-control'
+        %span.help-block.optional
+          = I18n.t 'optional', :scope => 'forms'
       .col-md-1
         = f.label :dummy, 'days', :class => 'control-label'
+
   .form-group.required
     = f.label :organic, 'Organic?', :class => 'control-label col-md-2'
     .col-md-8
@@ -49,15 +58,13 @@
   .form-group
     = f.label :description, 'Description:', :class => 'control-label col-md-2'
     .col-md-8
-      = f.text_area :description, :rows => 6, :class => 'form-control', :placeholder => 'optional'
+      = f.text_area :description, :rows => 6, :class => 'form-control'
+      %span.help-block.optional
+        = I18n.t 'optional', :scope => 'forms'
   .form-group
     .col-md-offset-2.col-md-8
       %span.help-block
-        Are you interested in trading or swapping seeds with other
-        #{ENV['GROWSTUFF_SITE_NAME']} members?  If you
-        list your seeds as available for trade, other members can
-        contact you to request seeds.  You can list any conditions or
-        other information in the description, above.
+        =  t('.trade_help', :site_name => ENV['GROWSTUFF_SITE_NAME'])
   .form-group.required
     = f.label :tradable_to, 'Will trade:', :class => 'control-label col-md-2'
     .col-md-8

config/locales/en.yml

@@ -2,6 +2,8 @@
 # See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points.
 
 en:
+  forms:
+    optional: "(Optional)"
   unauthorized:
     read:
       notification: "You must be signed in to view notifications."
@@ -40,12 +42,23 @@ en:
       title: *browse_crops
       subtitle: "%{crops_size} total"
 
+  gardens:
+    form:
+      location_helper: "If you have a location set in your profile, it will be used when
+                        you create a new garden."
+
   seeds:
     index:
       title: 
         default: "Everyone's seeds"
         crop_seeds: "Everyone's %{crop} seeds"
         owner_seeds: "%{owner} seeds"
+    form:
+      trade_help: "Are you interested in trading or swapping seeds with other
+                   %{site_name} members?  If you
+                   list your seeds as available for trade, other members can
+                   contact you to request seeds.  You can list any conditions or
+                   other information in the description, above."
 
   plantings:
     index:
@@ -53,6 +66,9 @@ en:
         default: "Everyone's plantings"
         crop_plantings: "Everyone's %{crop} plantings"
         owner_plantings: "%{owner} plantings"
+    form:
+      finish_helper: "A planting is finished when you've harvested all of the crop, or
+                      it dies, or it's otherwise no longer growing in your garden."
 
   photos:
     show:

spec/features/gardens/adding_gardens_spec.rb

@@ -14,9 +14,9 @@ feature "Gardens", :js do
 
   it "displays required and optional fields properly" do
     expect(page).to have_selector ".form-group.required", text: "Name"
-    expect(page).to have_selector 'textarea#garden_description[placeholder="optional"]'
-    expect(page).to have_selector 'input#garden_location[placeholder="optional"]'
-    expect(page).to have_selector 'input#garden_area[placeholder="optional"]'
+    expect(page).to have_selector 'textarea#garden_description + .optional'
+    expect(page).to have_selector 'input#garden_location + .optional'
+    expect(page).to have_selector 'input#garden_area + .optional'
   end
 
   scenario "Create new garden" do
@@ -34,4 +34,4 @@ feature "Gardens", :js do
     expect(page).not_to have_content "Garden was successfully created"
     expect(page).to have_content "Area must be greater than or equal to 0"
   end
-end
+end

spec/features/harvests/harvesting_a_crop_spec.rb

@@ -19,9 +19,9 @@ feature "Harvesting a crop", :js do
 
   it "displays required and optional fields properly" do
     expect(page).to have_selector ".form-group.required", text: "What did you harvest?"
-    expect(page).to have_selector 'input#harvest_quantity[placeholder="optional"]'
-    expect(page).to have_selector 'input#harvest_weight_quantity[placeholder="optional"]'
-    expect(page).to have_selector 'textarea#harvest_description[placeholder="optional"]'
+    expect(page).to have_selector 'input#harvest_quantity + .optional'
+    expect(page).to have_selector 'input#harvest_weight_quantity + .optional'
+    expect(page).to have_selector 'textarea#harvest_description + .optional'
   end
 
   scenario "Creating a new harvest", :js do

spec/features/plantings/planting_a_crop_spec.rb

@@ -21,12 +21,12 @@ feature "Planting a crop", :js do
   it "displays required and optional fields properly" do
     expect(page).to have_selector ".form-group.required", text: "What did you plant?"
     expect(page).to have_selector ".form-group.required", text: "Where did you plant it?"
-    expect(page).to have_selector 'input#planting_planted_at[placeholder="optional"]'
-    expect(page).to have_selector 'input#planting_quantity[placeholder="optional"]'
-    expect(page).to have_selector 'select#planting_planted_from option', text: 'optional'
-    expect(page).to have_selector 'select#planting_sunniness option', text: 'optional'
-    expect(page).to have_selector 'textarea#planting_description[placeholder="optional"]'
-    expect(page).to have_selector 'input#planting_finished_at[placeholder="optional"]'
+    expect(page).to have_selector 'input#planting_planted_at + .optional'
+    expect(page).to have_selector 'input#planting_quantity + .optional'
+    expect(page).to have_selector 'select#planting_planted_from + .optional'
+    expect(page).to have_selector 'select#planting_sunniness + .optional'
+    expect(page).to have_selector 'textarea#planting_description + .optional'
+    expect(page).to have_selector 'input#planting_finished_at + .optional'
   end
 
   scenario "Creating a new planting" do

spec/features/seeds/adding_seeds_spec.rb

@@ -18,14 +18,14 @@ feature "Seeds", :js do
 
   it "displays required and optional fields properly" do
     expect(page).to have_selector ".form-group.required", text: "Crop:"
-    expect(page).to have_selector 'input#seed_quantity[placeholder="optional"]'
-    expect(page).to have_selector 'input#seed_plant_before[placeholder="optional"]'
-    expect(page).to have_selector 'input#seed_days_until_maturity_min[placeholder="optional"]'
-    expect(page).to have_selector 'input#seed_days_until_maturity_max[placeholder="optional"]'
+    expect(page).to have_selector 'input#seed_quantity + .optional'
+    expect(page).to have_selector 'input#seed_plant_before + .optional'
+    expect(page).to have_selector 'input#seed_days_until_maturity_min + .optional'
+    expect(page).to have_selector 'input#seed_days_until_maturity_max + .optional'
     expect(page).to have_selector '.form-group.required', text: 'Organic?'
     expect(page).to have_selector '.form-group.required', text: 'GMO?'
     expect(page).to have_selector '.form-group.required', text: 'Heirloom?'
-    expect(page).to have_selector 'textarea#seed_description[placeholder="optional"]'
+    expect(page).to have_selector 'textarea#seed_description + .optional'
     expect(page).to have_selector '.form-group.required', text: 'Will trade:'
   end