spree_core 1.2.5 → 1.3.0.rc1

data/app/views/spree/admin/shared/_edit_resource_links.html.erb

@@ -1,4 +1,5 @@
-<p class="form-buttons" data-hook="buttons">
-  <%= button t(:update) %>
-  <%= t(:or) %> <%= link_to t(:cancel), collection_url %>
-</p>
+<div class="form-buttons filter-actions actions" data-hook="buttons">
+  <%= button t(:update), 'icon-refresh' %>
+  <span class="or"><%= t(:or) %></span>
+  <%= button_link_to t(:cancel), collection_url, :icon => 'icon-remove' %>
+</div>

data/app/views/spree/admin/shared/_head.html.erb

@@ -1,9 +1,17 @@
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+
 <%= csrf_meta_tags %>
-<title><%= "Spree #{t('administration')}: " %>
-<%= t(controller.controller_name, :default => controller.controller_name.titleize) %></title>
+
+<title>
+  <%= "Spree #{t('administration')}: " %>
+  <%= t(controller.controller_name, :default => controller.controller_name.titleize) %>
+</title>
+
+<!-- Get "Open Sans" font from Google -->
+<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese' rel='stylesheet' type='text/css'>
 
 <%= stylesheet_link_tag 'admin/all' %>
+
 <%= javascript_include_tag 'admin/all' %>
 
 <%= render "spree/admin/shared/translations" %>

data/app/views/spree/admin/shared/_new_resource_links.html.erb

@@ -1,4 +1,5 @@
-<p class="form-buttons" data-hook="buttons">
-  <%= button t('actions.create') %>
-  <%= t(:or) %> <%= link_to t('actions.cancel'), collection_url %>
-</p>
+<div class="form-buttons filter-actions actions" data-hook="buttons">
+  <%= button t('actions.create'), 'icon-ok' %>
+  <span class="or"><%= t(:or) %></span>
+  <%= link_to_with_icon 'icon-remove', t('actions.cancel'), collection_url, :class => 'button' %>
+</div>

data/app/views/spree/admin/shared/_order_details.html.erb

@@ -1,48 +1,49 @@
 <table class="index" data-hook="order_details">
-  <tbody id="line-items" data-hook>
+  <thead id="line-items" data-hook>
     <tr data-hook="order_details_line_items_headers">
       <th><%= t(:item_description) %></th>
       <th class="price"><%= t(:price) %></th>
       <th class="qty"><%= t(:qty) %></th>
       <th class="total"><span><%= t(:total) %></span></th>
     </tr>
-
+  </thead>
+  <tbody>
     <% @order.line_items.each do |item| %>
-      <tr data-hook="order_details_line_item_row">
+      <tr data-hook="order_details_line_item_row" class="<%= cycle('odd', 'even')%>">
         <td width="300"><%= item.variant.product.name %> <%= "(" + variant_options(item.variant) + ")" unless item.variant.option_values.empty? %></td>
-        <td class="price"><%= money item.price %></td>
+        <td class="price"><%= item.variant.display_amount %></td>
         <td class="qty"><%= item.quantity %></td>
-        <td class="total"><span><%= money(item.price * item.quantity) %></span></td>
+        <td class="total"><span><%= item.display_amount %></span></td>
       </tr>
     <% end %>
   </tbody>
-  <tbody id="subtotal" data-hook="order_details_subtotal">
+  <tbody id="subtotal" data-hook="order_details_subtotal"  class="with-border">
     <tr class="total" id="subtotal-row">
       <td colspan="3"><b><%= t(:subtotal) %>:</b></td>
-      <td class="total"><span><%= money @order.item_total %></span></td>
+      <td class="total"><span><%= @order.display_total %></span></td>
     </tr>
   </tbody>
-  <tbody id="order-charges" data-hook="order_details_adjustments">
+  <tbody id="order-charges" data-hook="order_details_adjustments"  class="with-border">
     <% @order.adjustments.eligible.each do |adjustment| %>
     <% next if (adjustment.originator_type == 'Spree::TaxRate') and (adjustment.amount == 0) %>
       <tr class="total">
         <td colspan="3"><strong><%= adjustment.label %>:</strong></td>
-        <td class="total"><span><%= money adjustment.amount %></span></td>
+        <td class="total"><span><%= adjustment.display_amount %></span></td>
       </tr>
     <% end %>
   </tbody>
