From 5e86898b1a9dfa3c88a30b092cb7a41327330baa Mon Sep 17 00:00:00 2001 From: Alberto Vena Date: Thu, 30 Nov 2017 13:31:11 +0100 Subject: [PATCH 1/9] Remove
tags from address fields They are useless since inputs have with: 100% and will still go on a new line --- .../app/views/spree/address/_form.html.erb | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/app/views/spree/address/_form.html.erb b/frontend/app/views/spree/address/_form.html.erb index 6710c1564f5..2e2e9695183 100644 --- a/frontend/app/views/spree/address/_form.html.erb +++ b/frontend/app/views/spree/address/_form.html.erb @@ -1,39 +1,39 @@ <% address_id = address_type.chars.first %>
>

> - <%= form.label :firstname, t('spree.first_name') %>*
+ <%= form.label :firstname, t('spree.first_name') %>* <%= form.text_field :firstname, class: 'required', autocomplete: address_type + ' given-name', required: true, autofocus: true %>

> - <%= form.label :lastname, t('spree.last_name') %>
+ <%= form.label :lastname, t('spree.last_name') %> <%= form.text_field :lastname, autocomplete: address_type + ' family-name' %>

<% if Spree::Config[:company] %>

> - <%= form.label :company, t('spree.company') %>
+ <%= form.label :company, t('spree.company') %> <%= form.text_field :company, autocomplete: address_type + ' organization' %>

<% end %>

> - <%= form.label :address1, t('spree.street_address') %>*
+ <%= form.label :address1, t('spree.street_address') %>* <%= form.text_field :address1, class: 'required', autocomplete: address_type + ' address-line1', required: true %>

> - <%= form.label :address2, I18n.t('spree.street_address_2') %>
+ <%= form.label :address2, I18n.t('spree.street_address_2') %> <%= form.text_field :address2, autocomplete: address_type + ' address-line2' %>

> - <%= form.label :city, t('spree.city') %>*
+ <%= form.label :city, t('spree.city') %>* <%= form.text_field :city, class: 'required', autocomplete: address_type + ' address-level2', required: true %>

> - <%= form.label :country_id, t('spree.country') %>*
+ <%= form.label :country_id, t('spree.country') %>* > <%= form.collection_select :country_id, available_countries, :id, :name, {}, class: 'required', @@ -46,7 +46,7 @@ <% if Spree::Config[:address_requires_state] %>

> <% have_states = !address.country.states.empty? %> - <%= form.label :state, t('spree.state') %>>*
+ <%= form.label :state, t('spree.state') %>>*

> - <%= form.label :zipcode, t('spree.zip') %><% if address.require_zipcode? %>*<% end %>
+ <%= form.label :zipcode, t('spree.zip') %><% if address.require_zipcode? %>*<% end %> <%= form.text_field :zipcode, class: "#{'required' if address.require_zipcode?}", autocomplete: address_type + ' postal-code', required: true %>

> - <%= form.label :phone, t('spree.phone') %><% if address.require_phone? %>*<% end %>
+ <%= form.label :phone, t('spree.phone') %><% if address.require_phone? %>*<% end %> <% phone_hash = address.require_phone? ? { class: 'required', required: true } : {} %> <%= form.phone_field :phone, phone_hash.merge({ autocomplete: address_type + ' home tel' }) %>

<% if Spree::Config[:alternative_shipping_phone] %>

> - <%= form.label :alternative_phone, t('spree.alternative_phone') %>
+ <%= form.label :alternative_phone, t('spree.alternative_phone') %> <%= form.phone_field :alternative_phone, autocomplete: address_type + ' tel'%>

<% end %> From 4e1224165c57bb1a2abd902018688d476bf8640c Mon Sep 17 00:00:00 2001 From: Alberto Vena Date: Thu, 30 Nov 2017 13:48:44 +0100 Subject: [PATCH 2/9] Change forms p.field into div.field The only reason why they currently are

elements is to let them have the

