spree_backend 2.4.10 → 3.0.0.rc1

data/app/views/spree/admin/products/_form.html.erb

@@ -1,187 +1,182 @@
 <div data-hook="admin_product_form_fields">
 
-  <div class="left eight columns alpha" data-hook="admin_product_form_left">
-    <div data-hook="admin_product_form_name">
-      <%= f.field_container :name do %>
-        <%= f.label :name, raw(Spree.t(:name) + content_tag(:span, ' *', :class => 'required')) %>
-        <%= f.text_field :name, :class => 'fullwidth title', :required => true %>
-        <%= f.error_message_on :name %>
-      <% end %>
-    </div>
-
-    <div data-hook="admin_product_form_slug">
-      <%= f.field_container :slug do %>
-        <%= f.label :slug, raw(Spree.t(:slug) + content_tag(:span, ' *',  :class => "required")) %>
-        <%= f.text_field :slug, :class => 'fullwidth title', :required => true %>
-        <%= f.error_message_on :slug %>
-      <% end %>
-    </div>
-
-    <div data-hook="admin_product_form_description">
-      <%= f.field_container :description do %>
-        <%= f.label :description, Spree.t(:description) %>
-        <%= f.text_area :description, {:rows => "#{unless @product.has_variants? then '22' else '15' end}", :class => 'fullwidth'} %>
-        <%= f.error_message_on :description %>
-      <% end %>
-    </div>
-  </div>
+  <div class="row">
+
+    <div class="col-md-8" data-hook="admin_product_form_left">
+      <div data-hook="admin_product_form_name">
+        <%= f.field_container :name, class: ['form-group'] do %>
+          <%= f.label :name, raw(Spree.t(:name) + content_tag(:span, ' *', class: 'required')) %>
+          <%= f.text_field :name, class: 'form-control title' %>
+          <%= f.error_message_on :name %>
+        <% end %>
+      </div>
 
-  <div class="right four columns omega" data-hook="admin_product_form_right">
-    <div data-hook="admin_product_form_price">
-    <%= f.field_container :price do %>
-      <%= f.label :price, raw(Spree.t(:master_price) + content_tag(:span, ' *', :class => "required")) %>
-      <%= f.text_field :price, :value => number_to_currency(@product.price, :unit => ''), :required => true %>
-      <%= f.error_message_on :price %>
-    <% end %>
-    </div>
+      <div data-hook="admin_product_form_slug">
+        <%= f.field_container :slug, class: ['form-group'] do %>
+          <%= f.label :slug, raw(Spree.t(:slug) + content_tag(:span, ' *', class: "required")) %>
+          <%= f.text_field :slug, class: 'form-control title' %>
+          <%= f.error_message_on :slug %>
+        <% end %>
+      </div>
 
-    <div data-hook="admin_product_form_cost_price" class="alpha two columns">
-      <%= f.field_container :cost_price do %>
-        <%= f.label :cost_price, Spree.t(:cost_price) %>
-        <%= f.text_field :cost_price, :value => number_to_currency(@product.cost_price, :unit => '') %>
-        <%= f.error_message_on :cost_price %>
-      <% end %>
+      <div data-hook="admin_product_form_description">
+        <%= f.field_container :description, class: ['form-group'] do %>
+          <%= f.label :description, Spree.t(:description) %>
+          <%= f.text_area :description, { rows: "#{unless @product.has_variants? then '20' else '13' end}", class: 'form-control' } %>
+          <%= f.error_message_on :description %>
+        <% end %>
+      </div>
     </div>
 
-    <div data-hook="admin_product_form_cost_currency" class="omega two columns">
-      <%= f.field_container :cost_currency do %>
-        <%= f.label :cost_currency, Spree.t(:cost_currency) %>
-        <%= f.text_field :cost_currency %>
-        <%= f.error_message_on :cost_currency %>
+    <div class="col-md-4" data-hook="admin_product_form_right">
+      <div data-hook="admin_product_form_price">
+      <%= f.field_container :price, class: ['form-group'] do %>
+        <%= f.label :price, raw(Spree.t(:master_price) + content_tag(:span, ' *', class: "required")) %>
+        <%= f.text_field :price, value: number_to_currency(@product.price, unit: ''), class: 'form-control' %>
+        <%= f.error_message_on :price %>
       <% end %>
