[catalog-categories] Adding categories on catalog's side bar and breadcrumb on top

Rodrigo Souto
1 parent 86f1c20e
Showing 3 changed files with 104 additions and 2 deletions Show diff stats
app/helpers/catalog_helper.rb
app/views/catalog/index.rhtml
public/stylesheets/application.css
@@ -3,4 +3,28 @@ module CatalogHelper
   include DisplayHelper
   include ManageProductsHelper
+  def breadcrumb(category)
+    start = link_to(_('Start'), {:action => 'index'})
+    ancestors = category.ancestors.map { |c| link_to(c.name, {:action => 'index', :level => c.id}) }.reverse
+    current_level = content_tag('strong', category.name)
+    all_items = [start] + ancestors + [current_level]
+    content_tag('div', all_items.join(' &rarr; '), :id => 'breadcrumb')
+  end
+
+  def category_link(category, sub = false)
+    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
+  end
+
+  def category_sub_links(category)
+    sub_categories = []
+    category.children.each do |sub_category|
+      sub_categories << category_link(sub_category, true)
+    end
+    content_tag('ul', sub_categories) if sub_categories.size > 1
+  end
+
 end
 <% extra_content = [] %>
 <% extra_content_list = [] %>
-<ul id="product-list">
-  <li><h1><%= _('Products/Services') %></h1></li>
+<h1><%= _('Products/Services') %></h1>
+<%= breadcrumb(@category) if params[:level] %>
+
+<div class='l-sidebar-left-bar'>
+  <ul>
+    <% if @categories.size > 0 %>
+      <% @categories.each do |category| %>
+        <%= category_link(category) %>
+        <%= category_sub_links(category) %>
+      <% end %>
+    <% else %>
+      <%= content_tag('li', _('There are no sub-categories for %s') % @category.name, :style => 'color: #555753; padding-bottom: 0.5em;') %>
+    <% 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) } %>
     <% extra_content_list = @plugins.dispatch(:catalog_list_item_extras, product).collect { |content| instance_eval(&content) } %>
@@ -2655,6 +2655,40 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
 .msie #product-list h3 {
   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;
+}
+
+.l-sidebar-left-bar ul{
+  background-color: #eeeeec;
+  border-radius: 5px;
+}
+
+.l-sidebar-left-bar a,
+.l-sidebar-right-bar a {
+  text-decoration: none;
+}
+
+.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 {
+  margin: 0;
+  padding: 0;
+}
+
 /* * * Show Product * * * * * * * * * * * * */
 .controller-catalog #show_product .product-pic {
@@ -6078,3 +6112,32 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
      margin: .8em 0 .2em;
      line-height: 1.5;
 }
+
+/* Sidebar Layout */
+
+.l-sidebar-left-bar {
+  float: left;
+  width: 20%;
+}
+
+.l-sidebar-left-content {
+  float: right;
+  width: 78%;
+}
+
+.l-sidebar-right-bar {
+  float: right;
+  width: 20%;
+}
+
+.l-sidebar-right-content {
+  float: left;
+  width: 78%;
+}
+
+/* Breadcrumb */
+
+#breadcrumb {
+  font-size: 16px;
+  margin: 15px 0;
+}
	@@ -3,4 +3,28 @@ module CatalogHelper		@@ -3,4 +3,28 @@ module CatalogHelper
3	include DisplayHelper	3	include DisplayHelper
4	include ManageProductsHelper	4	include ManageProductsHelper
5		5
		6	+ def breadcrumb(category)
		7	+ start = link_to(_('Start'), {:action => 'index'})
		8	+ ancestors = category.ancestors.map { \|c\| link_to(c.name, {:action => 'index', :level => c.id}) }.reverse
		9	+ current_level = content_tag('strong', category.name)
		10	+ all_items = [start] + ancestors + [current_level]
		11	+ content_tag('div', all_items.join(' → '), :id => 'breadcrumb')
		12	+ end
		13	+
		14	+ def category_link(category, sub = false)
		15	+ count = profile.products.from_category(category).count
		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
		20	+ end
		21	+
		22	+ def category_sub_links(category)
		23	+ sub_categories = []
		24	+ category.children.each do \|sub_category\|
		25	+ sub_categories << category_link(sub_category, true)
		26	+ end
		27	+ content_tag('ul', sub_categories) if sub_categories.size > 1
		28	+ end
		29	+