padding, which instead should be set via css. --- .../spree/frontend/screen.css.scss | 4 ++ .../app/views/spree/address/_form.html.erb | 44 +++++++++---------- .../views/spree/checkout/_address.html.erb | 4 +- .../views/spree/checkout/_payment.html.erb | 4 +- .../app/views/spree/checkout/edit.html.erb | 4 +- .../spree/checkout/payment/_gateway.html.erb | 16 +++---- 6 files changed, 40 insertions(+), 36 deletions(-) diff --git a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss index 4da8f5d1c16..baa2079930e 100644 --- a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss +++ b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss @@ -149,6 +149,10 @@ span.required { font-size: 1.2em; } +.field { + padding: 10px 0; +} + fieldset { margin: 0; min-width: 100%; diff --git a/frontend/app/views/spree/address/_form.html.erb b/frontend/app/views/spree/address/_form.html.erb index 2e2e9695183..8bdee6cd15f 100644 --- a/frontend/app/views/spree/address/_form.html.erb +++ b/frontend/app/views/spree/address/_form.html.erb @@ -1,38 +1,38 @@ <% address_id = address_type.chars.first %>

> -

> +

> <%= form.label :firstname, t('spree.first_name') %>* <%= form.text_field :firstname, class: 'required', autocomplete: address_type + ' given-name', required: true, autofocus: true %> -

+
-

> +

> <%= form.label :lastname, t('spree.last_name') %> <%= form.text_field :lastname, autocomplete: address_type + ' family-name' %> -

+
<% if Spree::Config[:company] %> -

> +

> <%= form.label :company, t('spree.company') %> <%= form.text_field :company, autocomplete: address_type + ' organization' %> -

+
<% end %> -

> +

> <%= form.label :address1, t('spree.street_address') %>* <%= form.text_field :address1, class: 'required', autocomplete: address_type + ' address-line1', required: true %> -

+
-

> +

> <%= form.label :address2, I18n.t('spree.street_address_2') %> <%= form.text_field :address2, autocomplete: address_type + ' address-line2' %> -

+
-

> +

> <%= form.label :city, t('spree.city') %>* <%= form.text_field :city, class: 'required', autocomplete: address_type + ' address-level2', required: true %> -

+
-

> +

> <%= form.label :country_id, t('spree.country') %>* > <%= form.collection_select :country_id, available_countries, :id, :name, {}, @@ -41,10 +41,10 @@ required: true %> -

+
<% if Spree::Config[:address_requires_state] %> -

> +

> <% have_states = !address.country.states.empty? %> <%= form.label :state, t('spree.state') %>>* @@ -73,24 +73,24 @@ -

+
<% end %> -

> +

> <%= form.label :zipcode, t('spree.zip') %><% if address.require_zipcode? %>*<% end %> <%= form.text_field :zipcode, class: "#{'required' if address.require_zipcode?}", autocomplete: address_type + ' postal-code', required: true %> -

+
-

> +

> <%= form.label :phone, t('spree.phone') %><% if address.require_phone? %>*<% end %> <% phone_hash = address.require_phone? ? { class: 'required', required: true } : {} %> <%= form.phone_field :phone, phone_hash.merge({ autocomplete: address_type + ' home tel' }) %> -

+
<% if Spree::Config[:alternative_shipping_phone] %> -

> +

> <%= form.label :alternative_phone, t('spree.alternative_phone') %> <%= form.phone_field :alternative_phone, autocomplete: address_type + ' tel'%> -

+
<% end %>
diff --git a/frontend/app/views/spree/checkout/_address.html.erb b/frontend/app/views/spree/checkout/_address.html.erb index 9f2d2a25527..a1e0fd8550c 100644 --- a/frontend/app/views/spree/checkout/_address.html.erb +++ b/frontend/app/views/spree/checkout/_address.html.erb @@ -11,10 +11,10 @@
<%= form.fields_for :ship_address do |ship_form| %> <%= t('spree.shipping_address') %> -

+

<%= check_box_tag 'order[use_billing]', '1', @order.shipping_eq_billing_address? %> <%= label_tag :order_use_billing, t('spree.use_billing_address'), id: 'use_billing' %> -

+
<%= render partial: 'spree/address/form', locals: { form: ship_form, address_type: 'shipping', address: @order.ship_address } %> <% end %>
diff --git a/frontend/app/views/spree/checkout/_payment.html.erb b/frontend/app/views/spree/checkout/_payment.html.erb index ba8ab10f30f..f7edca458a9 100644 --- a/frontend/app/views/spree/checkout/_payment.html.erb +++ b/frontend/app/views/spree/checkout/_payment.html.erb @@ -15,7 +15,7 @@
-

+

<% @wallet_payment_sources.each do |wallet_payment_source| %> @@ -31,7 +31,7 @@ <% end %>
-

+
<% end %> diff --git a/frontend/app/views/spree/checkout/edit.html.erb b/frontend/app/views/spree/checkout/edit.html.erb index 0920b0db354..938ee29aaac 100644 --- a/frontend/app/views/spree/checkout/edit.html.erb +++ b/frontend/app/views/spree/checkout/edit.html.erb @@ -10,10 +10,10 @@
<%= form_for @order, url: update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}" } do |form| %> <% if @order.state == 'address' || !@order.email? %> -

