Enable side blocks on product catalog

Also adds the ProductCategoriesBlock to list the catalog anywhere. ActionItem896

Enable side blocks on product catalog
Also adds the ProductCategoriesBlock to list the catalog anywhere. ActionItem896
Aurélio A. Heckert
1 parent 32b977e3
Showing 9 changed files with 146 additions and 58 deletions Show diff stats
app/controllers/my_profile/profile_design_controller.rb
app/controllers/public/catalog_controller.rb
app/helpers/application_helper.rb
app/helpers/catalog_helper.rb
app/models/box.rb
app/models/product_categories_block.rb
app/views/blocks/product_categories.html.erb
app/views/catalog/index.rhtml
public/stylesheets/application.css
@@ -32,6 +32,7 @@ class ProfileDesignController &lt; BoxOrganizerController
     if profile.enterprise?
       blocks << DisabledEnterpriseMessageBlock
       blocks << HighlightsBlock
+      blocks << ProductCategoriesBlock
       blocks << FeaturedProductsBlock
       blocks << FansBlock
       blocks += plugins.dispatch(:extra_blocks, :type => Enterprise)
 class CatalogController < PublicController
   needs_profile
-  no_design_blocks
  
   before_filter :check_enterprise_and_environment
  
@@ -36,6 +36,8 @@ module ApplicationHelper
  
   include LayoutHelper
  
+  include CatalogHelper
+
   def locale
     (@page && !@page.language.blank?) ? @page.language : FastGettext.locale
   end
@@ -11,20 +11,24 @@ module CatalogHelper
     content_tag('div', all_items.join(' &rarr; '), :id => 'breadcrumb')
   end
  
-  def category_link(category, sub = false)
+  def category_link(category)
     count = profile.products.from_category(category).count
     name = truncate(category.name, :length => 22 - count.to_s.size)
-    link_name = sub ? name : content_tag('strong', name)
-    link = link_to(link_name, {:action => 'index', :level => category.id}, :title => category.name)
-    content_tag('li', "#{link} (#{count})") if count > 0
+    link = link_to(name, {:controller => 'catalog', :action => 'index', :level => category.id}, :title => category.name)
+    content_tag('div', "#{link} <span class=\"count\">#{count}</span>") if count > 0
   end
  
-  def category_sub_links(category)
+  def category_with_sub_list(category)
+    content_tag 'li', "#{category_link(category)}\n#{sub_category_list(category)}"
+  end
+
+  def sub_category_list(category)
     sub_categories = []
     category.children.order(:name).each do |sub_category|
-      sub_categories << category_link(sub_category, true)
+      cat_link = category_link sub_category
+      sub_categories << content_tag('li', cat_link) unless cat_link.nil?
     end
-    content_tag('ul', sub_categories) if sub_categories.size > 1
+    content_tag('ul', sub_categories) if sub_categories.size > 0
   end
  
 end
@@ -61,6 +61,7 @@ class Box &lt; ActiveRecord::Base
       MyNetworkBlock,
       PeopleBlock,
       ProductsBlock,
+      ProductCategoriesBlock,
       ProfileImageBlock,
       ProfileInfoBlock,
       ProfileSearchBlock,
@@ -0,0 +1,24 @@
+class ProductCategoriesBlock < Block
+
+  def self.description
+    _('Product category menu')
+  end
+
+  # the title of the block. Probably will be overriden in subclasses.
+  def default_title
+    _('Catalog')
+  end
+
+  def help
+    _('Helps to filter the products catalog.')
+  end
+
+  def content(args={})
+    profile = owner
+    lambda do
+      categories = @categories || ProductCategory.on_level().order(:name)
+      render :file => 'blocks/product_categories', :locals => {:profile => profile, :categories => categories}
+    end
+  end
+
+end
@@ -0,0 +1,12 @@
+<%= link_to _('Catalog start'), profile.catalog_url, :class=>'catalog-home-link' %>
+<% if categories.present? %>
+<ul class="catalog-categories-list">
+  <% categories.each do |category| %>
+    <%= category_with_sub_list(category) %>
+  <% end %>
+</ul>
+<% elsif @category.present? %>
+  <div class="catalog-categories-notice"><%= _('There are no sub-categories for %s') % @category.name %></div>
+<% else %>
+  <div class="catalog-categories-notice"><%= _('There are no categories available.') %></div>
+<% end %>
@@ -5,23 +5,6 @@
  
 <%= breadcrumb(@category) if params[:level] %>
  
