Skip to content

Commit

Permalink
Merge pull request #2159 from jhawthorn/admin-new-table-styles
Browse files Browse the repository at this point in the history
New Admin table styles
  • Loading branch information
jhawthorn authored Aug 17, 2017
2 parents 9f0a68e + f772767 commit 1a82b1b
Show file tree
Hide file tree
Showing 74 changed files with 269 additions and 345 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<tr>
<td><strong>{{ label }}:</strong></td>
<td class="total align-center"><span>{{ amount }}</span></td>
<td class="total"><span>{{ amount }}</span></td>
</tr>
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@
<strong>{{ t "sku" }}:</strong> {{ line_item.variant.sku }}
</td>
{{/if}}
<td class="line-item-price align-center">
<td class="line-item-price">
{{ line_item.single_display_amount }}
</td>
{{#if editing}}
<td class="line-item-qty-edit">
<input type="number" name="quantity" value="{{ line_item.quantity }}" min="0" class="line_item_quantity" size="5">
</td>
{{else}}
<td class="line-item-qty-show align-center">
<td class="line-item-qty-show">
{{ line_item.quantity }}
</td>
{{/if}}
<td class="line-item-total align-center">
<td class="line-item-total">
{{ line_item.display_amount }}
</td>
<td class="cart-line-item-delete actions" data-hook="cart_line_item_delete">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<td class="align-center">{{stockLocationName}}</td>
<td class="align-center">
<td>{{stockLocationName}}</td>
<td>
<input id="backorderable-{{id}}"
name="backorderable"
type="checkbox"
Expand All @@ -8,7 +8,7 @@
{{#if backorderable}} checked="checked" {{/if}}
>
</td>
<td class="align-center">
<td>
{{#if editing}}
<input class="fullwidth" name="count_on_hand" type="number" value="{{count_on_hand}}">
{{else}}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<tr class='new-row' data-transfer-item-id="{{id}}">
<td class="align-center no-padding">
<td class="no-padding">
<div class='variant-container' data-variant-id="{{variantId}}">
<div class='variant-image'>
{{> _image image=variantImage size="small" alt=variantName }}
Expand All @@ -18,7 +18,7 @@
</div>
</div>
</td>
<td class="align-center">
<td>
<table class='stock-variant-field-table'>
{{#each variantOptions}}
<tr>
Expand All @@ -28,7 +28,7 @@
{{/each}}
</table>
</td>
<td class='align-center' id="number-update-{{id}}">
<td id="number-update-{{id}}">
{{#if isReceiving }}
<span class='js-number-update-text'>{{receivedQuantity}}</span>
<input class="fullwidth js-number-update-input" name="received_quantity" type="number" value="">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.inline-editable-table tr:not(:hover):not(.editing) {
input {
border: 1px solid transparent;
color: inherit;
background-color: transparent;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,6 @@
}

> tbody {
> tr {
&:hover {
.stock-variant-field-table {
td {
background-color: $color-1;
}
}
}
}
.variant-image {
width: 31%;
padding: 0 2%;
Expand All @@ -34,8 +25,5 @@
.variant-details {
float: left;
}
.variant-container {
padding-top: 10px;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,35 +1,10 @@
#listing_product_stock {
margin-left: 0px;
margin-right: 0px;

th {
border-bottom: 1px solid $color-border;
tbody + tbody {
border-top-width: 1px;
}

> tbody {
> tr.stock-item-edit-row {
td {
background-color: $color-tbl-even;
border-left: none;
}
&:nth-child(even) td {
/* An nth-even child is actually an odd row */
background-color: $color-tbl-odd;
}
}
> tr {
&:first-child td {
border-top: none;
}
}
}
td {
vertical-align: middle;

&.location-name-cell {
border-left: none;
}

input.error {
border-color: theme-color("danger");
}
Expand All @@ -39,10 +14,4 @@
border: 1px solid theme-color("danger");
}
}

tr:hover {
.stock-variant-field-table td {
background-color: transparent;
}
}
}
58 changes: 10 additions & 48 deletions backend/app/assets/stylesheets/spree/backend/shared/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,20 @@ table {
@extend .table;
border-spacing: 0;

th, td {
border-right: 1px solid $color-border;
border-bottom: 1px solid $color-border;
&.sortable td {
vertical-align: middle;
text-overflow: ellipsis;

&:first-child {
border-left: 1px solid $color-border;
}

a {
border-bottom: 1px dotted lighten($link-color, 10);
}

&:hover {
border-color: lighten($link-hover-color, 10);
}
}
th, td {
text-overflow: ellipsis;

.handle {
@extend .fa;
@extend .fa-bars;
cursor: move;
display: block !important;
text-align: center;
padding-right: 0;
padding: 3px 0;
}

&.actions {
Expand Down Expand Up @@ -98,17 +90,6 @@ table {
input[type="text"] {
width: 100%;
}

&.no-border {
border-right: none;
}

.handle {
@extend .fa;
@extend .fa-bars;
cursor: move;
}

}

&.no-borders {
Expand All @@ -121,31 +102,12 @@ table {
white-space: nowrap;
}

thead {
th {
border-top: 1px solid $color-border;
border-bottom: none;
background-color: $color-tbl-thead;
text-align: center;
font-weight: $font-weight-bold;
vertical-align: top;
}
th a {
color: $color-4;
}

tbody {
tr {
&:first-child th,
&:first-child td {
border-top: 1px solid $color-border;
}
&.even td {
background-color: $color-tbl-even;
}

&:hover td {
background-color: very-light($color-3, 5);
}

&.deleted td {
background-color: very-light(theme-color("danger"), 6);
border-color: very-light(theme-color("danger"), 15);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@
</thead>
<tbody>
<% @adjustment_reasons.each do |adjustment_reason| %>
<tr id="<%= spree_dom_id adjustment_reason %>" data-hook="adjustment_reason_row" class="<%= cycle('odd', 'even')%>">
<td class="align-center">
<tr id="<%= spree_dom_id adjustment_reason %>" data-hook="adjustment_reason_row">
<td>
<%= adjustment_reason.name %>
</td>
<td class="align-center">
<td>
<span class="pill pill-<%= adjustment_reason.active? ? 'active' : 'inactive' %>">
<%= Spree.t(adjustment_reason.active? ? :active : :inactive) %>
</span>
Expand Down
10 changes: 5 additions & 5 deletions backend/app/views/spree/admin/adjustments/_adjustment.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
%>
<tr id="<%= spree_dom_id(adjustment) %>"
data-hook="adjustment_row"
class="<%= cycle('odd', 'even')%> <%= "adjustment-ineligible" if !adjustment.eligible? %>"
class="<%= "adjustment-ineligible" if !adjustment.eligible? %>"
>
<td class="align-center"><%= display_adjustable(adjustment.adjustable) %></td>
<td class="align-center"><%= adjustment.label %></td>
<td class="align-center"><%= adjustment.display_amount.to_html %></td>
<td class="align-center"><%= adjustment_state(adjustment) %></td>
<td><%= display_adjustable(adjustment.adjustable) %></td>
<td><%= adjustment.label %></td>
<td><%= adjustment.display_amount.to_html %></td>
<td><%= adjustment_state(adjustment) %></td>
<td class='actions'>
<% unless adjustment.finalized? %>
<% if can?(:update, adjustment) %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
<tbody>
<%= render partial: "adjustment", collection: @adjustments %>
<tr data-hook="adjustment_buttons">
<td class="align-center" colspan='4'>
<td class="align-right" colspan="2" style="width: 50%">
<% if can? :update, Spree::Adjustment %>
<div>
<%= button_to Spree.t(:unfinalize_all_adjustments), adjustments_unfinalize_admin_order_path(@order), method: :get %>
</div>
<div>
<%= button_to Spree.t(:finalize_all_adjustments), adjustments_finalize_admin_order_path(@order), method: :get %>
</div>
<%= button_to Spree.t(:unfinalize_all_adjustments), adjustments_unfinalize_admin_order_path(@order), method: :get %>
<% end %>
</td>
<td colspan="2" style="width: 50%">
<% if can? :update, Spree::Adjustment %>
<%= button_to Spree.t(:finalize_all_adjustments), adjustments_finalize_admin_order_path(@order), method: :get %>
<% end %>
</td>
<td class='actions'>&nbsp;</td>
Expand Down
10 changes: 5 additions & 5 deletions backend/app/views/spree/admin/cancellations/index.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@

<thead>
<th colspan="2"><%= Spree::LineItem.human_attribute_name(:description) %></th>
<th><%= Spree::OrderCancellations.human_attribute_name(:quantity) %></th>
<th class="align-center"><%= Spree::OrderCancellations.human_attribute_name(:quantity) %></th>
<th><%= Spree::OrderCancellations.human_attribute_name(:state) %></th>
<th><%= Spree::OrderCancellations.human_attribute_name(:shipment) %></th>
<th><%= Spree::OrderCancellations.human_attribute_name(:cancel) %></th>
<th class="align-right"><%= Spree::OrderCancellations.human_attribute_name(:cancel) %></th>
</thead>

<tbody>
Expand All @@ -34,13 +34,13 @@
<% end %>
</td>
<td class="inventory-unit-quantity align-center">1</td>
<td class="inventory-unit-state align-center">
<td class="inventory-unit-state">
<span class="pill pill-<%= inventory_unit.state %>">
<%= Spree.t(inventory_unit.state, scope: :inventory_states) %>
</span>
</td>
<td class="inventory-unit-shipment align-center"><%= inventory_unit.shipment.number %></td>
<td class="inventory-unit-cancel align-center">
<td class="inventory-unit-shipment"><%= inventory_unit.shipment.number %></td>
<td class="inventory-unit-cancel align-right">
<%= check_box_tag 'inventory_unit_ids[]', inventory_unit.id %>
</td>
</tr>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</thead>
<tbody>
<% reimbursements.each do |reimbursement| %>
<tr id="<%= spree_dom_id(reimbursement) %>" data-hook="reimbursement_row" class="<%= cycle('odd', 'even')%>">
<tr id="<%= spree_dom_id(reimbursement) %>" data-hook="reimbursement_row">
<td>
<% if reimbursement.reimbursed? %>
<%= link_to reimbursement.number, url_for([:admin, @order, reimbursement]) %>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,19 @@
<td>
<%= return_item.inventory_unit.variant.sku %>
</td>
<td class="align-center">
<td>
<%= return_item.display_amount %>
</td>
<td class="align-center">
<td>
<%= reimbursement_type_name(return_item.preferred_reimbursement_type) %>
</td>
<td class="align-center">
<td>
<%= return_item.exchange_variant.try(:exchange_name) %>
</td>
<td class="align-center">
<td>
<%= return_item.acceptance_status_errors %>
</td>
<td class-"align-center">
<td>
<span class="pill pill-<%= return_item.reception_status %>">
<%= Spree.t(
return_item.reception_status,
Expand All @@ -47,7 +47,7 @@
</span>
</td>
<% unless return_item.received? %>
<td class='align-center'>
<td>
<%= form_for [:admin, return_item] do |f| %>
<%= f.hidden_field 'reception_status_event', value: 'receive' %>
<%= f.button Spree.t('actions.receive'), class: 'with-tip', "data-action" => 'save' %>
Expand Down
Loading

0 comments on commit 1a82b1b

Please sign in to comment.