-    </div>
-
-    <div class="clear"></div>
+      </div>
 
-    <div data-hook="admin_product_form_available_on">
-      <%= f.field_container :available_on do %>
-        <%= f.label :available_on, Spree.t(:available_on) %>
-        <%= f.error_message_on :available_on %>
-        <%= f.text_field :available_on, :value => datepicker_field_value(@product.available_on), :class => 'datepicker' %>
-      <% end %>
-    </div>
+      <div data-hook="admin_product_form_cost_price" class="alpha two columns">
+        <%= f.field_container :cost_price, class: ['form-group'] do %>
+          <%= f.label :cost_price, Spree.t(:cost_price) %>
+          <%= f.text_field :cost_price, value: number_to_currency(@product.cost_price, unit: ''), class: 'form-control' %>
+          <%= f.error_message_on :cost_price %>
+        <% end %>
+      </div>
+      <div data-hook="admin_product_form_cost_currency" class="omega two columns">
+        <%= f.field_container :cost_currency, class: ['form-group'] do %>
+          <%= f.label :cost_currency, Spree.t(:cost_currency) %>
+          <%= f.text_field :cost_currency, class: 'form-control' %>
+          <%= f.error_message_on :cost_currency %>
+        <% end %>
+      </div>
 
-    <div data-hook="admin_product_form_promotionable">
-      <%= f.field_container :promotionable do %>
-        <%= f.label :promotionable do %>
-          <%= f.check_box :promotionable %> <%= Spree.t(:promotionable) %>
+      <div data-hook="admin_product_form_available_on">
+        <%= f.field_container :available_on, class: ['form-group'] do %>
+          <%= f.label :available_on, Spree.t(:available_on) %>
+          <%= f.error_message_on :available_on %>
+          <%= f.text_field :available_on, value: datepicker_field_value(@product.available_on), class: 'datepicker form-control' %>
         <% end %>
-      <% end %>
-    </div>
+      </div>
 
-    <% if @product.has_variants? %>
-      <div data-hook="admin_product_form_multiple_variants">
-        <%= f.label :skus, Spree.t(:skus) %>
-        <span class="info">
-          <%= Spree.t(:info_product_has_multiple_skus, count: @product.variants.count) %>
-          <ul class="text_list">
-            <% @product.variants.first(5).each do |variant| %>
-              <li><%= variant.sku %></li>
+      <% if @product.has_variants? %>
+        <div data-hook="admin_product_form_multiple_variants" class="well">
+          <%= f.label :skus, Spree.t(:sku).pluralize %>
+          <div class="info marginb">
+            <%= Spree.t(:info_product_has_multiple_skus, count: @product.variants.count) %>
+            <ul class="text_list">
+              <% @product.variants.first(5).each do |variant| %>
+                <li><%= variant.sku %></li>
+              <% end %>
+            </ul>
+            <% if @product.variants.count > 5 %>
+              <em>
+                <%= Spree.t(:info_number_of_skus_not_shown, count: @product.variants.count - 5) %>
+              </em>
             <% end %>
-          </ul>
-          <% if @product.variants.count > 5 %>
-            <%= Spree.t(:info_number_of_skus_not_shown, count: @product.variants.count - 5) %>
-          <% end %>
-        </span>
-        <div class="info-actions">
-          <% if can?(:admin, Spree::Variant) %>
-            <%= link_to_with_icon 'th-large', Spree.t(:manage_variants), admin_product_variants_url(@product) %>
+          </div>
+          <div class="info-actions">
+            <% if can?(:admin, Spree::Variant) %>
+              <%= link_to_with_icon 'variants', 'Manage Variants', admin_product_variants_url(@product), class: "btn btn-default" %>
+            <% end %>
+          </div>
+        </div>
+      <% else %>
+        <div data-hook="admin_product_form_sku">
+          <%= f.field_container :sku, class: ['form-group'] do %>
+            <%= f.label :sku, Spree.t(:sku) %>
+            <%= f.text_field :sku, size: 16, class: 'form-control' %>
           <% end %>
         </div>
