Styling for shop page product modal

app/assets/stylesheets/darkswarm/all.scss

@@ -9,6 +9,3 @@
 */
 @import 'foundation-icons';
 
-ofn-modal {
-  display: block;
-}

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

@@ -0,0 +1,21 @@
+@import mixins
+@import variables
+@import branding
+
+.product-img
+  border-bottom: 40px white solid
+  border-top: 20px white solid
+  border-left: 20px white solid
+  border-right: 20px white solid
+  outline: 1px solid #ccc
+  @include box-shadow(0 1px 2px 1px rgba(0,0,0,0.25))
+  
+@media only screen and (max-width: 1024px)
+  .product-img
+    margin-top: 2em
+    margin-bottom: 1em
+    
+
+
+
+

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

@@ -1,5 +1,2 @@
 .row
   max-width: 74em
-
-.reveal-modal
-  position: fixed

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

@@ -81,8 +81,7 @@
       padding-top: 1em
       input.button.right
         float: left
-    
-    
+
     product:hover, product:focus, product:active
       border-color: $clr-brick
       @include box-shadow(0 0 3px 0 $clr-brick-bright)

app/views/modals/_producer.html.haml

@@ -1,12 +1,28 @@
-%ofn-modal{title: "{{ producer.name }}"}
-  #producer_modal
-    .row
-      .small-12.columns
-        %img{"ng-src" => "producer.promo_image"} 
-        %h3 {{ producer.name }}
-    .row
-      .small-6.columns
-        %p
-          {{ producer.description }}
-      .small-6.columns
-        Stay in touch with {{ producer.name }}
+/ %ofn-modal{title: "{{ producer.name }}"}
+/   #producer_modal
+/     .row
+/       .small-12.columns
+/         %img{"ng-src" => "producer.promo_image"} 
+/         %h3 {{ producer.name }}
+/     .row
+/       .small-6.columns
+/         %p
+/           {{ producer.description }}
+/       .small-6.columns
+/         Stay in touch with {{ producer.name }}
+/   %a.close-reveal-modal{"ng-click" => "$close()"} ×
+
+
+%ofn-modal{title: "{{producer.name}}"}
+  .row
+    .columns.small-12
+      %img.product-img{"ng-src" => "{{producer.promo_image.images[0].large_url}}"} 
+      %h3 {{ producer.name }}
+  .row  
+    .columns.small-12.large-6
+      %p {{ producer.description }}
+    .columns.small-12.large-6
+      Stay in touch with {{ producer.name }}
+  / %pre
+  /   {{ producer | json }}
+  %a.close-reveal-modal{"ng-click" => "$close()"} ×

app/views/modals/_producers.html.haml

@@ -1,4 +1,3 @@
 %h2 Producers
-%h5 Our producers make the food! All the delicious! 
-%p More text goes here. 
+%p Our producers make all the delicious food you can shop for on the Open Food Network. 
 %a.close-reveal-modal{"ng-click" => "cancel()"} ×

app/views/modals/_product.html.haml

@@ -1,4 +1,14 @@
 %ofn-modal{title: "{{product.name}}"}
 
-  {{ product | json }}
-  {{ product.description }}
+  .row
+    .columns.small-12.large-6
+      %img.product-img{"ng-src" => "{{product.master.images[0].large_url}}"} 
+    .columns.small-12.large-6
+      %h2 
+        %img{"ng-src" => "{{product.primary_taxon.icon}}"} 
+        {{product.name}}
+      %p {{product.description}}
+  / %pre
+  /   {{ product | json }}
+  %a.close-reveal-modal{"ng-click" => "$close()"} ×
+