-  <tbody id="order-total" data-hook="order_details_total">
-    <tr class="total">
-      <td colspan="3"><b><%= t(:order_total) %>:</b></td>
-      <td class="total"><span id="order_total"><%= money @order.total %></span></td>
+  <tbody id="order-total" data-hook="order_details_total" class="with-border grand-total">
+    <tr>
+      <td colspan="3" ><%= t(:order_total) %>:</td>
+      <td class="total" id="order-total"><span id="order_total"><%= @order.display_total %></span></td>
     </tr>
   </tbody>
   <% if order.price_adjustment_totals.present? %>
     <tbody id="price-adjustments" data-hook="order_details_price_adjustments">
       <% @order.price_adjustment_totals.keys.each do |key| %>
-        <tr class="total">
+        <tr>
           <td colspan="3"><strong><%= key %></strong></td>
-          <td class="total"><span><%= money @order.price_adjustment_totals[key] %></span></td>
+          <td class="total"><span><%= @order.price_adjustment_totals[key].display_amount %></span></td>
         </tr>
       <% end %>
     </tbody>

data/app/views/spree/admin/shared/_order_tabs.html.erb

@@ -1,57 +1,71 @@
-<h1><%= t(:order) %> <%= @order.number %></h1>
+<% content_for :page_title do %>
+  <%= t(:order) %> #<%= @order.number %>
+<% end %>
+
+<% content_for :sidebar_title do %>
+  <%= t(:order_information) %>
+<% end %>
 
 <% content_for :sidebar do %>
-  <div id="order_tab_summary" data-hook>
-    <h3 id="order_number" data-hook><%= t(:order) %> #<%= @order.number%></h3>
-    <h5 id="order_status" data-hook><%= t(:status) %>: <%= t(@order.state, :scope => :order_state) %></h5>
-    <h5 id="order_total" data-hook><%= t(:total) %>: <%= money @order.total %></h5>
-    <% if @order.completed? %>
-      <h5 id="shipment_status"><%= t(:shipment) %>: <%= t(@order.shipment_state, :scope => :shipment_states, :default => [:missing, "none"]) %></h5>
-      <h5 id="payment_status"><%= t(:payment) %>: <%= t(@order.payment_state, :scope => :payment_states, :default => [:missing, "none"]) %></h5>
-      <h5 id="date_completed" style="width:100%; float:none;" data-hook><%= t(:date_completed) %>: <%= I18n.l(@order.completed? ? @order.completed_at : @order.created_at) %></h5>
-    <% end %>
-    <br class="clear" />
-  </div>
-  <br class="clear" />
+  <header id="order_tab_summary" data-hook>
+    <dl class="additional-info">
+      <dt id="order_status" data-hook><%= t(:status) %>:</dt>
+      <dd><span class="state <%= @order.state %>"><%= t(@order.state, :scope => :order_state) %></span></dd>
+      <dt data-hook><%= t(:total) %>:</dt>
+      <dd id='order_total'><%= @order.display_total %></dd>
+    
+      <% if @order.completed? %>
+        <dt><%= t(:shipment) %>: </dt>
+        <dd id='shipment_status'><span class="state <%= @order.shipment_state %>"><%= t(@order.shipment_state, :scope => :shipment_states, :default => [:missing, "none"]) %></span></dd>
+        <dt><%= t(:payment) %>: </dt>
+        <dd id='payment_status'><span class="state <%= @order.payment_state %>"><%= t(@order.payment_state, :scope => :payment_states, :default => [:missing, "none"]) %></span></dd>
+        <dt data-hook><%= t(:date_completed) %>:</dt>
+        <dd id='date_complete'><%= pretty_time(@order.completed? ? @order.completed_at : @order.created_at) %></dd>
+      <% end %>
+    </dl>
+  </header>
 