-      </div>
-    <% else %>
-      <div data-hook="admin_product_form_sku">
-        <%= f.field_container :sku do %>
-          <%= f.label :sku, Spree.t(:sku) %>
-          <%= f.text_field :sku, :size => 16 %>
+
+        <div id="shipping_specs" class="row">
+          <div class="col-md-6">
+            <div id="shipping_specs_weight_field" data-hook="admin_product_form_weight" class="form-group">
+              <%= f.label :weight, Spree.t(:weight) %>
+              <%= f.text_field :weight, size: 4, class: 'form-control' %>
+            </div>
+          </div>
+
+          <div class="col-md-6">
+            <div id="shipping_specs_height_field" data-hook="admin_product_form_height" class="form-group">
+              <%= f.label :height, Spree.t(:height) %>
+              <%= f.text_field :height, size: 4, class: 'form-control' %>
+            </div>
+          </div>
+
+          <div class="col-md-6">
+            <div id="shipping_specs_width_field" data-hook="admin_product_form_width" class="form-group">
+              <%= f.label :width, Spree.t(:width) %>
+              <%= f.text_field :width, size: 4, class: 'form-control' %>
+            </div>  
+          </div>
+          
+          <div class="col-md-6">
+            <div id="shipping_specs_depth_field" data-hook="admin_product_form_depth" class="form-group">
+              <%= f.label :depth, Spree.t(:depth) %>
+              <%= f.text_field :depth, size: 4, class: 'form-control' %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <div data-hook="admin_product_form_shipping_categories">
+        <%= f.field_container :shipping_categories, class: ['form-group'] do %>
+          <%= f.label :shipping_category_id, Spree.t(:shipping_categories) %>
+          <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2' }) %>
+          <%= f.error_message_on :shipping_category %>
         <% end %>
       </div>
 
