Merge pull request #1786 from tvdeyen/admin-table-layout

New admin table layout
solidusio · Mar 27, 2017 · 9c4c129 · 9c4c129
2 parents bcf6525 + 0dcc028
commit 9c4c129
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>