Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New admin table layout #1786

Merged
merged 1 commit into from
Mar 27, 2017
Merged

New admin table layout #1786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions backend/app/assets/stylesheets/spree/backend/shared/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
table {
width: 100%;
margin-bottom: 15px;
border-collapse: separate;
// Extend all tables with Bootstrap's default table style
@extend .table;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't worse than what was here before (bootstrap's .table sets pretty much the same CSS as we already had here). It would be ideal if we were to move away from styling all table elements like this and instead required a class. That way we avoid needing to un-style the styles when we want a table to be "normal".

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would a "normal" table look like? Browser default? I always thought this is our default table style. But I understand your concern. Im also fine with adding a table class to all tables. The change set will be much larger then, though.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can deal with this later. It's not a new issue and shouldn't block this PR.


th, td {
padding: 7px 5px;
border-right: 1px solid $color-border;
border-bottom: 1px solid $color-border;
vertical-align: middle;
Expand Down Expand Up @@ -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;
}
}
Expand Down
27 changes: 23 additions & 4 deletions backend/app/views/spree/admin/style_guide/topics/tables/_building_tables.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down