6	end	30	end
1	<% extra_content = [] %>	1	<% extra_content = [] %>
2	<% extra_content_list = [] %>	2	<% extra_content_list = [] %>
3		3
4	-<ul id="product-list">
5	- <li><h1><%= _('Products/Services') %></h1></li>	4	+<h1><%= _('Products/Services') %></h1>
6		5
		6	+<%= breadcrumb(@category) if params[:level] %>
		7	+
		8	+<div class='l-sidebar-left-bar'>
		9	+ <ul>
		10	+ <% if @categories.size > 0 %>
		11	+ <% @categories.each do \|category\| %>
		12	+ <%= category_link(category) %>
		13	+ <%= category_sub_links(category) %>
		14	+ <% end %>
		15	+ <% else %>
		16	+ <%= content_tag('li', _('There are no sub-categories for %s') % @category.name, :style => 'color: #555753; padding-bottom: 0.5em;') %>
		17	+ <% end %>
		18	+ </ul>
		19	+</div>
		20	+
		21	+<ul id="product-list" class="l-sidebar-left-content">
7	<% @products.each do \|product\| %>	22	<% @products.each do \|product\| %>
8	<% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { \|content\| instance_eval(&content) } %>	23	<% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { \|content\| instance_eval(&content) } %>
9	<% extra_content_list = @plugins.dispatch(:catalog_list_item_extras, product).collect { \|content\| instance_eval(&content) } %>	24	<% extra_content_list = @plugins.dispatch(:catalog_list_item_extras, product).collect { \|content\| instance_eval(&content) } %>
	@@ -2655,6 +2655,40 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation		@@ -2655,6 +2655,40 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2655	.msie #product-list h3 {	2655	.msie #product-list h3 {
2656	margin-top: -15px;	2656	margin-top: -15px;
2657	}	2657	}
		2658	+
		2659	+.l-sidebar-left-bar ul,
		2660	+.l-sidebar-right-bar ul {
		2661	+ list-style-type: none;
		2662	+ margin-left: 0;
		2663	+ padding: 1em 1em 0.5em 1em;
		2664	+}
		2665	+
		2666	+.l-sidebar-left-bar ul ul,
		2667	+.l-sidebar-right-bar ul ul {
		2668	+ padding-top: 0;
		2669	+}
		2670	+
		2671	+.l-sidebar-left-bar ul{
		2672	+ background-color: #eeeeec;
		2673	+ border-radius: 5px;
		2674	+}
		2675	+
		2676	+.l-sidebar-left-bar a,
		2677	+.l-sidebar-right-bar a {
		2678	+ text-decoration: none;
		2679	+}
		2680	+
		2681	+.l-sidebar-left-bar a:hover,
		2682	+.l-sidebar-right-bar a:hover {
		2683	+ text-decoration: underline;
		2684	+}
		2685	+
		2686	+.l-sidebar-left-bar li,
		2687	+.l-sidebar-right-bar li {
		2688	+ margin: 0;
		2689	+ padding: 0;
		2690	+}
		2691	+
2658	/* * * Show Product * * * * * * * * * * * * */	2692	/* * * Show Product * * * * * * * * * * * * */
2659		2693
2660	.controller-catalog #show_product .product-pic {	2694	.controller-catalog #show_product .product-pic {
	@@ -6078,3 +6112,32 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {		@@ -6078,3 +6112,32 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6078	margin: .8em 0 .2em;	6112	margin: .8em 0 .2em;
6079	line-height: 1.5;	6113	line-height: 1.5;
6080	}	6114	}
		6115	+
		6116	+/* Sidebar Layout */
		6117	+
		6118	+.l-sidebar-left-bar {
		6119	+ float: left;
		6120	+ width: 20%;
		6121	+}
		6122	+
		6123	+.l-sidebar-left-content {
		6124	+ float: right;
		6125	+ width: 78%;
		6126	+}
		6127	+
		6128	+.l-sidebar-right-bar {
		6129	+ float: right;
		6130	+ width: 20%;
		6131	+}
		6132	+
		6133	+.l-sidebar-right-content {
		6134	+ float: left;
		6135	+ width: 78%;
		6136	+}
		6137	+
		6138	+/* Breadcrumb */
		6139	+
		6140	+#breadcrumb {
		6141	+ font-size: 16px;
		6142	+ margin: 15px 0;
		6143	+}