Product Catalog and Product Categories Block styles

ActionItem896

Product Catalog and Product Categories Block styles
ActionItem896
Aurélio A. Heckert
1 parent 72889f54
Showing 3 changed files with 123 additions and 153 deletions Show diff stats
app/views/catalog/index.rhtml
public/designs/themes/base/style.css
public/stylesheets/application.css
 <% extra_content = [] %>
 <% extra_content_list = [] %>
+<div id="product-catalog">
+
 <h1><%= _('Products/Services') %></h1>
 <%= breadcrumb(@category) if params[:level] %>
-<ul id="product-list" class="l-sidebar-left-content">
+<ul id="product-list">
   <% @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) } %>
@@ -113,10 +115,11 @@
       </ul>
     </li>
   <% end %>
-</ul>
+</ul><!-- end id="product-list" -->
 <%= pagination_links @products, :params => {:controller => :catalog, :action => :index, :profile => profile.identifier} %>
 <%= add_zoom_to_images %>
 <br style="clear:both"/>
+</div><!-- end id="product-catalog" -->
@@ -699,6 +699,110 @@ div#notice {
   filter:alpha(opacity=50);
 }
+
+/********************* 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;
+}
+
+.product-categories-block li li div {
+  padding: 0 0 0 1.5em;
+}
+
+.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;
+	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);
+}
+
+.block.product-categories-block .catalog-categories-list a {
+  font-weight: bold;
+}
+
+.block.product-categories-block .catalog-categories-list ul a {
+  font-weight: normal;
+}
+
+.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;
+}
+
 /********************* Environment Statistics ************************/
 #content .environment-statistics-block ul {
@@ -2509,7 +2509,13 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
 /* ==> @import url('products.css'); <== */
 /* * * Products catalog * * * * * * * * * * * * */
+#product-catalog {
+  text-align: center;
+}
+
 #product-list {
+  display: inline-block;
+  text-align: left;
   line-height: 20px;
   margin: 0px;
   padding: 0px;
@@ -2521,11 +2527,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
   list-style: none;
 }
 #product-list li.product {
+  display: inline-block;
   width: 200px;
   min-height: 280px;
-  padding: 10px 30px 10px 0;
+  padding: 10px 15px;
   margin-bottom: 10px;
-  display: inline-block;
   vertical-align: top;
 }
 #product-list .expand-box:hover {
@@ -2735,132 +2741,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
   margin-top: -15px;
 }
-.l-sidebar-right-bar ul {
-  list-style-type: none;
-  margin-left: 0;
-  padding: 1em 1em 0.5em 1em;
-}
-
-.l-sidebar-right-bar ul ul {
-  padding-left: 1em;
-  margin-top: 3px;
-}
-
-.l-sidebar-right-bar li {
-  margin: 3px 0px;
-  padding: 0px;
-}
-
-.l-sidebar-right-bar a {
-  text-decoration: none;
-  font-size: 120%;
-}
-
-.l-sidebar-right-bar a:hover {
-  text-decoration: underline;
-}
-
-/* * * 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;
-}
-
-.product-categories-block li li div {
-  padding: 0 0 0 1.5em;
-}
-
-.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;
-	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);
-}
-
-.block.product-categories-block .catalog-categories-list a {
-  font-weight: bold;
-}
-
-.block.product-categories-block .catalog-categories-list ul a {
-  font-weight: normal;
-}
-
-.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;
+#product-list .highlighted img.star {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  z-index: 1;
 }
 /* * * Show Product * * * * * * * * * * * * */
@@ -6290,28 +6175,12 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
      line-height: 1.5;
 }
-/* Sidebar Layout */
-
-.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;
+  text-align: left;
 }
 .controller-profile_editor #profile-data {
@@ -6363,9 +6232,3 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
   text-align: center;
 }
-#product-list .highlighted img.star {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  z-index: 1;
-}
	@@ -699,6 +699,110 @@ div#notice {		@@ -699,6 +699,110 @@ div#notice {