-      <ul id="shipping_specs">
-        <li id="shipping_specs_weight_field" data-hook="admin_product_form_weight" class="field alpha two columns">
-          <%= f.label :weight, Spree.t(:weight) %>
-          <%= f.text_field :weight, :size => 4 %>
-        </li>
-        <li id="shipping_specs_height_field" data-hook="admin_product_form_height" class="field omega two columns">
-          <%= f.label :height, Spree.t(:height) %>
-          <%= f.text_field :height, :size => 4 %>
-        </li>
-        <li id="shipping_specs_width_field" data-hook="admin_product_form_width" class="field alpha two columns">
-          <%= f.label :width, Spree.t(:width) %>
-          <%= f.text_field :width, :size => 4 %>
-        </li>
-        <li id="shipping_specs_depth_field" data-hook="admin_product_form_depth" class="field omega two columns">
-          <%= f.label :depth, Spree.t(:depth) %>
-          <%= f.text_field :depth, :size => 4 %>
-        </li>
-      </ul>
-    <% end %>
-
-    <div data-hook="admin_product_form_shipping_categories">
-      <%= f.field_container :shipping_categories do %>
-        <%= f.label :shipping_category_id, Spree.t(:shipping_categories) %>
-        <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { :include_blank => Spree.t('match_choices.none') }, { :class => 'select2' }) %>
-        <%= f.error_message_on :shipping_category %>
-      <% end %>
+      <div data-hook="admin_product_form_tax_category">
+        <%= f.field_container :tax_category, class: ['form-group'] do %>
+          <%= f.label :tax_category_id, Spree.t(:tax_category) %>
+          <%= f.collection_select(:tax_category_id, @tax_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2' }) %>
+          <%= f.error_message_on :tax_category %>
+        <% end %>
+      </div>
     </div>
 
-    <div data-hook="admin_product_form_tax_category">
-      <%= f.field_container :tax_category do %>
-        <%= f.label :tax_category_id, Spree.t(:tax_category) %>
-        <%= f.collection_select(:tax_category_id, @tax_categories, :id, :name, { :include_blank => Spree.t('match_choices.none') }, { :class => 'select2' }) %>
-        <%= f.error_message_on :tax_category %>
-      <% end %>
-    </div>
   </div>
 
-  <div class="twelve columns alpha omega">
-    <div data-hook="admin_product_form_taxons">
-      <%= f.field_container :taxons do %>
-        <%= f.label :taxon_ids, Spree.t(:taxons) %><br />
-        <%= f.hidden_field :taxon_ids, :value => @product.taxon_ids.join(',') %>
-      <% end %>
-    </div>
+  <div data-hook="admin_product_form_taxons">
+    <%= f.field_container :taxons, class: ['form-group'] do %>
+      <%= f.label :taxon_ids, Spree.t(:taxons) %>
+      <%= f.hidden_field :taxon_ids, value: @product.taxon_ids.join(',') %>
+    <% end %>
+  </div>
 
-    <div data-hook="admin_product_form_option_types">
-      <%= f.field_container :option_types do %>
-        <%= f.label :option_type_ids, Spree.t(:option_types) %>
-        <%= f.hidden_field :option_type_ids, :value => @product.option_type_ids.join(',') %>
-      <% end %>
-    </div>
+  <div data-hook="admin_product_form_option_types">
+    <%= f.field_container :option_types, class: ['form-group'] do %>
+      <%= f.label :option_type_ids, Spree.t(:option_types) %>
+      <%= f.hidden_field :option_type_ids, value: @product.option_type_ids.join(',') %>
+    <% end %>
   </div>
 
-  <div data-hook="admin_product_form_meta" class="alpha omega twelve columns">
-    <div data-hook="admin_product_form_meta_title">
-      <%= f.field_container :meta_title do %>
-        <%= f.label :meta_title, Spree.t(:meta_title) %>
-        <%= f.text_field :meta_title, :class => 'fullwidth' %>
-      <% end %>
-    </div>
 
-    <div data-hook="admin_product_form_meta_keywords">
-      <%= f.field_container :meta_keywords do %>
-        <%= f.label :meta_keywords, Spree.t(:meta_keywords) %>
-        <%= f.text_field :meta_keywords, :class => 'fullwidth' %>
-      <% end %>
-    </div>
+<div data-hook="admin_product_form_meta">
 
-    <div data-hook="admin_product_form_meta_description">
-      <%= f.field_container :meta_description do %>
-        <%= f.label :meta_description, Spree.t(:meta_description) %>
-        <%= f.text_field :meta_description, :class => 'fullwidth' %>
-      <% end %>
-    </div>
+  <div data-hook="admin_product_form_meta_keywords">
+    <%= f.field_container :meta_keywords, class: ['form-group'] do %>
+      <%= f.label :meta_keywords, Spree.t(:meta_keywords) %>
+      <%= f.text_field :meta_keywords, class: 'form-control' %>
+    <% end %>
   </div>
 
-  <div class="clear"></div>
+  <div data-hook="admin_product_form_meta_description">
+    <%= f.field_container :meta_description, class: ['form-group'] do %>
+      <%= f.label :meta_description, Spree.t(:meta_description) %>
+      <%= f.text_field :meta_description, class: 'form-control' %>
+    <% end %>
+  </div>
 
   <div data-hook="admin_product_form_additional_fields"></div>
 
-  <div class="clear"></div>
 </div>
 
 <% unless Rails.env.test? %>
   <script>
-  $('.select2-container').css({width: '20em'})
+    $('.select2-container').css();
   </script>
 <% end %>

data/app/views/spree/admin/products/_properties_form.erb

@@ -4,7 +4,7 @@
 
 <% f.fields_for :product_properties do |properties_form| %>
     <div data-hook="value">
-      <%= properties_form.label :value, properties_form.object.property.presentation %><br />
-      <%= properties_form.text_field :value %>
+      <%= properties_form.label :value, properties_form.object.property.presentation %>
+      <%= properties_form.text_field :value, :class => "form-control" %>
     </div>
 <% end %>

data/app/views/spree/admin/products/edit.html.erb

@@ -1,19 +1,14 @@
 <% content_for :page_actions do %>
-  <li><%= button_link_to Spree.t(:back_to_products_list), session[:return_to] || admin_products_url, :icon => 'arrow-left' %></li>
   <% if can?(:create, Spree::Product) %>
-    <li id="new_product_link">
-      <%= button_link_to Spree.t(:new_product), new_object_url, { :icon => 'plus', :id => 'admin_new_product' } %>
-    </li>
+    <%= button_link_to Spree.t(:new_product), new_object_url, { :class => "btn-success", :icon => 'add', :id => 'admin_new_product' } %>
   <% end %>
 <% end %>
 
-<%= render :partial => 'spree/admin/shared/product_sub_menu' %>
-
 <%= render :partial => 'spree/admin/shared/product_tabs', :locals => { :current => 'Product Details' } %>
-<%= render :partial => 'spree/shared/error_messages', :locals => { :target => @product } %>
+<%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @product } %>
 
 <%= form_for [:admin, @product], :method => :put, :html => { :multipart => true } do |f| %>
