From d7bc1a9b95a24dfe46c1feab73859d807bdf2434 Mon Sep 17 00:00:00 2001
From: summerscope <summerscope@gmail.com>
Date: Thu, 22 May 2014 14:40:35 +1000
Subject: [PATCH] Styling for shop page product modal

---
 app/assets/stylesheets/darkswarm/all.scss     |  3 --
 .../stylesheets/darkswarm/images.css.sass     | 21 ++++++++++
 .../stylesheets/darkswarm/overrides.css.sass  |  3 --
 .../stylesheets/darkswarm/shop.css.sass       |  3 +-
 app/views/modals/_producer.html.haml          | 40 +++++++++++++------
 app/views/modals/_producers.html.haml         |  3 +-
 app/views/modals/_product.html.haml           | 14 ++++++-
 7 files changed, 63 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/stylesheets/darkswarm/images.css.sass

diff --git a/app/assets/stylesheets/darkswarm/all.scss b/app/assets/stylesheets/darkswarm/all.scss
index 80e43cdc8b..a8ac8af078 100644
--- a/app/assets/stylesheets/darkswarm/all.scss
+++ b/app/assets/stylesheets/darkswarm/all.scss
@@ -9,6 +9,3 @@
 */
 @import 'foundation-icons';
 
-ofn-modal {
-  display: block;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/darkswarm/images.css.sass b/app/assets/stylesheets/darkswarm/images.css.sass
new file mode 100644
index 0000000000..24c1c77824
--- /dev/null
+++ b/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
+    
+
+
+
+
diff --git a/app/assets/stylesheets/darkswarm/overrides.css.sass b/app/assets/stylesheets/darkswarm/overrides.css.sass
index 917d6dd2e3..fcec6b455d 100644
--- a/app/assets/stylesheets/darkswarm/overrides.css.sass
+++ b/app/assets/stylesheets/darkswarm/overrides.css.sass
@@ -1,5 +1,2 @@
 .row
   max-width: 74em
-
-.reveal-modal
-  position: fixed
diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass
index 0c2972367a..e0030a7d7a 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.sass
+++ b/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)
diff --git a/app/views/modals/_producer.html.haml b/app/views/modals/_producer.html.haml
index 056f9e488f..ab8764358c 100644
--- a/app/views/modals/_producer.html.haml
+++ b/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()"} &#215;
+
+
+%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()"} &#215;
\ No newline at end of file
diff --git a/app/views/modals/_producers.html.haml b/app/views/modals/_producers.html.haml
index 153e4dcae3..89d8ccabae 100644
--- a/app/views/modals/_producers.html.haml
+++ b/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()"} &#215;
\ No newline at end of file
diff --git a/app/views/modals/_product.html.haml b/app/views/modals/_product.html.haml
index acca8f919b..70137ba987 100644
--- a/app/views/modals/_product.html.haml
+++ b/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()"} &#215;
+ 
\ No newline at end of file