Remove span.required in favor of adding * with css

Remove that extra span element in favor of using css to add this
sign near the required fields label. This needed to add a class
(field-required) to required fields contanier div.

JS address is also changed so that instead of toggling span.required
visibility it toggle field-required class on field container.

frontend/app/assets/javascripts/spree/frontend/checkout/address.js

@@ -43,7 +43,6 @@ Spree.ready(function($) {
  var statePara = $("#" + region + "state");
  var stateSelect = statePara.find("select");
  var stateInput = statePara.find("input");
- var stateSpanRequired = statePara.find('[id$="state-required"]');
  if (states.length > 0) {
  var selected = parseInt(stateSelect.val());
  stateSelect.html("");
@@ -68,21 +67,21 @@ Spree.ready(function($) {
  statePara.show();
  if (statesRequired) {
  stateSelect.addClass("required");
- stateSpanRequired.show();
+ statePara.addClass("field-required");
  } else {
  stateSelect.removeClass("required");
- stateSpanRequired.hide();
+ statePara.removeClass("field-required");
  }
  stateInput.removeClass("required");
  } else {
  stateSelect.hide().prop("disabled", true);
  stateInput.show();
  if (statesRequired) {
- stateSpanRequired.show();
+ statePara.addClass("field-required");
  stateInput.addClass("required");
  } else {
  stateInput.val("");
- stateSpanRequired.hide();
+ statePara.removeClass("field-required");
  stateInput.removeClass("required");
  }
  statePara.toggle(!!statesRequired);

frontend/app/assets/stylesheets/spree/frontend/screen.css.scss

@@ -143,20 +143,22 @@ label.error {
  margin-top: 3px;
 }
 
-span.required {
- color: $c_red;
- font-weight: bold;
- font-size: 1.2em;
- margin-left: 3px;
-}
-
 .field {
  padding: 10px 0;
 
  label {
  display: inline-block;
  margin-bottom: 5px;
  }
+
+ &-required label:after {
+ content: "*";
+ display: inline-block;
+ color: $c_red;
+ font-weight: bold;
+ font-size: 1.2em;
+ margin-left: 3px;
+ }
 }
 
 fieldset {

frontend/app/views/spree/address/_form.html.erb

@@ -1,7 +1,7 @@
 <% address_id = address_type.chars.first %>
 <div class="inner" data-hook=<%="#{address_type}_inner" %>>
- <div class="field" id=<%="#{address_id}firstname" %>>
- <%= form.label :firstname, t('spree.first_name') %><span class="required">*</span>
+ <div class="field field-required" id=<%="#{address_id}firstname" %>>
+ <%= form.label :firstname, t('spree.first_name') %>
  <%= form.text_field :firstname, class: 'required', autocomplete: address_type + ' given-name', required: true, autofocus: true %>
  </div>
 
@@ -17,8 +17,8 @@
  </div>
  <% end %>
 
- <div class="field" id=<%="#{address_id}address1" %>>
- <%= form.label :address1, t('spree.street_address') %><span class="required">*</span>
+ <div class="field field-required" id=<%="#{address_id}address1" %>>
+ <%= form.label :address1, t('spree.street_address') %>
  <%= form.text_field :address1, class: 'required', autocomplete: address_type + ' address-line1', required: true %>
  </div>
 
@@ -27,13 +27,13 @@
  <%= form.text_field :address2, autocomplete: address_type + ' address-line2' %>
  </div>
 
- <div class="field" id=<%="#{address_id}city" %>>
- <%= form.label :city, t('spree.city') %><span class="required">*</span>
+ <div class="field field-required" id=<%="#{address_id}city" %>>
+ <%= form.label :city, t('spree.city') %>
  <%= form.text_field :city, class: 'required', autocomplete: address_type + ' address-level2', required: true %>
  </div>
 
- <div class="field" id=<%="#{address_id}country" %>>
- <%= form.label :country_id, t('spree.country') %><span class="required">*</span>
+ <div class="field field-required" id=<%="#{address_id}country" %>>
+ <%= form.label :country_id, t('spree.country') %>
  <span id=<%="#{address_id}country-selection" %>>
  <%= form.collection_select :country_id, available_countries, :id, :name, {},
  class: 'required',
@@ -44,9 +44,9 @@
  </div>
 
  <% if Spree::Config[:address_requires_state] %>
- <div class="field" id=<%="#{address_id}state" %>>
+ <div class="field field-required" id=<%="#{address_id}state" %>>
  <% have_states = !address.country.states.empty? %>
- <%= form.label :state, t('spree.state') %><span class='required' id=<%="#{address_id}state-required"%>>*</span>
+ <%= form.label :state, t('spree.state') %>
 
  <span class="js-address-fields" style="display: none;">
  <%=
@@ -76,13 +76,13 @@
  </div>
  <% end %>
 
- <div class="field" id=<%="#{address_id}zipcode" %>>
- <%= form.label :zipcode, t('spree.zip') %><% if address.require_zipcode? %><span class="required">*</span><% end %>
+ <div class="field <%= 'field-required' if address.require_zipcode? %>" id=<%="#{address_id}zipcode" %>>
+ <%= form.label :zipcode, t('spree.zip') %>
  <%= form.text_field :zipcode, class: "#{'required' if address.require_zipcode?}", autocomplete: address_type + ' postal-code', required: true %>
  </div>
 
- <div class="field" id=<%="#{address_id}phone" %>>
- <%= form.label :phone, t('spree.phone') %><% if address.require_phone? %><span class="required">*</span><% end %>
+ <div class="field <%= 'field-required' if address.require_phone? %>" id=<%="#{address_id}phone" %>>
+ <%= form.label :phone, t('spree.phone') %>
  <% phone_hash = address.require_phone? ? { class: 'required', required: true } : {} %>
  <%= form.phone_field :phone, phone_hash.merge({ autocomplete: address_type + ' home tel' }) %>
  </div>

frontend/app/views/spree/checkout/edit.html.erb

@@ -10,7 +10,7 @@
  <div class="columns <%= if @order.state != 'confirm' then 'alpha twelve' else 'alpha omega sixteen' end %>" data-hook="checkout_form_wrapper">
  <%= form_for @order, url: update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}" } do |form| %>
  <% if @order.state == 'address' || !@order.email? %>
- <div class="field" style='clear: both'>
+ <div class="field field-required" style='clear: both'>
  <%= form.label :email %><br />
  <%= form.email_field :email, required: true %>
  </div>

frontend/app/views/spree/checkout/payment/_gateway.html.erb

@@ -1,13 +1,13 @@
 <%= image_tag 'credit_cards/credit_card.gif', id: 'credit-card-image' %>
 <% param_prefix = "payment_source[#{payment_method.id}]" %>
 
-<div class="field">
- <%= label_tag "name_on_card_#{payment_method.id}", t('spree.name_on_card') %><span class="required">*</span><br />
+<div class="field field-required">
+ <%= label_tag "name_on_card_#{payment_method.id}", t('spree.name_on_card') %><br />
  <%= text_field_tag "#{param_prefix}[name]", "#{@order.billing_firstname} #{@order.billing_lastname}", { id: "name_on_card_#{payment_method.id}", autocomplete: "cc-name" } %>
 </div>
 
-<div class="field" data-hook="card_number">
- <%= label_tag "card_number", t('spree.card_number') %><span class="required">*</span><br />
+<div class="field field-required" data-hook="card_number">
+ <%= label_tag "card_number", t('spree.card_number') %><br />
  <%= text_field_tag "#{param_prefix}[number]", '', {id: 'card_number', class: 'required cardNumber', size: 19, maxlength: 19, autocomplete: "cc-number", type: "tel" } %>
  &nbsp;
  <span id="card_type" style="display:none;">
@@ -17,13 +17,13 @@
  </span>
 </div>
 
-<div class="field" data-hook="card_expiration">
- <%= label_tag "card_expiry", t('spree.expiration') %><span class="required">*</span><br />
+<div class="field field-required" data-hook="card_expiration">
+ <%= label_tag "card_expiry", t('spree.expiration') %><br />
  <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: "required cardExpiry", placeholder: "MM / YY", type: "tel" %>
 </div>
 
-<div class="field" data-hook="card_code">
- <%= label_tag "card_code", t('spree.card_code') %><span class="required">*</span><br />
+<div class="field field-required" data-hook="card_code">
+ <%= label_tag "card_code", t('spree.card_code') %><br />
  <%= text_field_tag "#{param_prefix}[verification_value]", '', {id: 'card_code', class: 'required cardCode', size: 5, type: "tel", autocomplete: "off" } %>
  <%= link_to "(#{t('spree.what_is_this')})", spree.cvv_path, target: '_blank', "data-hook" => "cvv_link", id: "cvv_link" %>
 </div>