-  <ul class="sidebar" data-hook="admin_order_tabs">
-    <% unless @order.completed? %>
-      <li<%== ' class="active"' if current == 'Order Details' %>>
-        <%= link_to t(:order_details), edit_admin_order_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Customer Details' %>>
-          <%= link_to t(:customer_details), admin_order_customer_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Shipments' %>>
-         <%= link_to t(:shipment), @order.line_items.empty? || !@order.completed? ? 'javascript:$("form").submit();' : edit_admin_order_shipment_url(@order, @order.shipment) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Adjustments' %>>
-         <%= link_to t(:adjustments), @order.line_items.empty? || !@order.completed? ? 'javascript:$("form").submit();' : admin_order_adjustments_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Payments' %>>
-         <%= link_to t(:payment), @order.line_items.empty? || !@order.completed? ? 'javascript:$("form").submit();' : new_admin_order_payment_url(@order) %>
-      </li>
+  <nav class="menu">
+    <ul data-hook="admin_order_tabs">
+      <% unless @order.completed? %>
+        <li<%== ' class="active"' if current == 'Order Details' %>>
+          <%= link_to_with_icon 'icon-edit', t(:order_details), edit_admin_order_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Customer Details' %>>
+          <%= link_to_with_icon 'icon-user', t(:customer_details), admin_order_customer_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Shipments' %>>
+          <%=link_to_with_icon 'icon-road', t(:shipments), @order.line_items.empty? || !@order.completed? ? 'javascript:$("form").submit();' : edit_admin_order_shipment_url(@order, @order.shipment) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Adjustments' %>>
+           <%= link_to_with_icon 'icon-cogs', t(:adjustments), @order.line_items.empty? || !@order.completed? ? 'javascript:$("form").submit();' : admin_order_adjustments_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Payments' %>>
+           <%= link_to_with_icon 'icon-credit-card', t(:payments), @order.line_items.empty? || !@order.completed? ? 'javascript:$("form").submit();' : new_admin_order_payment_url(@order) %>
+        </li>
 
-    <% else %>
-      <li<%== ' class="active"' if current == 'Order Details' %>>
-        <%= link_to t(:order_details), admin_order_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Customer Details' %>>
-        <%= link_to t(:customer_details), admin_order_customer_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Adjustments' %>>
-         <%= link_to t(:adjustments), admin_order_adjustments_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Payments' %>>
-         <%= link_to t(:payments), admin_order_payments_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Shipments' %>>
-         <%= link_to t(:shipments), admin_order_shipments_url(@order) %>
-      </li>
-      <li<%== ' class="active"' if current == 'Return Authorizations' %>>
-         <%= link_to t(:return_authorizations), admin_order_return_authorizations_url(@order) %>
-      </li>
-    <% end %>
-  </ul>
+      <% else %>
+        <li<%== ' class="active"' if current == 'Order Details' %>>
+          <%= link_to_with_icon 'icon-edit', t(:order_details), edit_admin_order_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Customer Details' %>>
+          <%= link_to_with_icon 'icon-user', t(:customer_details), admin_order_customer_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Adjustments' %>>
+          <%= link_to_with_icon 'icon-cogs', t(:adjustments), admin_order_adjustments_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Payments' %>>
+          <%= link_to_with_icon 'icon-credit-card', t(:payments), admin_order_payments_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Shipments' %>>          
+          <%= link_to_with_icon 'icon-road', t(:shipments), admin_order_shipments_url(@order) %>
+        </li>
+        <li<%== ' class="active"' if current == 'Return Authorizations' %>>          
+          <%= link_to_with_icon 'icon-share-alt', t(:return_authorizations), admin_order_return_authorizations_url(@order) %>
+        </li>
+      <% end %>
+    </ul>  
+  </nav>
+  
 
 <% end %>

data/app/views/spree/admin/shared/_product_sub_menu.html.erb

@@ -1,8 +1,8 @@
 <% content_for :sub_menu do %>
-  <ul id="sub_nav" data-hook="admin_product_sub_tabs">
+  <ul id="sub_nav" data-hook="admin_product_sub_tabs" class="inline-menu">
     <%= tab :products, :match_path => '/products' %>
     <%= tab :option_types, :match_path => '/option_types' %>
     <%= tab :properties %>
     <%= tab :prototypes %>
   </ul>
-<% end %>
+<% end %>

data/app/views/spree/admin/shared/_product_tabs.html.erb

@@ -1,24 +1,27 @@
-<h1><%= t(:editing_product) %> &ldquo;<%= @product.name %>&rdquo;</h1>
-
-<% content_for :sidebar do %>
+<% content_for :page_title do %>
+  <%= t(:editing_product) %> &ldquo;<%= @product.name %>&rdquo;
+<% end %>
 
