Download as
Browse Code »

Commit af6851a2294a1321ac6f1a0ba83c83b39708ad3f

Authored by Aurélio A. Heckert
1 parent aaefdf5b
Exists in master and in 29 other branches add_member_task_reject_details, admin_visible_profile, article-list-template, community_notifications, contact_admin_translation, event_fixes, fix_comments_pagination, fix_rails4_organization_ratings, fix_sign_up_form, follow_step_fix, forum_topic_creation, mirror_block_improvements, multi_env_on_remote_user, new_security, noosfero_spb_ci, organization_ratings_improvements, organization_ratings_link_to_profile_stable-spb-1.3, organization_ratings_translations_fix, profile_api_improvements, ratings_minor_fixes, remote_user_fix, send_email_to_admins, stable-spb-1.3, stable-spb-1.3-fixes, stable-spb-1.4, stable-spb-1.5, suggest_rejected_value, web_steps_improvements, xss_terminate_custom_options

Correct product catalog's "expand-boxes" 

   * Correct multiple id generation on catalog/index.rhtml
   * Better main floating box element selection with a class
   * Remove txt2html from description. (WTF!?)
   * catalog.js rewrite. Simpler and working nice.
   * Move width/position style from JS do CSS.

closes ActionItem2621
Showing 3 changed files with 42 additions and 54 deletions   Show diff stats
app/views/catalog/index.rhtml
  Diff comments   View file @af6851a
@@ -64,20 +64,20 @@ @@ -64,20 +64,20 @@
64 64
65 <% if product.description %> 65 <% if product.description %>
66 <li class="product-description expand-box"> 66 <li class="product-description expand-box">
67 - <span id="product-description-button"><%= _('description') %></span>  
68 - <div> 67 + <span class="product-description-button"><%= _('description') %></span>
  68 + <div class="float-box">
69 <div class="arrow"></div> 69 <div class="arrow"></div>
70 - <div class="content" id="product-description"><%= txt2html(product.description || '') %></div> 70 + <div class="content"><%= product.description %></div>
71 </div> 71 </div>
72 </li> 72 </li>
73 <% end %> 73 <% end %>
74 74
75 <% if product.price_described? %> 75 <% if product.price_described? %>
76 <li class="product-price-composition expand-box"> 76 <li class="product-price-composition expand-box">
77 - <span id="product-price-composition-button"><%= _('price composition') %></span>  
78 - <div> 77 + <span class="product-price-composition-button"><%= _('price composition') %></span>
  78 + <div class="float-box">
79 <div class="arrow"></div> 79 <div class="arrow"></div>
80 - <div class="content" id="product-price-composition"> 80 + <div class="content">
81 <% product.inputs.relevant_to_price.each do |i| %> 81 <% product.inputs.relevant_to_price.each do |i| %>
82 <div class="search-product-input-dots-to-price"> 82 <div class="search-product-input-dots-to-price">
83 <div class="search-product-input-name"><%= i.product_category.name %></div> 83 <div class="search-product-input-name"><%= i.product_category.name %></div>
@@ -98,9 +98,9 @@ @@ -98,9 +98,9 @@
98 <% if product.inputs.count > 0 %> 98 <% if product.inputs.count > 0 %>
99 <li class="product-inputs expand-box"> 99 <li class="product-inputs expand-box">
100 <span id="inputs-button"><%= _('inputs and raw materials') %></span> 100 <span id="inputs-button"><%= _('inputs and raw materials') %></span>
101 - <div> 101 + <div class="float-box">
102 <div class="arrow"></div> 102 <div class="arrow"></div>
103 - <div class="content" id="inputs-description"> 103 + <div class="content">
104 <% product.inputs.each do |i| %> 104 <% product.inputs.each do |i| %>
105 <div> 105 <div>
106 <%= _('%{amount_used} %{unit} of') % {:amount_used => i.amount_used, :unit => i.unit.singular} + ' ' if i.has_all_price_details? %> 106 <%= _('%{amount_used} %{unit} of') % {:amount_used => i.amount_used, :unit => i.unit.singular} + ' ' if i.has_all_price_details? %>
public/javascripts/catalog.js
  Diff comments   View file @af6851a
