From a2618eb42ed708d2dabec1c91651be86dc9db225 Mon Sep 17 00:00:00 2001
From: Benjamin ter Kuile <bterkuile@gmail.com>
Date: Fri, 5 Sep 2014 15:06:35 +0200
Subject: [PATCH] Improved user product category layout

---
 .../user/app/templates/product_orders.emblem  |  2 -
 .../user/app/templates/table.emblem           | 60 +++++++++----------
 .../user/foundation/application.css.sass      |  1 -
 .../_product_categories.css.sass}             | 24 +++++---
 4 files changed, 44 insertions(+), 43 deletions(-)
 rename app/assets/stylesheets/user/foundation/{_qproduct_categories.css.sass => components/_product_categories.css.sass} (62%)

diff --git a/app/assets/javascripts/user/app/templates/product_orders.emblem b/app/assets/javascripts/user/app/templates/product_orders.emblem
index ef37d9dd..f2ec51ec 100644
--- a/app/assets/javascripts/user/app/templates/product_orders.emblem
+++ b/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
diff --git a/app/assets/javascripts/user/app/templates/table.emblem b/app/assets/javascripts/user/app/templates/table.emblem
index c10a77a4..be2b9abf 100644
--- a/app/assets/javascripts/user/app/templates/table.emblem
+++ b/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
-          h4.product_category-title{action "toggleProductCategory" product_category}
-            if product_category.collapsed
-              span.icon.collapsed
-            else
-              span.icon
-            = product_category.name
-          hr
-          unless product_category.collapsed
+          .product_category-container
+            h4.product-category-title= product_category.name
             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
-          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
+                  span= product.name
+                  span.right.currency=currency product.price
diff --git a/app/assets/stylesheets/user/foundation/application.css.sass b/app/assets/stylesheets/user/foundation/application.css.sass
index c48d7b1e..85ed2833 100644
--- a/app/assets/stylesheets/user/foundation/application.css.sass
+++ b/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
diff --git a/app/assets/stylesheets/user/foundation/_qproduct_categories.css.sass b/app/assets/stylesheets/user/foundation/components/_product_categories.css.sass
similarity index 62%
rename from app/assets/stylesheets/user/foundation/_qproduct_categories.css.sass
rename to app/assets/stylesheets/user/foundation/components/_product_categories.css.sass
index e3e139aa..c16aeac5 100644
--- a/app/assets/stylesheets/user/foundation/_qproduct_categories.css.sass
+++ b/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
-  cursor: pointer
-  .icon
-    @extend .fa
-    @extend .fa-arrow-down
-    color: #ccc
-    padding-right: 10px
-    &.collapsed
-      @extend .fa-arrow-right
+  margin: 0 0 5px rem-calc(1.0)
 .product_category-products
   .product-price
     float: right