Adding properties and taxons to producer modal

app/assets/javascripts/templates/product_modal.html.haml

@@ -6,24 +6,15 @@
       %em from
       %span.avenir {{ enterprise.name }}
 
+    %br
 
-    -# TODO: Add product taxons and properties here
-    -# / TODO: Rob - add in taxons and properties and property pop-overs
-    -# / %render-svg{path: "{{product.primary_taxon.icon}}"}
-    -# .pad-top
-    -#   %span.filter-shopfront.taxon-selectors
-    -#     %ul.inline-block
-    -#       %li
-    -#         %a.button.tiny.disabled Grains
-    -#       %li
-    -#         %a.button.tiny.disabled Dairy
-    -#
-    -#   %span.filter-shopfront.property-selectors.pad-top
-    -#     %ul.inline-block
-    -#       %li
-    -#         %a.button.tiny Organic certified
-    -#         / TODO: Rob - need popover, use will's directive or this? http://pineconellc.github.io/angular-foundation/
+    .filter-shopfront.taxon-selectors.inline-block
+      %ul
+        %filter-selector{ objects: "[product] | taxonsOf" }
 
+    .filter-shopfront.property-selectors.inline-block
+      %ul
+        %filter-selector{ objects: "[product] | propertiesOf" }
 
     %div{"ng-if" => "product.description"}
       %hr

app/assets/stylesheets/darkswarm/_shop-filters.css.sass

@@ -4,7 +4,7 @@
 @import animations
 
 @mixin filter-selector($base-clr, $border-clr, $hover-clr)
-  ul.inline-block
+  &.inline-block, ul.inline-block
     display: inline-block
 
   li
@@ -14,7 +14,7 @@
     margin: 0 0 0.25rem 0.25rem
     &:hover, &:focus
       background: transparent
-    &.active 
+    &.active
       box-shadow: none
 
     a, a.button
@@ -48,10 +48,10 @@
           svg
             path
               fill: $hover-clr
-     
+
       &.disabled
         opacity: 0.6
-        
+
         &:hover, &:focus
           border-color: $border-clr
           color:  $base-clr
@@ -118,5 +118,3 @@
   // Shopfront properties
   &.property-selectors
     @include filter-selector(#666, #ccc, #777)
-
-