699	filter:alpha(opacity=50);	699	filter:alpha(opacity=50);
700	}	700	}
701		701
		702	+
		703	+/******************* Product Categories Block ********************/
		704	+
		705	+.product-categories-block .catalog-home-link {
		706	+ display: block;
		707	+ background: rgba(0,0,0,0.08);
		708	+ font-weight: bold;
		709	+ text-align: center;
		710	+ border-radius: 5px;
		711	+ padding: 0px;
		712	+ line-height: 200%;
		713	+ text-decoration: none;
		714	+ color: #000;
		715	+}
		716	+.product-categories-block .catalog-home-link:hover {
		717	+ background: rgba(0,0,0,0.6);
		718	+ color: #FFF;
		719	+ text-decoration: none;
		720	+}
		721	+
		722	+.product-categories-block .catalog-categories-list {
		723	+ margin-top: 0.5em;
		724	+}
		725	+
		726	+.product-categories-block ul {
		727	+ list-style-type: none;
		728	+ margin: 0px;
		729	+ padding: 0px;
		730	+ border-radius: 5px;
		731	+ color: rgba(0,0,0,0.4);
		732	+}
		733	+
		734	+.product-categories-block li {
		735	+ margin: 0;
		736	+ padding: 0;
		737	+ white-space: nowrap;
		738	+}
		739	+
		740	+.product-categories-block li li div {
		741	+ padding: 0 0 0 1.5em;
		742	+}
		743	+
		744	+.product-categories-block .catalog-categories-list a {
		745	+ text-decoration: none;
		746	+ font-size: 120%;
		747	+ line-height: 150%;
		748	+ color: #333;
		749	+ overflow: hidden;
		750	+ text-overflow: ellipsis;
		751	+ display: inline-block;
		752	+ padding: 0 0.3em 0 0.5em;
		753	+ border-radius: 5px;
		754	+ max-width: 80%;
		755	+ vertical-align: middle;
		756	+}
		757	+.product-categories-block .catalog-categories-list ul a {
		758	+ text-decoration: none;
		759	+ font-size: 110%;
		760	+ line-height: 163.6%;
		761	+}
		762	+.product-categories-block .catalog-categories-list div:hover a:hover {
		763	+ background: rgba(0,0,0,0.6);
		764	+ color: #FFF;
		765	+ text-decoration: none;
		766	+}
		767	+
		768	+.product-categories-block .catalog-categories-list div:hover a,
		769	+.product-categories-block .catalog-categories-list div:hover .count {
		770	+ background: rgba(0,0,0,0.08);
		771	+}
		772	+
		773	+.block.product-categories-block .catalog-categories-list a {
		774	+ font-weight: bold;
		775	+}
		776	+
		777	+.block.product-categories-block .catalog-categories-list ul a {
		778	+ font-weight: normal;
		779	+}
		780	+
		781	+.product-categories-block a:hover {
		782	+ text-decoration: underline;
		783	+}
		784	+
		785	+.product-categories-block .count {
		786	+ display: inline-block;
		787	+ vertical-align: middle;
		788	+ margin-left: -0.2em;
		789	+ padding: 0 0.2em;
		790	+ line-height: 180%;
		791	+ border-radius: 5px;
		792	+}
		793	+
		794	+.block.product-categories-block .count:before {
		795	+ content: "(";
		796	+}
		797	+.block.product-categories-block .count:after {
		798	+ content: ")";
		799	+}
		800	+
		801	+.catalog-categories-notice {
		802	+ color: rgba(0,0,0,0.3);
		803	+ padding: 0.5em 1em;
		804	+}
		805	+
702	/******************* Environment Statistics **********************/	806	/******************* Environment Statistics **********************/
703		807
704	#content .environment-statistics-block ul {	808	#content .environment-statistics-block ul {
	@@ -2509,7 +2509,13 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation		@@ -2509,7 +2509,13 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2509	/* ==> @import url('products.css'); <== */	2509	/* ==> @import url('products.css'); <== */
2510	/* * * Products catalog * * * * * * * * * * * * */	2510	/* * * Products catalog * * * * * * * * * * * * */
2511		2511
		2512	+#product-catalog {
		2513	+ text-align: center;
		2514	+}
		2515	+
2512	#product-list {	2516	#product-list {
		2517	+ display: inline-block;
		2518	+ text-align: left;
