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%;
1	class CatalogController < PublicController	1	class CatalogController < PublicController
2	needs_profile	2	needs_profile
3	- no_design_blocks
4		3
5	before_filter :check_enterprise_and_environment	4	before_filter :check_enterprise_and_environment
6		5
	@@ -36,6 +36,8 @@ module ApplicationHelper		@@ -36,6 +36,8 @@ module ApplicationHelper
36		36
37	include LayoutHelper	37	include LayoutHelper
38		38
		39	+ include CatalogHelper
		40	+
39	def locale	41	def locale
40	(@page && !@page.language.blank?) ? @page.language : FastGettext.locale	42	(@page && !@page.language.blank?) ? @page.language : FastGettext.locale
41	end	43	end
@@ -0,0 +1,24 @@		@@ -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 @@		@@ -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,23 +5,6 @@
5		5
6	<%= breadcrumb(@category) if params[:level] %>	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	<ul id="product-list" class="l-sidebar-left-content">	8	<ul id="product-list" class="l-sidebar-left-content">
26	<% @products.each do \|product\| %>	9	<% @products.each do \|product\| %>
27	<% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { \|content\| instance_eval(&content) } %>	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,67 +2735,134 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2735	margin-top: -15px;	2735	margin-top: -15px;
2736	}	2736	}
2737		2737
2738	-.l-sidebar-left-bar ul,
2739	.l-sidebar-right-bar ul {	2738	.l-sidebar-right-bar ul {
2740	list-style-type: none;	2739	list-style-type: none;
2741	margin-left: 0;	2740	margin-left: 0;
2742	padding: 1em 1em 0.5em 1em;	2741	padding: 1em 1em 0.5em 1em;
2743	}	2742	}
2744		2743
2745	-.l-sidebar-left-bar ul ul,
2746	.l-sidebar-right-bar ul ul {	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	.l-sidebar-right-bar a {	2754	.l-sidebar-right-bar a {
2757	text-decoration: none;	2755	text-decoration: none;
		2756	+ font-size: 120%;
2758	}	2757	}
2759		2758
2760	-.l-sidebar-left-bar a:hover,
2761	.l-sidebar-right-bar a:hover {	2759	.l-sidebar-right-bar a:hover {
2762	text-decoration: underline;	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	margin: 0;	2795	margin: 0;
2768	padding: 0;	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	border-radius: 5px;	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	/* * * Show Product * * * * * * * * * * * * */	2866	/* * * Show Product * * * * * * * * * * * * */
2800		2867
2801	.controller-catalog #show_product .product-pic {	2868	.controller-catalog #show_product .product-pic {
	@@ -6225,11 +6292,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {		@@ -6225,11 +6292,6 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6225		6292
6226	/* Sidebar Layout */	6293	/* Sidebar Layout */
6227		6294
6228	-.l-sidebar-left-bar {
6229	- float: left;
6230	- width: 20%;
6231	-}
6232	-
6233	.l-sidebar-left-content {	6295	.l-sidebar-left-content {
6234	float: right;	6296	float: right;
6235	width: 78%;	6297	width: 78%;