1 (function($) { 1 (function($) {
2 2
3 -$('#product-list .product .expand-box').live('click', function () {  
4 - $('.expand-box').each(function(index, element){ this.clicked = false; toggle_expandbox(this); });  
5 - this.clicked = !this.clicked;  
6 - toggle_expandbox(this);  
7 - $.each($(this).siblings('.expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });  
8 -  
9 - return false;  
10 -});  
11 -  
12 -$(document).live('click', function() {  
13 - $.each($('#product-list .product .expand-box'), function(index, value) { value.clicked = false; toggle_expandbox(value); });  
14 -});  
15 -  
16 -$(document).click(function (event) {  
17 - if ($(event.target).parents('.expand-box').length == 0) {  
18 - $('.expand-box').each(function(index, element){  
19 - $(element).removeClass('open');  
20 - $(element).children('div').toggle(false);  
21 - });  
22 - }  
23 -});  
24 -  
25 -var rows = {};  
26 -$('#product-list .product').each(function (index, element) {  
27 - obj = rows[$(element).offset().top] || {};  
28 -  
29 - obj.heights = obj.heights || [];  
30 - obj.elements = obj.elements || [];  
31 - obj.heights.push($(element).height());  
32 - obj.elements.push(element);  
33 -  
34 - rows[$(element).offset().top] = obj;  
35 -});  
36 -  
37 -$.each(rows, function(top, obj) {  
38 - maxWidth = Array.max(obj.heights);  
39 - $(obj.elements).height(maxWidth);  
40 -}); 3 + function toggle_expandbox(element, open) {
  4 + element.clicked = open;
  5 + $(element).toggleClass('open', open);
  6 + }
  7 +
  8 + $('#product-list .expand-box').live('click', function () {
  9 + var me = this;
  10 + $('.expand-box').each(function(index, element){
  11 + if ( element != me ) toggle_expandbox(element, false);
  12 + });
  13 + toggle_expandbox(me, !me.clicked);
  14 + return false;
  15 + });
  16 +
  17 + $('#product-list .float-box').live('click', function () {
  18 + return false;
  19 + });
  20 +
  21 + $(document).click(function (event) {
  22 + if ($(event.target).parents('.expand-box').length == 0) {
  23 + $('#product-list .expand-box').each(function(index, element){
  24 + toggle_expandbox(element, false);
  25 + });
  26 + }
  27 + });
41 28
42 })(jQuery); 29 })(jQuery);
43 -  
44 -function toggle_expandbox(e) {  
45 - jQuery(e).toggleClass('open', e.clicked);  
46 - jQuery(e).children('div').toggle(e.clicked).css({left: jQuery(e).position().left-180, top: jQuery(e).position().top-10});  
47 -}  
public/stylesheets/application.css
  Diff comments   View file @af6851a
@@ -2509,6 +2509,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation @@ -2509,6 +2509,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2509 -webkit-border-radius: 10px 0px 0px 10px; 2509 -webkit-border-radius: 10px 0px 0px 10px;
2510 border-radius: 10px 0px 0px 10px; 2510 border-radius: 10px 0px 0px 10px;
2511 width: 202px; 2511 width: 202px;
  2512 + position: relative;
2512 } 2513 }
2513 #product-list .expand-box > span { 2514 #product-list .expand-box > span {
2514 padding-left: 20px; 2515 padding-left: 20px;
@@ -2539,17 +2540,22 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation @@ -2539,17 +2540,22 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2539 #product-list li.product .expand-box > span { 2540 #product-list li.product .expand-box > span {
2540 text-transform: uppercase; 2541 text-transform: uppercase;
2541 } 2542 }
2542 -#product-list li.product .expand-box > div { 2543 +#product-list li.product .expand-box .float-box {
2543 display: none; 2544 display: none;
2544 position: absolute; 2545 position: absolute;
  2546 + left: -220px;
  2547 + top: -11px;
2545 z-index: 10; 2548 z-index: 10;
2546 } 2549 }
  2550 +#product-list li.product .expand-box.open .float-box {
  2551 + display: block;
  2552 +}
2547 #product-list li.product .expand-box .content { 2553 #product-list li.product .expand-box .content {
2548 font-size: 11px; 2554 font-size: 11px;
2549 padding: 6px 5px; 2555 padding: 6px 5px;
2550 overflow: auto; 2556 overflow: auto;
2551 max-height: 200px; 2557 max-height: 200px;
2552 - width: 160px; 2558 + width: 200px;
2553 border-radius: 5px; 2559 border-radius: 5px;
2554 -moz-border-radius: 5px; 2560 -moz-border-radius: 5px;
2555 -webkit-border-radius: 5px; 2561 -webkit-border-radius: 5px;
@@ -2784,7 +2790,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation @@ -2784,7 +2790,7 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2784 position: relative; 2790 position: relative;
2785 clear: left; 2791 clear: left;
2786 } 2792 }
2787 -#product-description, #product-details, #product-info, .input-item { 2793 +#product-details, #product-info, .input-item {
2788 overflow: hidden; 2794 overflow: hidden;
2789 } 2795 }
2790 #product-info { 2796 #product-info {