-<div class='l-sidebar-left-bar'>
-  <ul>
-    <%= content_tag('li', link_to(_('Homepage'), profile.url), :class => 'catalog-categories-link') %>
-    <%= content_tag('li', link_to(_('Catalog start'), profile.catalog_url), :class => 'catalog-categories-link') %>
-    <% if @categories.present? %>
-      <% @categories.each do |category| %>
-        <%= category_link(category) %>
-        <%= category_sub_links(category) %>
-      <% end %>
-    <% elsif @category.present? %>
-      <%= content_tag('li', _('There are no sub-categories for %s') % @category.name, :id => 'catalog-categories-notice') %>
-    <% else %>
-      <%= content_tag('li', _('There are no categories available.'), :id => 'catalog-categories-notice') %>
-    <% end %>
-  </ul>
-</div>
-
 <ul id="product-list" class="l-sidebar-left-content">
   <% @products.each do |product| %>
     <% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { |content| instance_eval(&content) } %>
@@ -2735,67 +2735,134 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
   margin-top: -15px;
 }
  
-.l-sidebar-left-bar ul,
 .l-sidebar-right-bar ul {
   list-style-type: none;
   margin-left: 0;
   padding: 1em 1em 0.5em 1em;
 }
  
-.l-sidebar-left-bar ul ul,
 .l-sidebar-right-bar ul ul {
-  padding-top: 0;
+  padding-left: 1em;
+  margin-top: 3px;
 }
  
