mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-03-10 03:30:22 +00:00
BPUR: Visually differentiate products and variants in table
This commit is contained in:
@@ -68,6 +68,8 @@ productsApp.directive('ngTrackVariant', function(){
|
||||
productsApp.directive('ngToggleVariants',function(){
|
||||
return {
|
||||
link: function(scope,element,attrs){
|
||||
if (scope.displayProperties[scope.product.id].showVariants) { element.removeClass('icon-chevron-right'); element.addClass('icon-chevron-down'); }
|
||||
else { element.removeClass('icon-chevron-down'); element.addClass('icon-chevron-right'); }
|
||||
element.bind('click', function(){
|
||||
scope.$apply(function(){
|
||||
if (scope.displayProperties[scope.product.id].showVariants){
|
||||
|
||||
@@ -5,3 +5,18 @@
|
||||
th.firstcol, td.firstcol {
|
||||
border-left: 1px solid #cee1f4;
|
||||
}
|
||||
|
||||
tbody.odd {
|
||||
tr.product { td { background-color: white; } }
|
||||
tr.variant.odd { td { background-color: lighten(#eff5fc, 3); } }
|
||||
tr.variant.even { td { background-color: white; } }
|
||||
}
|
||||
tbody.even {
|
||||
tr.product { td { background-color: darken(#eff5fc, 1); } }
|
||||
tr.variant.odd { td { background-color: lighten(#eff5fc, 2); } }
|
||||
tr.variant.even { td { background-color: darken(#eff5fc, 1); } }
|
||||
}
|
||||
|
||||
tbody tr.product td.actions { background-color: transparent; }
|
||||
tbody tr.variant td.actions { background-color: transparent; }
|
||||
tbody tr.variant td { padding: 5px 10px; }
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
%th On Hand
|
||||
%th Av. On
|
||||
%th.actions
|
||||
%tbody{ 'ng-repeat' => 'product in products | filter:query' }
|
||||
%tr
|
||||
%tbody{ 'ng-repeat' => 'product in products | filter:query', 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'" }
|
||||
%tr.product
|
||||
%td.actions
|
||||
%a{ 'ng-toggle-variants' => 'true', :class => "view-variants icon-chevron-right", 'ng-show' => 'hasVariants(product)' }
|
||||
%td.firstcol
|
||||
@@ -46,7 +46,7 @@
|
||||
%a{ 'ng-click' => 'editWarn(product)', :class => "edit-product icon-edit no-text" }
|
||||
%a{ 'ng-click' => 'cloneProduct(product)', :class => "clone-product icon-copy no-text" }
|
||||
%a{ 'ng-click' => 'deleteProduct(product)', :class => "delete-product icon-trash no-text" }
|
||||
%tr{ 'ng-repeat' => 'variant in product.variants', 'ng-show' => 'displayProperties[product.id].showVariants' }
|
||||
%tr.variant{ 'ng-repeat' => 'variant in product.variants', 'ng-show' => 'displayProperties[product.id].showVariants', 'ng-class-even' => "'even'", 'ng-class-odd' => "'odd'" }
|
||||
%td.actions
|
||||
%a{ :class => "variant-item icon-caret-right" }
|
||||
%td.firstcol
|
||||
|
||||
Reference in New Issue
Block a user