From 8b7544e42918372c4a91e1cce8608904511f4b77 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 17 Mar 2017 18:11:58 +0100
Subject: [PATCH] Convert admin orders table into full width layout

The admin orders table is too narrow on modern screen sizes. There is plenty of space we could use to display the full information on the orders table.

When adapting the full width layout we get too wide columns on the search form, though. This is fixed by utilizing different column sizes for the viewports. The result is pretty good without moving around any html elements (what potentially could break admin overrides of extensions or shops)
---
 .../app/views/spree/admin/orders/index.html.erb    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/backend/app/views/spree/admin/orders/index.html.erb b/backend/app/views/spree/admin/orders/index.html.erb
index 407f0a24504..bb9ead4c6ce 100644
--- a/backend/app/views/spree/admin/orders/index.html.erb
+++ b/backend/app/views/spree/admin/orders/index.html.erb
@@ -1,3 +1,5 @@
+<% admin_layout "full-width" %>
+
 <% admin_breadcrumb(plural_resource_name(Spree::Order)) %>
 
 
@@ -15,7 +17,7 @@
   <div data-hook="admin_orders_index_search">
     <%= search_form_for [:admin, @search] do |f| %>
       <div class="row">
-        <div class="field-block col-xs-3">
+        <div class="field-block col-xs-12 col-md-6 col-lg-4 col-xl-3">
           <div class="date-range-filter field">
             <%= label_tag :q_created_at_gt, Spree.t(:date_range) %>
             <div class="date-range-fields">
@@ -46,9 +48,9 @@
 
         </div>
 
-        <div class="col-xs-6">
+        <div class="col-xs-12 col-md-6 col-lg-4 col-xl-6">
           <div class="row">
-            <div class="col-xs-6">
+            <div class="col-xs-12 col-xl-6">
               <div class="field">
                 <%= label_tag :q_number_cont, Spree.t(:order_number, number: '') %>
                 <%= f.text_field :number_cont %>
@@ -60,7 +62,7 @@
               </div>
             </div>
 
-            <div class="col-xs-6">
+            <div class="col-xs-12 col-xl-6">
               <div class="field">
                 <%= label_tag :q_bill_address_firstname_start, Spree.t(:first_name_begins_with) %>
                 <%= f.text_field :bill_address_firstname_start, size: 25 %>
@@ -71,7 +73,7 @@
               </div>
             </div>
 
-            <div class="col-xs-12">
+            <div class="col-xs-12 col-xl-6">
               <div class="field" data-hook="sku-select">
                 <%= label_tag :q_line_items_variant_id_in, Spree.t(:variant) %>
                 <%= f.text_field :line_items_variant_id_in, class: "variant_autocomplete fullwidth" %>
@@ -80,7 +82,7 @@
           </div>
         </div>
 
-        <div class="col-xs-3">
+        <div class="col-xs-12 col-md-6 col-lg-4 col-xl-3">
           <% if Spree::Store.count > 1 %>
             <div class="field">
               <%= label_tag nil, Spree.t(:store) %>