WIP on producer and product modals

app/assets/javascripts/templates/partials/enterprise_details.html.haml

@@ -1,5 +1,21 @@
 .row{bindonce: true} 
   .small-12.large-8.columns
+    / TODO: Rob - add in taxons and properties and property pop-overs
+    .pad-top{"ng-if" => "1 > 0"}
+      %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/
+
+
     %div{"ng-if" => "enterprise.long_description.length > 0 || enterprise.logo"}
       %p.modal-header About
       .about-container

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

@@ -5,8 +5,23 @@
     %span 
       %em from
       %span.avenir {{ enterprise.name }}
-      
+    
+    / 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/
+      
       
     %div{"ng-if" => "product.description"}
       %hr

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

@@ -4,6 +4,9 @@
 @import animations
 
 @mixin filter-selector($base-clr, $border-clr, $hover-clr)
+  ul.inline-block
+    display: inline-block
+
   li
     display: inline-block
     @include border-radius(0)
@@ -14,7 +17,7 @@
     &.active 
       box-shadow: none
 
-    a
+    a, a.button
       display: block
       padding-top: 0.5rem
       @include border-radius(0.5em)
@@ -23,6 +26,8 @@
       font-size: 0.875em
       color: $base-clr
       font-size: 0.75em
+      background: white
+      margin: 0
       i
         padding-left: 0.25rem
 
@@ -35,12 +40,27 @@
           path
             @include csstrans
             fill: $base-clr
+
       &:hover, &:focus
+        border-color: $hover-clr
         color: $hover-clr
         render-svg
           svg
             path
               fill: $hover-clr
+     
+      &.disabled
+        opacity: 0.6
+        
+        &:hover, &:focus
+          border-color: $border-clr
+          color:  $base-clr
+          render-svg
+            svg
+              path
+                fill: $base-clr
+
+
       &.active, &.active:hover, &.active:focus
         border: 1px solid $base-clr
         background: $base-clr
@@ -97,6 +117,6 @@
 
   // Shopfront properties
   &.property-selectors
-    @include filter-selector(#666, #ccc, #666)
+    @include filter-selector(#666, #ccc, #777)
 
 

app/views/shop/products/_filters.html.haml

@@ -1,5 +1,5 @@
-.filter-shopfront.taxon-selectors.animate-hide.text-right
+.filter-shopfront.taxon-selectors.text-right
   %single-line-selectors{ objects: "Products.products | products:query | properties: activeProperties | taxonsOf", "active-selectors" => "activeTaxons"}
 
-.filter-shopfront.property-selectors.animate-hide.text-right
+.filter-shopfront.property-selectors.text-right
   %single-line-selectors{ objects: "Products.products | products:query | taxons:activeTaxons | propertiesOf", "active-selectors" => "activeProperties"}