Merge branch 'groups_page' into fixing_modals

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

@@ -0,0 +1,42 @@
+@import branding
+@import mixins
+
+#groups
+  background-color: $clr-brick-light
+  background-image: url("/assets/groups.svg")
+  background-position: center 15px
+  background-repeat: no-repeat
+  padding-bottom: 20px
+
+.group
+  padding-bottom: 40px
+  hr
+    border-bottom: 10px solid white
+    outline: 0
+    border-top: 0
+    margin: 0
+
+.group-hero
+  position: relative
+  padding: 0
+  border: 10px solid white
+  background: white
+
+h3.group-name
+  margin-top: 0.5em
+  margin-bottom: 0.15em
+
+img.group-logo
+  max-width: 220px
+  max-height: 86px
+  float: right
+  padding-top: 10px
+
+
+img.group-hero-img
+  background-color: black
+  width: 100%
+  height: inherit
+  max-height: 260px
+  min-height: 120px
+  overflow: hidden

app/assets/stylesheets/darkswarm/mixins.sass

@@ -85,10 +85,10 @@
   &, & *
     color: $clr-turquoise
   a
-    color: white
+    color: $clr-turquoise
     &:hover
       text-decoration: none
-      color: $clr-turquoise-light
+      color: $clr-turquoise-bright
 
 @mixin fullbg
   background-position: center center 

app/models/enterprise.rb

@@ -19,8 +19,8 @@ class Enterprise < ActiveRecord::Base
   delegate :latitude, :longitude, :city, :state_name, :to => :address
 
   accepts_nested_attributes_for :address
-  has_attached_file :logo, :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png"
-  has_attached_file :promo_image, :styles => { :large => "570x380>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png"
+  has_attached_file :logo, :styles => { :medium => "300x300>", :thumb => "100x100>" }
+  has_attached_file :promo_image, :styles => { :large => "260x1200#", :thumb => "100x100>" }
 
   validates_presence_of :name
   validates_presence_of :address

app/models/enterprise_group.rb

@@ -9,7 +9,7 @@ class EnterpriseGroup < ActiveRecord::Base
   attr_accessible :name, :description, :long_description, :on_front_page, :enterprise_ids
 
   attr_accessible :promo_image
-  has_attached_file :promo_image, styles: {medium: "800>400"}
+  has_attached_file :promo_image, styles: {large: "260x1200#"}
   validates_attachment_content_type :promo_image, :content_type => /\Aimage\/.*\Z/
 
   attr_accessible :logo

app/views/groups/index.html.haml

@@ -1,10 +1,15 @@
 #groups{"ng-controller" => "GroupsCtrl"}
   :javascript
     angular.module('Darkswarm').value('groups', #{render partial: "json/groups", object: @groups})
-  .row
+  .row.pad-top
     .small-12.columns.text-center
       %h1 Groups / Regions
-      %h3 Check out our food groups below
+      %div 
+        Check out our 
+        %ofn-modal{title: "food groups"}
+          = render partial: "modals/groups"  
+        below
+      %p
 
       %input{type: :text, 
       "ng-model" => "query", 
@@ -12,14 +17,27 @@
       "ng-debounce" => "150",
       "ofn-disable-enter" => true}
 
-  .row.group_table{bindonce: true}
-    .small.12.columns
-      .group{"ng-repeat" => "group in Groups.groups | filter:query | orderBy:order"}
-        %h2 {{ group.name }}
-        %p {{ group.description }}
+  .group{"ng-repeat" => "group in Groups.groups | filter:query | orderBy:order"}
+    
+    .row.pad-top{bindonce: true}
+      .small-12.columns
+        .group-hero
+          %img.group-hero-img{"bo-src" => "group.promo_image"} 
+          %img.group-logo{"bo-src" => "group.logo"}
+          %h3.group-name {{ group.name }}
+          %h5.group-description {{ group.description }}
+          
+    .row.pad-top{bindonce: true}
+      .small-6.columns
         %p {{ group.long_description }}
-        %img{"bo-src" => "group.logo"}
-
-        %ul
+      .small-6.columns
+        %h5 Our hubs & producers
+        %ul.small-block-grid-2
           %li{"ng-repeat" => "enterprise in group.enterprises"}
             %a{"bo-href" => "enterprise.path"} {{ enterprise.name }}
+
+    .row.group_footer
+      .small-12.columns
+        %hr
+
+= render partial: "shared/footer"

app/views/home/_groups.html.haml

@@ -5,6 +5,6 @@
       %h2 Groups / Regions
       %h5 See all the groups & regions on the Open Food Network
       %p
-      %button.neutral-btn.light 
+      %a.neutral-btn.light{href: "/groups"}
         %i.fi-torsos-all 
         View groups & regions

app/views/home/_producers.html.haml

@@ -5,6 +5,6 @@
       %h2 Producers
       %h5 Looking for a specific producer or farmer?
       %p
-      %button.neutral-btn.turquoise
+      %a.neutral-btn.turquoise{href: "/producers"}
         %i.fi-trees
         View all producers

app/views/json/_groups.rabl

@@ -6,5 +6,9 @@ child enterprises: :enterprises do
 end
 
 node :logo do |group|
-  group.logo(:original)
+  group.logo(:medium) if group.logo.exists?
+end
+
+node :promo_image do |group|
+  group.promo_image(:large) if group.promo_image.exists?
 end

app/views/modals/_groups.html.haml

@@ -0,0 +1,4 @@
+%h2 Groups / Regions
+%p These are the organisations and relationships between hubs which make up the Open Food Network. 
+%p Some groups are clustered by location or council, others by non-geographic similarities. 
+%a.close-reveal-modal{"ng-click" => "cancel()"} ×

app/views/shop/products.rabl

@@ -13,10 +13,10 @@ child :supplier => :supplier do
   attributes :id, :name, :description, :long_description, :website, :instagram, :facebook, :linkedin, :twitter
 
   node :logo do |supplier|
-    supplier.logo.url
+    supplier.logo(:medium) if supplier.logo.exists?
   end
   node :promo_image do |supplier|
-    supplier.promo_image.url
+    supplier.promo_image(:large) if supplier.promo_image.exists?
   end
 end
 

config/initializers/paperclip.rb

@@ -0,0 +1,3 @@
+Paperclip::Attachment.default_options[:convert_options] = {
+  all: "-auto-orient"
+}