-  <h3><%= @product.name %><span class="sku"><%= @product.sku %></span></h3>
-  <br class="clear" />
+<% content_for :sidebar_title do %>
+  <span class="sku"><%= @product.sku %></span>
+<% end %>
 
-  <ul class="sidebar product-menu" data-hook="admin_product_tabs">
-    <li<%== ' class="active"' if current == 'Product Details' %>>
-      <%= link_to t(:product_details), edit_admin_product_url(@product) %>
-    </li>
-    <li<%== ' class="active"' if current == 'Images' %>>
-      <%= link_to t(:images), admin_product_images_url(@product) %>
-    </li>
-    <li<%== ' class="active"' if current == 'Variants' %>>
-      <%= link_to t(:variants),  admin_product_variants_url(@product) %>
-    </li>
-    <li<%== ' class="active"' if current == 'Product Properties' %>>
-      <%= link_to t(:product_properties), admin_product_product_properties_url(@product) %>
-    </li>
-  </ul>
-  <br class="clear" />
+<% content_for :sidebar do %>
+  <nav class="menu">
+    <ul data-hook="admin_product_tabs">
+      <li<%== ' class="active"' if current == 'Product Details' %>>
+        <%= link_to_with_icon 'icon-edit', t(:product_details), edit_admin_product_url(@product) %>
+      </li>
+      <li<%== ' class="active"' if current == 'Images' %>>
+        <%= link_to_with_icon 'icon-picture', t(:images), admin_product_images_url(@product) %>
+      </li>
+      <li<%== ' class="active"' if current == 'Variants' %>>
+        <%= link_to_with_icon 'icon-th-large', t(:variants),  admin_product_variants_url(@product) %>
+      </li>
+      <li<%== ' class="active"' if current == 'Product Properties' %>>
+        <%= link_to_with_icon 'icon-tasks', t(:product_properties), admin_product_product_properties_url(@product) %>
+      </li>
+    </ul>
+  </nav>
 
 <% end %>

data/app/views/spree/admin/shared/_report_criteria.html.erb

@@ -1,15 +1,17 @@
 <%= search_form_for @search, :url => spree.sales_total_admin_reports_path  do |s| %>
-    <%= label_tag nil, t(:date_range) %><br />
-    <div class="date-range-filter">
-      <div class="left sub-field">
-        <%= s.text_field :created_at_gt, :class => 'datepicker' %><br />
-        <%= label_tag nil, t(:start), :class => 'sub' %>
-      </div>
-      <div class="right sub-field">
-        <%= s.text_field :created_at_lt, :class => 'datepicker' %><br />
-        <%= label_tag nil, t(:stop) %>
-      </div>
+    <div class="date-range-filter field align-center">
+        <%= label_tag nil, t(:start), :class => 'inline' %>
+        <%= s.text_field :created_at_gt, :class => 'datepicker datepicker-from' %>
+        
+        <span class="range-divider">
+          <i class="icon-arrow-right"></i>
+        </span>
+
+        <%= s.text_field :created_at_lt, :class => 'datepicker datepicker-to' %>
+        <%= label_tag nil, t(:end), :class => 'inline' %>
     </div>
 
-    <p><%= button t(:search) %></p>
+    <div class="actions filter-actions">
+      <%= button t(:search), 'icon-search'  %>
+    </div>
 <% end %>

data/app/views/spree/admin/shared/_routes.html.erb

@@ -1,8 +1,7 @@
 <script>
   Spree.routes = <%== {
-    :product_search       => spree.admin_products_path(:format => 'json'),
+    :variants_search       => spree.admin_search_variants_path(:format => 'json'),
     :taxon_search         => spree.search_admin_taxons_path(:format => 'json'),
-    :product_search_basic => spree.admin_products_path(:format => 'json', :json_format => 'basic', :limit => 10),
     :user_search          => spree.admin_search_users_path(:format => 'json')
   }.to_json %>;
 </script>

data/app/views/spree/admin/shared/_tabs.html.erb