-.l-sidebar-left-bar ul{
-  background-color: #eeeeec;
-  border-radius: 5px;
+.l-sidebar-right-bar li {
+  margin: 3px 0px;
+  padding: 0px;
 }
  
-.l-sidebar-left-bar a,
 .l-sidebar-right-bar a {
   text-decoration: none;
+  font-size: 120%;
 }
  
-.l-sidebar-left-bar a:hover,
 .l-sidebar-right-bar a:hover {
   text-decoration: underline;
 }
  
-.l-sidebar-left-bar li,
-.l-sidebar-right-bar li {
+/* * * Product Categories Block * * * * * * */
+
+.product-categories-block .catalog-home-link {
+  display: block;
+  background: rgba(0,0,0,0.08);
+  font-weight: bold;
+  text-align: center;
+  border-radius: 5px;
+  padding: 0px;
+  line-height: 200%;
+  text-decoration: none;
+  color: #000;
+}
+.product-categories-block .catalog-home-link:hover {
+  background: rgba(0,0,0,0.6);
+  color: #FFF;
+  text-decoration: none;
+}
+
+.product-categories-block .catalog-categories-list {
+  margin-top: 0.5em;
+}
+
+.product-categories-block ul {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  border-radius: 5px;
+  color: rgba(0,0,0,0.4);
+}
+
+.product-categories-block li {
   margin: 0;
   padding: 0;
+  white-space: nowrap;
 }
  
-#catalog-categories-notice {
-  color: #555753;
-  padding-bottom: 0.5em;
+.product-categories-block li li div {
+  padding: 0 0 0 1.5em;
 }
  
-.l-sidebar-left-bar .catalog-categories-link {
-  background-color: #d3d7cf;
-  font-weight: bold;
-  height: 28px;
-  text-align: center;
+.product-categories-block .catalog-categories-list a {
+  text-decoration: none;
+  font-size: 120%;
+	line-height: 150%;
+  color: #333;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: inline-block;
+	padding: 0 0.3em 0 0.5em;
   border-radius: 5px;
-  margin-bottom: 10px;
+	max-width: 80%;
+	vertical-align: middle;
+}
+.product-categories-block .catalog-categories-list ul a {
+  text-decoration: none;
+  font-size: 110%;
+	line-height: 163.6%;
+}
+.product-categories-block .catalog-categories-list div:hover a:hover {
+  background: rgba(0,0,0,0.6);
+  color: #FFF;
+  text-decoration: none;
 }
  
+.product-categories-block .catalog-categories-list div:hover a,
+.product-categories-block .catalog-categories-list div:hover .count {
+  background: rgba(0,0,0,0.08);
+}
  
-.l-sidebar-left-bar .catalog-categories-link:hover {
-  background-color: #babdb6;
+.block.product-categories-block .catalog-categories-list a {
+  font-weight: bold;
 }
  
+.block.product-categories-block .catalog-categories-list ul a {
+  font-weight: normal;
+}
  
-.l-sidebar-left-bar .catalog-categories-link a{
-  display: inline-block;
-  height: 100%;
-  width: 100%;
-  line-height: 28px;
-  text-decoration: none;
-  color: #2e3436;
+.product-categories-block a:hover {
+  text-decoration: underline;
+}
+
+.product-categories-block .count {
+	display: inline-block;
+	vertical-align: middle;
+	margin-left: -0.2em;
+	padding: 0 0.2em;
+	line-height: 180%;
+  border-radius: 5px;
+}
+
+.block.product-categories-block .count:before {
+	content: "(";
 }
+.block.product-categories-block .count:after {
+	content: ")";
+}
+
+.catalog-categories-notice {
+  color: rgba(0,0,0,0.3);
+  padding: 0.5em 1em;
+}
+
 /* * * Show Product * * * * * * * * * * * * */
  
 .controller-catalog #show_product .product-pic {
@@ -6225,11 +6292,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
  
 /* Sidebar Layout */
  
-.l-sidebar-left-bar {
-  float: left;
-  width: 20%;
-}
-
 .l-sidebar-left-content {
   float: right;
   width: 78%;
...	...	@@ -32,6 +32,7 @@ class ProfileDesignController < BoxOrganizerController
32	32	if profile.enterprise?
33	33	blocks << DisabledEnterpriseMessageBlock
34	34	blocks << HighlightsBlock
	35	+ blocks << ProductCategoriesBlock
35	36	blocks << FeaturedProductsBlock
36	37	blocks << FansBlock
37	38	blocks += plugins.dispatch(:extra_blocks, :type => Enterprise)
...	...
1	1	class CatalogController < PublicController
2	2	needs_profile
3		- no_design_blocks
4	3
5	4	before_filter :check_enterprise_and_environment
6	5
...	...
...	...	@@ -36,6 +36,8 @@ module ApplicationHelper
36	36
37	37	include LayoutHelper
38	38
	39	+ include CatalogHelper
	40	+
39	41	def locale
40	42	(@page && !@page.language.blank?) ? @page.language : FastGettext.locale
41	43	end
...	...
...	...	@@ -11,20 +11,24 @@ module CatalogHelper
11	11	content_tag('div', all_items.join(' → '), :id => 'breadcrumb')
12	12	end
13	13
14		- def category_link(category, sub = false)
	14	+ def category_link(category)
15	15	count = profile.products.from_category(category).count
16	16	name = truncate(category.name, :length => 22 - count.to_s.size)
17		- link_name = sub ? name : content_tag('strong', name)
18		- link = link_to(link_name, {:action => 'index', :level => category.id}, :title => category.name)
19		- content_tag('li', "#{link} (#{count})") if count > 0
	17	+ link = link_to(name, {:controller => 'catalog', :action => 'index', :level => category.id}, :title => category.name)
	18	+ content_tag('div', "#{link} <span class=\"count\">#{count}</span>") if count > 0
20	19	end
21	20
22		- def category_sub_links(category)
	21	+ def category_with_sub_list(category)
	22	+ content_tag 'li', "#{category_link(category)}\n#{sub_category_list(category)}"
	23	+ end
	24	+
	25	+ def sub_category_list(category)
23	26	sub_categories = []
24	27	category.children.order(:name).each do \|sub_category\|
25		- sub_categories << category_link(sub_category, true)
	28	+ cat_link = category_link sub_category
	29	+ sub_categories << content_tag('li', cat_link) unless cat_link.nil?
26	30	end
27		- content_tag('ul', sub_categories) if sub_categories.size > 1
	31	+ content_tag('ul', sub_categories) if sub_categories.size > 0
28	32	end
29	33
30	34	end
...	...
...	...	@@ -61,6 +61,7 @@ class Box < ActiveRecord::Base
61	61	MyNetworkBlock,
62	62	PeopleBlock,
63	63	ProductsBlock,
	64	+ ProductCategoriesBlock,
64	65	ProfileImageBlock,
65	66	ProfileInfoBlock,
66	67	ProfileSearchBlock,
...	...
...	...	@@ -0,0 +1,24 @@
	1	+class ProductCategoriesBlock < Block
	2	+
	3	+ def self.description
	4	+ _('Product category menu')
	5	+ end
	6	+
	7	+ # the title of the block. Probably will be overriden in subclasses.
	8	+ def default_title
	9	+ _('Catalog')
	10	+ end
	11	+
	12	+ def help
	13	+ _('Helps to filter the products catalog.')
	14	+ end
	15	+
	16	+ def content(args={})
	17	+ profile = owner
	18	+ lambda do
	19	+ categories = @categories \|\| ProductCategory.on_level().order(:name)
	20	+ render :file => 'blocks/product_categories', :locals => {:profile => profile, :categories => categories}
	21	+ end
	22	+ end
	23	+
	24	+end
...	...
...	...	@@ -0,0 +1,12 @@
	1	+<%= link_to _('Catalog start'), profile.catalog_url, :class=>'catalog-home-link' %>
	2	+<% if categories.present? %>
	3	+<ul class="catalog-categories-list">
	4	+ <% categories.each do \|category\| %>
	5	+ <%= category_with_sub_list(category) %>
	6	+ <% end %>
	7	+</ul>
	8	+<% elsif @category.present? %>
	9	+ <div class="catalog-categories-notice"><%= _('There are no sub-categories for %s') % @category.name %></div>
	10	+<% else %>
	11	+ <div class="catalog-categories-notice"><%= _('There are no categories available.') %></div>
	12	+<% end %>
...	...
...	...	@@ -5,23 +5,6 @@
5	5
6	6	<%= breadcrumb(@category) if params[:level] %>
7	7
8		-<div class='l-sidebar-left-bar'>
9		- <ul>
10		- <%= content_tag('li', link_to(_('Homepage'), profile.url), :class => 'catalog-categories-link') %>
11		- <%= content_tag('li', link_to(_('Catalog start'), profile.catalog_url), :class => 'catalog-categories-link') %>
12		- <% if @categories.present? %>
13		- <% @categories.each do \|category\| %>
14		- <%= category_link(category) %>
15		- <%= category_sub_links(category) %>
16		- <% end %>
17		- <% elsif @category.present? %>
18		- <%= content_tag('li', _('There are no sub-categories for %s') % @category.name, :id => 'catalog-categories-notice') %>
19		- <% else %>
20		- <%= content_tag('li', _('There are no categories available.'), :id => 'catalog-categories-notice') %>
21		- <% end %>
22		- </ul>
23		-</div>
24		-
25	8	<ul id="product-list" class="l-sidebar-left-content">
26	9	<% @products.each do \|product\| %>
27	10	<% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { \|content\| instance_eval(&content) } %>
...	...
...	...	@@ -2735,67 +2735,134 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2735	2735	margin-top: -15px;
2736	2736	}
2737	2737
2738		-.l-sidebar-left-bar ul,
2739	2738	.l-sidebar-right-bar ul {
2740	2739	list-style-type: none;
2741	2740	margin-left: 0;
2742	2741	padding: 1em 1em 0.5em 1em;
2743	2742	}
2744	2743
2745		-.l-sidebar-left-bar ul ul,
2746	2744	.l-sidebar-right-bar ul ul {
2747		- padding-top: 0;
	2745	+ padding-left: 1em;
	2746	+ margin-top: 3px;
2748	2747	}
2749	2748
2750		-.l-sidebar-left-bar ul{
2751		- background-color: #eeeeec;
2752		- border-radius: 5px;
	2749	+.l-sidebar-right-bar li {
	2750	+ margin: 3px 0px;
	2751	+ padding: 0px;
2753	2752	}
2754	2753
2755		-.l-sidebar-left-bar a,
2756	2754	.l-sidebar-right-bar a {
2757	2755	text-decoration: none;
	2756	+ font-size: 120%;
2758	2757	}
2759	2758
2760		-.l-sidebar-left-bar a:hover,
2761	2759	.l-sidebar-right-bar a:hover {
2762	2760	text-decoration: underline;
2763	2761	}
2764	2762
2765		-.l-sidebar-left-bar li,
2766		-.l-sidebar-right-bar li {
	2763	+/* * * Product Categories Block * * * * * * */
	2764	+
	2765	+.product-categories-block .catalog-home-link {
	2766	+ display: block;
	2767	+ background: rgba(0,0,0,0.08);
	2768	+ font-weight: bold;
	2769	+ text-align: center;
	2770	+ border-radius: 5px;
	2771	+ padding: 0px;
	2772	+ line-height: 200%;
	2773	+ text-decoration: none;
	2774	+ color: #000;
	2775	+}
	2776	+.product-categories-block .catalog-home-link:hover {
	2777	+ background: rgba(0,0,0,0.6);
	2778	+ color: #FFF;
	2779	+ text-decoration: none;
	2780	+}
	2781	+
	2782	+.product-categories-block .catalog-categories-list {
	2783	+ margin-top: 0.5em;
	2784	+}
	2785	+
	2786	+.product-categories-block ul {
	2787	+ list-style-type: none;
	2788	+ margin: 0px;
	2789	+ padding: 0px;
	2790	+ border-radius: 5px;
	2791	+ color: rgba(0,0,0,0.4);
	2792	+}
	2793	+
	2794	+.product-categories-block li {
2767	2795	margin: 0;
2768	2796	padding: 0;
	2797	+ white-space: nowrap;
2769	2798	}
2770	2799
2771		-#catalog-categories-notice {
2772		- color: #555753;
2773		- padding-bottom: 0.5em;
	2800	+.product-categories-block li li div {
	2801	+ padding: 0 0 0 1.5em;
2774	2802	}
2775	2803
2776		-.l-sidebar-left-bar .catalog-categories-link {
2777		- background-color: #d3d7cf;
2778		- font-weight: bold;
2779		- height: 28px;
2780		- text-align: center;
	2804	+.product-categories-block .catalog-categories-list a {
	2805	+ text-decoration: none;
	2806	+ font-size: 120%;
	2807	+ line-height: 150%;
	2808	+ color: #333;
	2809	+ overflow: hidden;
	2810	+ text-overflow: ellipsis;
	2811	+ display: inline-block;
	2812	+ padding: 0 0.3em 0 0.5em;
2781	2813	border-radius: 5px;
2782		- margin-bottom: 10px;
	2814	+ max-width: 80%;
	2815	+ vertical-align: middle;
	2816	+}
	2817	+.product-categories-block .catalog-categories-list ul a {
	2818	+ text-decoration: none;
	2819	+ font-size: 110%;
	2820	+ line-height: 163.6%;
	2821	+}
	2822	+.product-categories-block .catalog-categories-list div:hover a:hover {
	2823	+ background: rgba(0,0,0,0.6);
	2824	+ color: #FFF;
	2825	+ text-decoration: none;
2783	2826	}
2784	2827
	2828	+.product-categories-block .catalog-categories-list div:hover a,
	2829	+.product-categories-block .catalog-categories-list div:hover .count {
	2830	+ background: rgba(0,0,0,0.08);
	2831	+}
2785	2832
2786		-.l-sidebar-left-bar .catalog-categories-link:hover {
2787		- background-color: #babdb6;
	2833	+.block.product-categories-block .catalog-categories-list a {
	2834	+ font-weight: bold;
2788	2835	}
2789	2836
	2837	+.block.product-categories-block .catalog-categories-list ul a {
	2838	+ font-weight: normal;
	2839	+}
2790	2840
2791		-.l-sidebar-left-bar .catalog-categories-link a{
2792		- display: inline-block;
2793		- height: 100%;
2794		- width: 100%;
2795		- line-height: 28px;
2796		- text-decoration: none;
2797		- color: #2e3436;
	2841	+.product-categories-block a:hover {
	2842	+ text-decoration: underline;
	2843	+}
	2844	+
	2845	+.product-categories-block .count {
	2846	+ display: inline-block;
	2847	+ vertical-align: middle;
	2848	+ margin-left: -0.2em;
	2849	+ padding: 0 0.2em;
	2850	+ line-height: 180%;
	2851	+ border-radius: 5px;
	2852	+}
	2853	+
	2854	+.block.product-categories-block .count:before {
	2855	+ content: "(";
2798	2856	}
	2857	+.block.product-categories-block .count:after {
	2858	+ content: ")";
	2859	+}
	2860	+
	2861	+.catalog-categories-notice {
	2862	+ color: rgba(0,0,0,0.3);
	2863	+ padding: 0.5em 1em;
	2864	+}
	2865	+
2799	2866	/* * * Show Product * * * * * * * * * * * * */
2800	2867
2801	2868	.controller-catalog #show_product .product-pic {
...	...	@@ -6225,11 +6292,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6225	6292
6226	6293	/* Sidebar Layout */
6227	6294
6228		-.l-sidebar-left-bar {
6229		- float: left;
6230		- width: 20%;
6231		-}
6232		-
6233	6295	.l-sidebar-left-content {
6234	6296	float: right;
6235	6297	width: 78%;
...	...