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.
solidusio · Mar 24, 2017 · 0dcc028 · 0dcc028
1 parent 32e18af
commit 0dcc028
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git 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
@@ -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>