Adding some basic collapse/expand for variants in Shop

app/assets/stylesheets/darkswarm/shop.css.sass

@@ -82,11 +82,18 @@ shop
     display: block
     padding-top: 36px
     table
+      table-layout: fixed
       width: 100%
       border-collapse: collapse
       border: none
       th
         line-height: 50px
+        &.name
+          width: 265px
+        &.notes
+          width: 280px
+        &.variant
+          width: 200px
       .notes
         max-width: 300px
       td, th
@@ -96,12 +103,12 @@ shop
         border-right: 0px
       td
         padding: 20px 0px
+        &.name img
+          float: left
+          margin-right: 20px
       input[type=number]
         width: 60px
         margin: 0px
-      
-
-
           display: block
           float: right
           padding-top: 14px

app/assets/stylesheets/darkswarm/tables.css.sass

@@ -0,0 +1,5 @@
+table thead tr, table tbody tr 
+  th, td
+    box-sizing: border-box
+    padding-left: 12px
+    padding-right: 12px

app/views/shop/_products.html.haml

@@ -4,24 +4,33 @@
     %input.button.right{type: :submit, value: "Check Out"}
     %table
       %thead
-        %th{colspan: 2} Item
+        %th.name Item
         %th.notes Notes
-        %th Variant
+        %th.variant Variant
         %th QTY
         %th Bulk
         %th Price
       %tbody{"ng-repeat" => "product in data.products | filter:query"}
         %tr.product
-          %td
+          %td.name
             %img{"ng-src" => "{{ product.master.images[0].small_url }}"}
-            {{product.master.images[0].alt}}
-          %td
-            %h5
-              {{ product.name }}
-            {{ product.supplier.name }}
+            %div
+              %h5
+                {{ product.name }}
+              {{ product.supplier.name }}
           %td.notes {{ product.description | truncate:80 }}
 
-          %td {{ product.master.options_text }}
+          %td 
+            {{ product.master.options_text }}
+
+            %span{"ng-show" => "product.variants.length > 0"}
+              %img.collapse{src: "/assets/collapse.png",
+              "ng-show" => "product.show_variants",
+              "ng-click" => "product.show_variants = !product.show_variants"}
+
+              %img.expand{src: "/assets/expand.png",
+              "ng-show" => "!product.show_variants",
+              "ng-click" => "product.show_variants = !product.show_variants"}
           %td 
             %span{"ng-show" => "(product.variants.length == 0)"}
               %input{type: :number, 
@@ -39,8 +48,8 @@
           %td.price
             %small{"ng-show" => "(product.variants.length > 0)"} from
             ${{ product.price }}
-        %tr{"ng-repeat" => "variant in product.variants"}
-          %td{colspan: 3}
+        %tr{"ng-repeat" => "variant in product.variants", "ng-show" => "product.show_variants"}
+          %td{colspan: 2}
           %td {{variant.options_text}}
           %td 
             %input{type: :number, 

spec/features/consumer/shopping_spec.rb

@@ -46,7 +46,6 @@ feature "As a consumer I want to shop with a distributor", js: true do
         oc1 = create(:simple_order_cycle, distributors: [distributor])
         exchange = Exchange.find(oc1.exchanges.to_enterprises(distributor).outgoing.first.id) 
         exchange.update_attribute :pickup_time, "turtles" 
-        
         visit shop_path
         page.should have_selector "option[selected]", text: 'turtles'
       end
@@ -118,6 +117,18 @@ feature "As a consumer I want to shop with a distributor", js: true do
         it "should not show quantity field for product with variants" do
           page.should_not have_selector("#variants_#{product.master.id}", visible: true)
         end
+
+        it "collapses variants by default" do
+          page.should_not have_text variant.options_text
+        end
+
+        it "expands variants" do
+          find(".expand").trigger "click"
+          page.should have_text variant.options_text
+          find(".collapse").trigger "click"
+          page.should_not have_text variant.options_text
+        end
+        it "allows the user to expand variants"
       end
 
       describe "Filtering on hand and on demand products" do