-  <fieldset class="no-border-top">
+  <fieldset>
     <%= render :partial => 'form', :locals => { :f => f } %>
     <%= render :partial => 'spree/admin/shared/edit_resource_links' %>
   </fieldset>

data/app/views/spree/admin/products/index.html.erb

@@ -1,102 +1,81 @@
 <% content_for :page_title do %>
-  <%= Spree.t(:listing_products) %>
+  <%= Spree::Product.model_name.human(count: :many) %>
 <% end %>
 
 <% content_for :page_actions do %>
-  <li id="new_product_link">
-    <%= button_link_to Spree.t(:new_product), new_object_url, { :remote => true, :icon => 'plus', :id => 'admin_new_product' } %>
-  </li>
+  <%= button_link_to Spree.t(:new_product), new_object_url, { :class => "btn-success", :icon => 'add', :id => 'admin_new_product' } %>
 <% end if can?(:create, Spree::Product) %>
 
-<%= render :partial => 'spree/admin/shared/product_sub_menu' %>
-
-<% content_for :table_filter_title do %>
-  <%= Spree.t(:search) %>
-<% end %>
-
 <% content_for :table_filter do %>
   <div data-hook="admin_products_sidebar">
 
     <%= search_form_for [:admin, @search] do |f| %>
-
-        <%- locals = {:f => f} %>
-
-        <div data-hook="admin_products_index_search">
-          <div class="alpha nine columns">
-            <div class="field">
-              <%= f.label :name_cont, Spree.t(:name) %>
-              <%= f.text_field :name_cont, :size => 15 %>
-            </div>
-          </div>
-          <div class="four columns">
-            <div class="field">
-              <%= f.label :variants_including_master_sku_cont, Spree.t(:sku) %>
-              <%= f.text_field :variants_including_master_sku_cont, :size => 15 %>
-            </div>
+      <%- locals = {:f => f} %>
+      <div data-hook="admin_products_index_search" class="row">
+        <div class="col-md-6">
+          <div class="form-group">
+            <%= f.label :name_cont, Spree.t(:name) %>
+            <%= f.text_field :name_cont, :size => 15, class: "form-control js-quick-search-target" %>
           </div>
-          <div class="three columns omega">
-            <div class="field checkbox">
-              <label>
-                <%= f.check_box :deleted_at_null, {:checked => params[:q][:deleted_at_null] == '0'}, '0', '1' %>
-                <%= Spree.t(:show_deleted) %>
-              </label>
-            </div>
+        </div>
+        <div class="col-md-6">
+          <div class="form-group">
+            <%= f.label :variants_including_master_sku_cont, Spree.t(:sku) %>
+            <%= f.text_field :variants_including_master_sku_cont, :size => 15, class: "form-control" %>
           </div>
         </div>
-
-        <div class="clear"></div>
-
-        <div class="form-buttons actions filter-actions" data-hook="admin_products_index_search_buttons">
-          <%= button Spree.t(:search), 'search' %>
+        <div class="col-md-12">
+          <div class="field checkbox">
+            <label>
+              <%= f.check_box :deleted_at_null, {:checked => params[:q][:deleted_at_null] == '0'}, '0', '1' %>
+              <%= Spree.t(:show_deleted) %>
+            </label>
+          </div>
         </div>
+      </div>
+      <div data-hook="admin_products_index_search_buttons" class="form-actions">
+        <%= button Spree.t(:search), 'search' %>
+      </div>
     <% end %>
+
   </div>
 <% end %>
 
-<div id="new_product_wrapper" data-hook></div>
-
-<%= paginate @collection %>
+<%= render partial: 'spree/admin/shared/index_table_options', locals: { collection: @collection } %>
 
 <% if @collection.any? %>