+

<%= form.label :email %>
<%= form.email_field :email, required: true %> -

+
<% end %> <%= render @order.state, form: form %> <% end %> diff --git a/frontend/app/views/spree/checkout/payment/_gateway.html.erb b/frontend/app/views/spree/checkout/payment/_gateway.html.erb index f1c52416ed8..4dd94391013 100644 --- a/frontend/app/views/spree/checkout/payment/_gateway.html.erb +++ b/frontend/app/views/spree/checkout/payment/_gateway.html.erb @@ -1,12 +1,12 @@ <%= image_tag 'credit_cards/credit_card.gif', id: 'credit-card-image' %> <% param_prefix = "payment_source[#{payment_method.id}]" %> -

+

<%= label_tag "name_on_card_#{payment_method.id}", t('spree.name_on_card') %>*
<%= text_field_tag "#{param_prefix}[name]", "#{@order.billing_firstname} #{@order.billing_lastname}", { id: "name_on_card_#{payment_method.id}", autocomplete: "cc-name" } %> -

+
-

+

<%= label_tag "card_number", t('spree.card_number') %>*
<%= text_field_tag "#{param_prefix}[number]", '', {id: 'card_number', class: 'required cardNumber', size: 19, maxlength: 19, autocomplete: "cc-number", type: "tel" } %>   @@ -15,18 +15,18 @@ <%= t('spree.unrecognized_card_type') %> ) -

+
-

+

<%= label_tag "card_expiry", t('spree.expiration') %>*
<%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: "required cardExpiry", placeholder: "MM / YY", type: "tel" %> -

+
-

+

<%= label_tag "card_code", t('spree.card_code') %>*
<%= 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" %> -

+
<% if @order.bill_address %> <%= fields_for "#{param_prefix}[address_attributes]", @order.bill_address do |f| %> From 58504ed53d1d06d6a5fa5deae66ea43b150d5ee8 Mon Sep 17 00:00:00 2001 From: Alberto Vena Date: Thu, 30 Nov 2017 13:52:45 +0100 Subject: [PATCH 3/9] Fix padding on delivery shipping methods list padding: none is not valid css --- frontend/app/assets/stylesheets/spree/frontend/screen.css.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss index baa2079930e..9c68cc0dcc7 100644 --- a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss +++ b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss @@ -880,7 +880,7 @@ ul#products { .shipping-methods { list-style: none; margin: 0; - padding: none; + padding: 0; .shipping-method { display: inline-block; From 45a28d8be91768e91e5fd170d72e063a2f8713c7 Mon Sep 17 00:00:00 2001 From: Alberto Vena Date: Thu, 30 Nov 2017 13:54:22 +0100 Subject: [PATCH 4/9] Remove .field class from shipping method ul There's no reason to keep that class, we should set padding with css --- frontend/app/assets/stylesheets/spree/frontend/screen.css.scss | 2 +- frontend/app/views/spree/checkout/_delivery.html.erb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss index 9c68cc0dcc7..09eb6da9aec 100644 --- a/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss +++ b/frontend/app/assets/stylesheets/spree/frontend/screen.css.scss @@ -880,7 +880,7 @@ ul#products { .shipping-methods { list-style: none; margin: 0; - padding: 0; + padding: 10px 0; .shipping-method { display: inline-block; diff --git a/frontend/app/views/spree/checkout/_delivery.html.erb b/frontend/app/views/spree/checkout/_delivery.html.erb index e1ff12c3ec8..ec02f505dec 100644 --- a/frontend/app/views/spree/checkout/_delivery.html.erb +++ b/frontend/app/views/spree/checkout/_delivery.html.erb @@ -38,7 +38,7 @@
<%= t('spree.shipping_method') %>
-
    +
      <% ship_form.object.shipping_rates.each do |rate| %>

    - <%= form.label :coupon_code %>
    + <%= form.label :coupon_code %> <%= form.text_field :coupon_code %>