From 0dcc02823fd73989eeca24a89b212c4027976a8e Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Sun, 19 Mar 2017 15:52:25 +0100
Subject: [PATCH] Add new admin table layout

The content of all table headers, state columns and action cells have text wrapping disabled now. For cases where we want to disble text wrapping in data cells we provide the `.no-wrap` class.

This also makes (very sensitive) use of the Bootstrap default table style. The main advantage is that Bootstrap uses rem (a relative unit) for table cell padding. As we plan to raise the body font size this is a huge win for us.
---
 .../spree/backend/shared/_tables.scss         | 12 ++++-----
 .../topics/tables/_building_tables.html.erb   | 27 ++++++++++++++++---
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss
index ad39866d57f..c6c79090b40 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss
@@ -1,10 +1,8 @@
 table {
-  width: 100%;
-  margin-bottom: 15px;
-  border-collapse: separate;
+  // Extend all tables with Bootstrap's default table style
+  @extend .table;
 
   th, td {
-    padding: 7px 5px;
     border-right: 1px solid $color-border;
     border-bottom: 1px solid $color-border;
     vertical-align: middle;
@@ -128,14 +126,16 @@ table {
 
   }
 
+  th, td.actions, td.no-wrap, .state {
+    white-space: nowrap;
+  }
+
   thead {
     th {
-      padding: 10px;
       border-top: 1px solid $color-border;
       border-bottom: none;
       background-color: $color-tbl-thead;
       text-align: center;
-      font-size: 90%;
       font-weight: $font-weight-bold;
     }
   }
diff --git a/backend/app/views/spree/admin/style_guide/topics/tables/_building_tables.html.erb b/backend/app/views/spree/admin/style_guide/topics/tables/_building_tables.html.erb
index 7e88dcfec95..f4a1680b3e9 100644
--- a/backend/app/views/spree/admin/style_guide/topics/tables/_building_tables.html.erb
+++ b/backend/app/views/spree/admin/style_guide/topics/tables/_building_tables.html.erb
@@ -3,6 +3,7 @@
     <thead>
       <tr>
         <th colspan="2">Item Description</th>
+        <th>Long Item Text</th>
         <th>Price</th>
         <th>Quantity</th>
         <th>Total</th>
@@ -14,27 +15,45 @@
         <td class="item-image">
           <img src="http://placehold.it/50x50">
         </td>
-        <td>
+        <td class="no-wrap">
           Ruby on Rails Bag<br>
           SKU: ROR-00012
         </td>
+        <td>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nihil illinc huc pervenit.
+          Sed quae tandem ista ratio est? Ergo ita: non posse honeste vivi, nisi honeste vivatur?
+          Scisse enim te quis coarguere possit? Duo Reges: constructio interrete.
+          Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter.
+          Sed in rebus apertissimis nimium longi sumus.
+          Quod si ita se habeat, non possit beatam praestare vitam sapientia.
+          Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.
+        </td>
         <td class="align-center">$22.99</td>
-        <td class="align-center">1 x on hand</td>
+        <td class="align-center no-wrap">1 x on hand</td>
         <td class="align-center">$22.99</td>
       </tr>
       <tr>
-        <td colspan="4">UPS Ground (USD)</td>
+        <td colspan="5">UPS Ground (USD)</td>
         <td class="align-center">
           <span>$5.00</span>
         </td>
       </tr>
       <tr>
-        <td colspan="5">No tracking details provided.</td>
+        <td colspan="6">No tracking details provided.</td>
       </tr>
     </tbody>
   </table>
 <%- end %>
 
+<p>
+  Tables are the primary UI element in the Solidus admin.
+  By default the content of all table headers have text wrapping disabled.
+</p>
+<p>
+  For cases where also data cells need to have text wrapping disabled we provide
+  the <code>.no-wrap</code> class.
+</p>
+
 <div class="style-guide-result">
   <%= snippet %>
 </div>