-  <table class="index" id="listing_products">
-    <colgroup>
-       <col style="width: 15%;">
-       <col style="width: 10%;">
-       <col style="width: 48%;">
-       <col style="width: 10%;">
-       <col style="width: 17%;">
-    </colgroup>
+  <table class="table" id="listing_products">
     <thead>
       <tr data-hook="admin_products_index_headers">
         <th><%= Spree.t(:sku) %></th>
-        <th colspan="2"><%= sort_link @search,:name, Spree.t(:name), { :default_order => "desc" }, {:title => 'admin_products_listing_name_title'} %></th>
-        <th><%= sort_link @search,:master_default_price_amount, Spree.t(:master_price), {}, {:title => 'admin_products_listing_price_title'} %></th>
+        <th colspan="2"><%= sort_link @search,:name, Spree.t(:name), { default_order: "desc" }, {title: 'admin_products_listing_name_title'} %></th>
+        <th class="text-center">
+          <%= sort_link @search, :master_default_price_amount, Spree.t(:master_price), {}, {title: 'admin_products_listing_price_title'} %>
+        </th>
         <th data-hook="admin_products_index_header_actions" class="actions"></th>
       </tr>
     </thead>
     <tbody>
       <% @collection.each do |product| %>
           <tr <%== "style='color: red;'" if product.deleted? %> id="<%= spree_dom_id product %>" data-hook="admin_products_index_rows" class="<%= cycle('odd', 'even') %>">
-            <td class="align-center"><%= product.sku rescue '' %></td>
-            <td class="align-center"><%= mini_image(product) %></td>
+            <td class="sku"><%= product.sku rescue '' %></td>
+            <td class="image"><%= mini_image product %></td>
             <td><%= link_to product.try(:name), edit_admin_product_path(product) %></td>
-            <td class="align-center"><%= product.display_price.to_html rescue '' %></td>
-            <td class="actions" data-hook="admin_products_index_row_actions">
-              <%= link_to_edit product, :no_text => true, :class => 'edit' if can?(:edit, product) && !product.deleted? %>
-              &nbsp;
-              <%= link_to_clone product, :no_text => true, :class => 'clone' if can?(:clone, product) %>
-              &nbsp;
-              <%= link_to_delete product, :no_text => true if can?(:delete, product) && !product.deleted? %>
+            <td class="text-center"><%= product.display_price.to_html rescue '' %></td>
+            <td class="actions actions-3 text-right" data-hook="admin_products_index_row_actions">
+              <%= link_to_edit product, no_text: true, class: 'edit' if can?(:edit, product) && !product.deleted? %>
+              <%= link_to_clone product, no_text: true, class: 'clone' if can?(:clone, product) %>
+              <%= link_to_delete product, no_text: true if can?(:delete, product) && !product.deleted? %>
             </td>
           </tr>
       <% end %>
     </tbody>
   </table>
 <% else %>
-  <div class="alpha twelve columns no-objects-found">
-    <%= Spree.t(:no_resource_found, resource: I18n.t(:other, scope: 'activerecord.models.spree/product')) %>,
-    <%= link_to Spree.t(:add_one), spree.new_admin_product_path %>!
+  <div class="alert alert-info no-objects-found">
+    <%= Spree.t(:no_resource_found, resource: Spree::Product.model_name.human(count: :many)) %>,
+    <%= link_to Spree.t(:add_one), new_object_url %>!
   </div>
 <% end %>
 
-<%= paginate @collection %>
+<%= render partial: 'spree/admin/shared/index_table_options', locals: { collection: @collection } %>

data/app/views/spree/admin/products/new.html.erb

@@ -1,66 +1,62 @@
-<%= render :partial => 'spree/admin/shared/product_sub_menu' %>
+<%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @product } %>
 
-<%= render :partial => 'spree/shared/error_messages', :locals => { :target => @product } %>
-
-<%= form_for [:admin, @product], method: :post, url: admin_products_path, :html => { :multipart => true } do |f| %>
+<% content_for :page_title do %>
+  <%= Spree.t(:new_product) %>
+<% end %>
 
+<%= form_for [:admin, @product], :html => { :multipart => true } do |f| %>
   <fieldset data-hook="new_product">
