From 2130470eafb8d36cf21d1b9b725dddd82a5a4cac Mon Sep 17 00:00:00 2001 From: summerscope Date: Tue, 27 May 2014 17:11:42 +1000 Subject: [PATCH 1/9] Styling for groups page --- .../stylesheets/darkswarm/groups.css.sass | 39 +++++++++++++++++++ app/views/groups/index.html.haml | 39 ++++++++++++++----- app/views/modals/_groups.html.haml | 4 ++ 3 files changed, 72 insertions(+), 10 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/groups.css.sass create mode 100644 app/views/modals/_groups.html.haml diff --git a/app/assets/stylesheets/darkswarm/groups.css.sass b/app/assets/stylesheets/darkswarm/groups.css.sass new file mode 100644 index 0000000000..90f4af2a74 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/groups.css.sass @@ -0,0 +1,39 @@ +@import branding +@import mixins + +#groups + background-color: $clr-brick-light + +.group + .group_footer + margin-bottom: 1em + hr + border-bottom: 10px solid white + outline: none + border-top: none + margin-top: none + +.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 \ No newline at end of file diff --git a/app/views/groups/index.html.haml b/app/views/groups/index.html.haml index 552e45fd48..fdbf8c5ee6 100644 --- a/app/views/groups/index.html.haml +++ b/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,28 @@ "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 }} + / Will - scale large images down to 1200px wide, crop in to img aspect ratio 60W:13H + + .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" diff --git a/app/views/modals/_groups.html.haml b/app/views/modals/_groups.html.haml new file mode 100644 index 0000000000..80e210c98a --- /dev/null +++ b/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()"} × \ No newline at end of file From 9fe4bef7df91391f25422907eb6a5fecbd210393 Mon Sep 17 00:00:00 2001 From: summerscope Date: Tue, 27 May 2014 17:55:51 +1000 Subject: [PATCH 2/9] Adding groups icon into background for visual consistency --- app/assets/images/groups.svg | 1565 +++++++++++++++++ .../stylesheets/darkswarm/groups.css.sass | 3 + 2 files changed, 1568 insertions(+) create mode 100644 app/assets/images/groups.svg diff --git a/app/assets/images/groups.svg b/app/assets/images/groups.svg new file mode 100644 index 0000000000..f4ca32ec27 --- /dev/null +++ b/app/assets/images/groups.svg @@ -0,0 +1,1565 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/darkswarm/groups.css.sass b/app/assets/stylesheets/darkswarm/groups.css.sass index 90f4af2a74..42ce75ac46 100644 --- a/app/assets/stylesheets/darkswarm/groups.css.sass +++ b/app/assets/stylesheets/darkswarm/groups.css.sass @@ -3,6 +3,9 @@ #groups background-color: $clr-brick-light + background-image: url("/assets/groups.svg") + background-position: center 10px + background-repeat: no-repeat .group .group_footer From 3c3409bc1f908ca6160423dfe5961bbb1a9aa7d1 Mon Sep 17 00:00:00 2001 From: summerscope Date: Tue, 27 May 2014 18:03:12 +1000 Subject: [PATCH 3/9] Tweaks to styling on groups page --- app/assets/stylesheets/darkswarm/groups.css.sass | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/groups.css.sass b/app/assets/stylesheets/darkswarm/groups.css.sass index 42ce75ac46..b859273ab7 100644 --- a/app/assets/stylesheets/darkswarm/groups.css.sass +++ b/app/assets/stylesheets/darkswarm/groups.css.sass @@ -4,17 +4,17 @@ #groups background-color: $clr-brick-light background-image: url("/assets/groups.svg") - background-position: center 10px + background-position: center 15px background-repeat: no-repeat + padding-bottom: 20px .group - .group_footer - margin-bottom: 1em - hr - border-bottom: 10px solid white - outline: none - border-top: none - margin-top: none + padding-bottom: 40px + hr + border-bottom: 10px solid white + outline: 0 + border-top: 0 + margin: 0 .group-hero position: relative From 1a79b966e96bac39c7795139895d4e8e86485f81 Mon Sep 17 00:00:00 2001 From: summerscope Date: Wed, 28 May 2014 12:21:25 +1000 Subject: [PATCH 4/9] Adding in links to homepage buttons for Groups & Producers --- app/assets/stylesheets/darkswarm/mixins.sass | 4 ++-- app/views/home/_groups.html.haml | 2 +- app/views/home/_producers.html.haml | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index fde601f2d9..fd26cfcae9 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/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 diff --git a/app/views/home/_groups.html.haml b/app/views/home/_groups.html.haml index 0e16977f20..dd55a9bcd1 100644 --- a/app/views/home/_groups.html.haml +++ b/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 \ No newline at end of file diff --git a/app/views/home/_producers.html.haml b/app/views/home/_producers.html.haml index c24f170e72..31a573d610 100644 --- a/app/views/home/_producers.html.haml +++ b/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 \ No newline at end of file From a7105fc3a850efdb68bf8c06815954359540f6bd Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Wed, 28 May 2014 16:01:19 +1000 Subject: [PATCH 5/9] Tweaking image sizing on enterprise --- app/models/enterprise.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/models/enterprise.rb b/app/models/enterprise.rb index a72c6fdbd6..cdb94d74ba 100644 --- a/app/models/enterprise.rb +++ b/app/models/enterprise.rb @@ -18,8 +18,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 From f65ff5af18d70b2e8bde22cff384c2eebbcb7cb6 Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Wed, 28 May 2014 16:01:36 +1000 Subject: [PATCH 6/9] Automatically sorting out image rotation --- config/initializers/paperclip.rb | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 config/initializers/paperclip.rb diff --git a/config/initializers/paperclip.rb b/config/initializers/paperclip.rb new file mode 100644 index 0000000000..c40b9a4130 --- /dev/null +++ b/config/initializers/paperclip.rb @@ -0,0 +1,3 @@ +Paperclip::Attachment.default_options[:convert_options] = { + all: "-auto-orient" +} From b8cc9d33436a89172d3598ebec713641248b628c Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Wed, 28 May 2014 16:02:54 +1000 Subject: [PATCH 7/9] Modding image sizing on groups --- app/models/enterprise_group.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/models/enterprise_group.rb b/app/models/enterprise_group.rb index 6c163b087a..1cea76db72 100644 --- a/app/models/enterprise_group.rb +++ b/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 From 9bb059493e6ae162af7c85ce8bd20957053849ac Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Wed, 28 May 2014 16:03:05 +1000 Subject: [PATCH 8/9] Fixing the image render --- app/views/groups/index.html.haml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/views/groups/index.html.haml b/app/views/groups/index.html.haml index fdbf8c5ee6..afa28624f0 100644 --- a/app/views/groups/index.html.haml +++ b/app/views/groups/index.html.haml @@ -22,11 +22,10 @@ .row.pad-top{bindonce: true} .small-12.columns .group-hero - %img.group-hero-img{"bo-src" => "{{group.promo_image}}"} + %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 }} - / Will - scale large images down to 1200px wide, crop in to img aspect ratio 60W:13H .row.pad-top{bindonce: true} .small-6.columns From 33829d90446e141bba33c69bd946208fb3df018d Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Wed, 28 May 2014 16:03:21 +1000 Subject: [PATCH 9/9] Only rendering images if they exist --- app/views/json/_groups.rabl | 6 +++++- app/views/shop/products.rabl | 4 ++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/app/views/json/_groups.rabl b/app/views/json/_groups.rabl index 9475b425c4..27325bb850 100644 --- a/app/views/json/_groups.rabl +++ b/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 diff --git a/app/views/shop/products.rabl b/app/views/shop/products.rabl index ee5e567285..b1567a311a 100644 --- a/app/views/shop/products.rabl +++ b/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