Improved user product category layout

app/assets/javascripts/user/app/templates/product_orders.emblem

@@ -1,5 +1,3 @@
-hr.hide-for-medium-up
-.clearfix
 .panel
   ul.product-orders
     each product_order in product_orders

app/assets/javascripts/user/app/templates/table.emblem

@@ -13,42 +13,40 @@
       button.join-table-button{action "joinOccupiedTable"}=t 'join_request.requestor.join_this_table'
   if tableCanTakeOrders
     .large-6.columns
+      each product_category in supplier.product_categories
+        .product-category-container
+          if product_category.products
+            h4.product_category-title{action "toggleProductCategory" product_category}
+              if product_category.collapsed
+                span.icon.collapsed
+              else
+                span.icon
+              = product_category.name
+            unless product_category.collapsed
+              ul.product_category-products
+                each product in product_category.products
+                  li class="order-product-#{unbound product.id}"
+                    if product.description
+                      button.show-product-description{action "showProductDescription" product}
+                        span
+                    else
+                      span.no-product-description
+                    a{action "addProduct" product}= product.name
+                    button.add-product-to-list{action "addProduct" product}
+                      span
+                    span.product-price.currency=currency product.price
+    .large-6.columns= render 'product_orders'
+  else
+    .large12
       each product_category in supplier.product_categories
         if product_category.products
-          hr
+          .product_category-container
-          h4.product_category-title{action "toggleProductCategory" product_category}
+            h4.product-category-title= product_category.name
-            if product_category.collapsed
-              span.icon.collapsed
-            else
-              span.icon
-            = product_category.name
-          hr
-          unless product_category.collapsed
             ul.product_category-products
               each product in product_category.products
                 li class="order-product-#{unbound product.id}"
                   if product.description
                     button.show-product-description{action "showProductDescription" product}
                       span
-                  else
+                  span= product.name
-                    span.no-product-description
+                  span.right.currency=currency product.price
-                  a{action "addProduct" product}= product.name
-                  button.add-product-to-list{action "addProduct" product}
-                    span
-                  span.product-price.currency=currency product.price
-    .large-6.columns= render 'product_orders'
-  else
-    .large12
-      each product_category in supplier.product_categories
-        if product_category.products
-          hr
-          h4= product_category.name
-          hr
-          ul.product_category-products
-            each product in product_category.products
-              li class="order-product-#{unbound product.id}"
-                if product.description
-                  button.show-product-description{action "showProductDescription" product}
-                    span
-                span= product.name
-                span.right.currency=currency product.price

app/assets/stylesheets/user/foundation/application.css.sass

@@ -7,7 +7,6 @@
 @import ./qmodal
 @import ./display_fields
 @import ./qproduct_orders
-@import ./qproduct_categories
 @import ./form_additions
 @import ./qindex
 @import ./qlists

app/assets/stylesheets/user/foundation/components/_product_categories.css.sass

@@ -1,14 +1,20 @@
+.product-category-container
+  border-top: 1px solid #ddd
+  border-bottom: 1px solid #ddd
+  margin-bottom: 5px
+  h4.product_category-title
+    cursor: pointer
+    margin-bottom: 5px
+    .icon
+      @extend .fa
+      @extend .fa-arrow-down
+      color: #ccc
+      padding-right: 10px
+      &.collapsed
+        @extend .fa-arrow-right
 ul.product_category-products
   list-style: none
-.product_category-title
+  margin: 0 0 5px rem-calc(1.0)
-  cursor: pointer
-  .icon
-    @extend .fa
-    @extend .fa-arrow-down
-    color: #ccc
-    padding-right: 10px
-    &.collapsed
-      @extend .fa-arrow-right
 .product_category-products
   .product-price
     float: right