2513	line-height: 20px;	2519	line-height: 20px;
2514	margin: 0px;	2520	margin: 0px;
2515	padding: 0px;	2521	padding: 0px;
	@@ -2521,11 +2527,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation		@@ -2521,11 +2527,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2521	list-style: none;	2527	list-style: none;
2522	}	2528	}
2523	#product-list li.product {	2529	#product-list li.product {
		2530	+ display: inline-block;
2524	width: 200px;	2531	width: 200px;
2525	min-height: 280px;	2532	min-height: 280px;
2526	- padding: 10px 30px 10px 0;	2533	+ padding: 10px 15px;
2527	margin-bottom: 10px;	2534	margin-bottom: 10px;
2528	- display: inline-block;
2529	vertical-align: top;	2535	vertical-align: top;
2530	}	2536	}
2531	#product-list .expand-box:hover {	2537	#product-list .expand-box:hover {
	@@ -2735,132 +2741,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation		@@ -2735,132 +2741,11 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2735	margin-top: -15px;	2741	margin-top: -15px;
2736	}	2742	}
2737		2743
2738	-.l-sidebar-right-bar ul {
2739	- list-style-type: none;
2740	- margin-left: 0;
2741	- padding: 1em 1em 0.5em 1em;
2742	-}
2743	-
2744	-.l-sidebar-right-bar ul ul {
2745	- padding-left: 1em;
2746	- margin-top: 3px;
2747	-}
2748	-
2749	-.l-sidebar-right-bar li {
2750	- margin: 3px 0px;
2751	- padding: 0px;
2752	-}
2753	-
2754	-.l-sidebar-right-bar a {
2755	- text-decoration: none;
2756	- font-size: 120%;
2757	-}
2758	-
2759	-.l-sidebar-right-bar a:hover {
2760	- text-decoration: underline;
2761	-}
2762	-
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 {
2795	- margin: 0;
2796	- padding: 0;
2797	- white-space: nowrap;
2798	-}
2799	-
2800	-.product-categories-block li li div {
2801	- padding: 0 0 0 1.5em;
2802	-}
2803	-
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;
2813	- border-radius: 5px;
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;
2826	-}
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	-}
2832	-
2833	-.block.product-categories-block .catalog-categories-list a {
2834	- font-weight: bold;
2835	-}
2836	-
2837	-.block.product-categories-block .catalog-categories-list ul a {
2838	- font-weight: normal;
2839	-}
2840	-
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: "(";
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;	2744	+#product-list .highlighted img.star {
		2745	+ position: absolute;
		2746	+ top: 2px;
		2747	+ right: 2px;
		2748	+ z-index: 1;
2864	}	2749	}
2865		2750
2866	/* * * Show Product * * * * * * * * * * * * */	2751	/* * * Show Product * * * * * * * * * * * * */
	@@ -6290,28 +6175,12 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {		@@ -6290,28 +6175,12 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6290	line-height: 1.5;	6175	line-height: 1.5;
6291	}	6176	}
6292		6177
6293	-/* Sidebar Layout */
6294	-
6295	-.l-sidebar-left-content {
6296	- float: right;
6297	- width: 78%;
6298	-}
6299	-
6300	-.l-sidebar-right-bar {
6301	- float: right;
6302	- width: 20%;
6303	-}
6304	-
6305	-.l-sidebar-right-content {
6306	- float: left;
6307	- width: 78%;
6308	-}
6309	-
6310	/* Breadcrumb */	6178	/* Breadcrumb */
6311		6179
6312	#breadcrumb {	6180	#breadcrumb {
6313	font-size: 16px;	6181	font-size: 16px;
6314	margin: 15px 0;	6182	margin: 15px 0;
		6183	+ text-align: left;
6315	}	6184	}
6316		6185
6317	.controller-profile_editor #profile-data {	6186	.controller-profile_editor #profile-data {
	@@ -6363,9 +6232,3 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {		@@ -6363,9 +6232,3 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6363	text-align: center;	6232	text-align: center;
6364	}	6233	}
6365		6234
6366	-#product-list .highlighted img.star {
6367	- position: absolute;
6368	- top: 2px;
6369	- right: 2px;
6370	- z-index: 1;
6371	-}