@@ -1,4 +1,5 @@
-<%= tab :orders, :payments, :creditcard_payments, :shipments, :credit_cards, :return_authorizations %>
-<%= tab :products , :option_types, :properties, :prototypes, :variants, :product_properties, :taxons %>
-<%= tab :reports %>
-<%= tab :configurations, :general_settings, :mail_methods, :tax_categories, :zones, :states, :payment_methods, :inventory_settings, :taxonomies, :shipping_methods, :trackers, :label => 'configuration' %>
+<%= tab :overview, :route => :admin, :icon => 'icon-dashboard' %>
+<%= tab :orders, :payments, :creditcard_payments, :shipments, :credit_cards, :return_authorizations, :icon => 'icon-shopping-cart' %>
+<%= tab :products , :option_types, :properties, :prototypes, :variants, :product_properties, :taxons, :icon => 'icon-th-large' %>
+<%= tab :reports, :icon => 'icon-file'  %>
+<%= tab :configurations, :general_settings, :mail_methods, :tax_categories, :zones, :states, :payment_methods, :inventory_settings, :taxonomies, :shipping_methods, :trackers, :label => 'configuration', :icon => 'icon-wrench', :url => edit_admin_general_settings_path %>

data/app/views/spree/admin/shared/_translations.html.erb

@@ -3,24 +3,28 @@
   { :date_picker    => I18n.t(:js_format,
                               :scope => 'spree.date_picker',
                               :default => 'yy/mm/dd'),
-    :abbr_day_names => I18n.t(:abbr_day_names, :scope => :date),
-    :month_names    => I18n.t(:month_names, :scope => :date).reject(&:blank?),
-    :previous       => I18n.t(:previous),
-    :next           => I18n.t(:next),
-    :no_results     => I18n.t(:no_results),
-    :type_to_search => I18n.t(:type_to_search),
-    :searching      => I18n.t(:searching),
-    :sku            => I18n.t(:sku),
-    :on_hand        => I18n.t(:on_hand),
-    :add            => I18n.t(:add),
-    :paste          => I18n.t(:paste),
-    :edit           => I18n.t(:edit),
-    :rename         => I18n.t(:rename),
-    :remove         => I18n.t(:remove),
-    :cut            => I18n.t(:cut),
-    :loading        => I18n.t(:loading),
-    :confirm_delete => I18n.t(:confirm_delete),
-    :are_you_sure_delete => I18n.t(:are_you_sure_delete)
+    :abbr_day_names      => I18n.t(:abbr_day_names, :scope => :date),
+    :add                 => I18n.t(:add),
+    :are_you_sure_delete => I18n.t(:are_you_sure_delete),
+    :confirm_delete      => I18n.t(:confirm_delete),
+    :cut                 => I18n.t(:cut),
+    :destroy             => I18n.t(:destroy),
+    :edit                => I18n.t(:edit),
+    :loading             => I18n.t(:loading),
+    :month_names         => I18n.t(:month_names, :scope => :date).delete_if(&:blank?),
+    :more                => I18n.t(:more),
+    :name                => I18n.t(:name),
+    :next                => I18n.t(:next),
+    :no_results          => I18n.t(:no_results),
+    :on_hand             => I18n.t(:on_hand),
+    :paste               => I18n.t(:paste),
+    :previous            => I18n.t(:previous),
+    :remove              => I18n.t(:remove),
+    :rename              => I18n.t(:rename),
+    :searching           => I18n.t(:searching),
+    :sku                 => I18n.t(:sku),
+    :type_to_search      => I18n.t(:type_to_search),
+    :value               => I18n.t(:value)
   }.to_json
 %>
 </script>

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

@@ -1,38 +1,41 @@
 <div data-hook="admin_shipment_form_fields">
   <% unless @shipment.order.cart? %>
     <table class="index" style="width:100%;" data-hook="admin_shipment_form_inventory_units">