-
-    <legend align="center"><%= Spree.t(:new_product) %></legend>
-
-    <%= f.field_container :name do %>
-      <%= f.label :name, Spree.t(:name) %> <span class="required">*</span><br />
-      <%= f.text_field :name, :class => 'fullwidth title', :required => true %>
+    <%= f.field_container :name, :class => ['form-group'] do %>
+      <%= f.label :name, Spree.t(:name) %> <span class="required">*</span>
+      <%= f.text_field :name, :class => 'form-control title' %>
       <%= f.error_message_on :name %>
     <% end %>
 
     <div data-hook="new_product_attrs" class="row">
       <% unless @product.has_variants? %>
-        <div data-hook="new_product_sku" class="alpha four columns">
-          <%= f.field_container :sku do %>
-            <%= f.label :sku, Spree.t(:sku) %><br />
-            <%= f.text_field :sku, :size => 16, :class => 'fullwidth' %>
+        <div data-hook="new_product_sku" class="col-md-4">
+          <%= f.field_container :sku, :class => ['form-group'] do %>
+            <%= f.label :sku, Spree.t(:sku) %>
+            <%= f.text_field :sku, :size => 16, :class => 'form-control' %>
             <%= f.error_message_on :sku %>
           <% end %>
         </div>
       <% end %>
 
-      <div data-hook="new_product_prototype" class="four columns">
-        <%= f.field_container :prototype do %>
-          <%= f.label :prototype_id, Spree.t(:prototype) %><br />
-          <%= f.collection_select :prototype_id, Spree::Prototype.all, :id, :name, {:include_blank => true}, {:class => 'select2 fullwidth'} %>
+      <div data-hook="new_product_prototype" class="col-md-4">
+        <%= f.field_container :prototype, :class => ['form-group'] do %>
+          <%= f.label :prototype_id, Spree.t(:prototype) %>
+          <%= f.collection_select :prototype_id, Spree::Prototype.all, :id, :name, {:include_blank => true}, {:class => 'select2'} %>
         <% end %>
       </div>
 
-      <div data-hook="new_product_price" class="four columns">
-        <%= f.field_container :price do %>
-          <%= f.label :price, Spree.t(:master_price) %> <span class="required">*</span><br />
-          <%= f.text_field :price, :value => number_to_currency(@product.price, :unit => ''), :class => 'fullwidth', :required => true %>
+      <div data-hook="new_product_price" class="col-md-4">
+        <%= f.field_container :price, :class => ['form-group'] do %>
+          <%= f.label :price, Spree.t(:master_price) %> <span class="required">*</span>
+          <%= f.text_field :price, :value => number_to_currency(@product.price, :unit => ''), :class => 'form-control' %>
           <%= f.error_message_on :price %>
         <% end %>
       </div>
 
-      <div data-hook="new_product_available_on" class="omega four columns">
-        <%= f.field_container :available_on do %>
+      <div data-hook="new_product_available_on" class="col-md-4">
+        <%= f.field_container :available_on, :class => ['form-group'] do %>
           <%= f.label :available_on, Spree.t(:available_on) %>
           <%= f.error_message_on :available_on %>
-          <%= f.text_field :available_on, :class => 'datepicker fullwidth' %>
+          <%= f.text_field :available_on, :class => 'datepicker form-control' %>
         <% end %>
       </div>
 
-    </div>
-
-    <div class='row'>
-      <div data-hook="new_product_shipping_category" class="alpha four columns">
-        <%= f.field_container :shipping_category do %>
-          <%= f.label :shipping_category_id, Spree.t(:shipping_categories) %><span class="required">*</span><br />
-          <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { :include_blank => Spree.t('match_choices.none') }, { :class => 'select2 fullwidth', :required => true }) %>
+      <div data-hook="new_product_shipping_category" class="col-md-4">
+        <%= f.field_container :shipping_category, :class => ['form-group'] do %>
+          <%= f.label :shipping_category_id, Spree.t(:shipping_categories) %><span class="required">*</span>
+          <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { :include_blank => Spree.t('match_choices.none') }, { :class => 'select2' }) %>
           <%= f.error_message_on :shipping_category_id %>
         <% end %>
       </div>
+
     </div>
 
-    <div class="clearfix" data-hook="product-from-prototype" id="product-from-prototype">
+    <div data-hook="product-from-prototype" id="product-from-prototype">
       <%= render :file => 'spree/admin/prototypes/show' if @prototype %>
     </div>