-      <tr data-hook="shipments_header">
-        <th style="width:130px;"><%= t(:include_in_shipment) %></th>
-        <th><%= t(:sku) %></th>
-        <th><%= t(:item_description) %></th>
-        <th><%= t(:status) %></th>
-        <th><%= t(:note) %></th>
-      </tr>
-
-      <% @shipment.order.inventory_units.each do |inventory_unit| %>
-        <tr data-hook="shipments_row">
-          <td style="text-align:center;">
-            <%= check_box_tag "inventory_units[#{inventory_unit.id}]",
-                              :true,
-                              (inventory_unit.shipment == @shipment),
-                              { :disabled => %w(shipped backordered returned).include?(inventory_unit.state),
-                                :class => 'inventory_unit'} %>
-          </td>
-          <td style="vertical-align:top; width:120px;"><%= inventory_unit.variant.sku %></td>
-          <td style="width:300px;">
-            <%=inventory_unit.variant.product.name %>
-            <%= '(' + variant_options(inventory_unit.variant) + ')' unless inventory_unit.variant.option_values.empty? %>
-          </td>
-          <td><%= t(inventory_unit.state) %></td>
-          <td>
-            <% if inventory_unit.shipment == @shipment %>
-              <%= t(:included_in_this_shipment) %>
-            <% elsif !inventory_unit.shipment.nil? %>
-              <%= t(:included_in_other_shipment) %> - <%= link_to inventory_unit.shipment.number, edit_admin_order_shipment_url(inventory_unit.order, inventory_unit.shipment) %>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
+      <thead>
+        <tr data-hook="shipments_header">
+          <th style="width:130px;"><%= t(:include_in_shipment) %></th>
+          <th><%= t(:sku) %></th>
+          <th><%= t(:item_description) %></th>
+          <th><%= t(:status) %></th>
+          <th><%= t(:note) %></th>
+        </tr>  
+      </thead>
+      <tbody>
+        <% @shipment.order.inventory_units.each do |inventory_unit| %>
+          <tr data-hook="shipments_row" class="<%= cycle('odd', 'even')%>">
+            <td style="text-align:center;">
+              <%= check_box_tag "inventory_units[#{inventory_unit.id}]",
+                                :true,
+                                (inventory_unit.shipment == @shipment),
+                                { :disabled => %w(shipped backordered returned).include?(inventory_unit.state),
+                                  :class => 'inventory_unit'} %>
+            </td>
+            <td style="vertical-align:top; width:120px;"><%= inventory_unit.variant.sku %></td>
+            <td style="width:300px;">
+              <%=inventory_unit.variant.product.name %>
+              <%= '(' + variant_options(inventory_unit.variant) + ')' unless inventory_unit.variant.option_values.empty? %>
+            </td>
+            <td><%= t(inventory_unit.state) %></td>
+            <td>
+              <% if inventory_unit.shipment == @shipment %>
+                <%= t(:included_in_this_shipment) %>
+              <% elsif !inventory_unit.shipment.nil? %>
+                <%= t(:included_in_other_shipment) %> - <%= link_to inventory_unit.shipment.number, edit_admin_order_shipment_url(inventory_unit.order, inventory_unit.shipment) %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
     </table>
   <% end %>
 
@@ -42,34 +45,27 @@
     <% end %>
   </div>
 
-  <div data-hook="admin_shipment_form_details">
-    <table class="index">
-      <tr>
-        <th colspan="8"><%= t(:shipment_details) %></th>
-      </tr>
-      <tr>
-        <td>
+  <fieldset data-hook="admin_shipment_form_details" class="no-border-bottom">
+      <legend><%= t(:shipment_details) %></legend>
+
+      <div class="block-table">
+        <div class="field table-cell">
           <%= shipment_form.label :shipping_method_id, t(:shipping_method) + ':' %>
-        </td>
-        <td>
-          <%= shipment_form.select :shipping_method_id,
-                                          @shipping_methods.map {|sm| ["#{sm.name} - #{sm.zone.name}", sm.id] } %>
-        </td>
-        <td>
+          <%= shipment_form.select :shipping_method_id, @shipping_methods.map {|sm| ["#{sm.name} - #{sm.zone.name}", sm.id] }, {}, {:class => 'select2 fullwidth'} %>
+        </div>
+
+        <div class="field table-cell">
           <%= shipment_form.label :tracking, t(:tracking) + ':' %>
-        </td>
-        <td><%= shipment_form.text_field :tracking %></td>
-      </tr>
-      <% if Spree::Config[:shipping_instructions] %>
-        <tr>
-          <td>
+          <%= shipment_form.text_field :tracking, :class => 'fullwidth' %>
+        </div>
+          
+        <% if Spree::Config[:shipping_instructions] %>
+          <div class="field table-cell">
             <%= shipment_form.label :special_instructions, t(:special_instructions) + ':' %>
-          </td>
-          <td colspan="3">
-              <%= shipment_form.text_area :special_instructions %>
-          </td>
-        </tr>
-      <% end %>
-    </table>
+            <%= shipment_form.text_area :special_instructions, :class => 'fullwidth' %>
+          </div>
+        <% end %>
+      </div>
+    
   </div>
 </div>