Commit 9009a9a6d56b0092ec19419838566e69667cda50

Authored by Rafael Martins
1 parent 0d33fd94

Various CSS fixes for catalog

* product name left-aligned, not justified
* on product name, lines too separated
* exchanged line-height for margin-top/bottom
* border-radius wasn't working on Mozilla
* catalog product buttons highlight when mouse over
* another small fix related to border-radius
* arrow not appearing between buttons and content
app/views/catalog/index.rhtml
@@ -42,22 +42,26 @@ @@ -42,22 +42,26 @@
42 <% if product.description %> 42 <% if product.description %>
43 <li class="product-description expand-box"> 43 <li class="product-description expand-box">
44 <span id="product-description-button"><%= _('description') %></span> 44 <span id="product-description-button"><%= _('description') %></span>
45 - <div class="arrow"></div>  
46 - <div class="content" id="product-description"><%= txt2html(product.description || '') %></div> 45 + <div>
  46 + <div class="arrow"></div>
  47 + <div class="content" id="product-description"><%= txt2html(product.description || '') %></div>
  48 + </div>
47 </li> 49 </li>
48 <% end %> 50 <% end %>
49 51
50 <% if product.is_open_price? %> 52 <% if product.is_open_price? %>
51 <li class="product-price-composition expand-box"> 53 <li class="product-price-composition expand-box">
52 <span id="product-price-composition-button"><%= _('price composition') %></span> 54 <span id="product-price-composition-button"><%= _('price composition') %></span>
53 - <div class="arrow"></div>  
54 - <div class="content" id="product-price-composition">  
55 - <% product.inputs.each do |i| %>  
56 - <div class="search-product-input-dots-to-price">  
57 - <div class="search-product-input-name"><%= i.product_category.name %></div>  
58 - <%= price_span i.price_per_unit * i.amount_used, :class => 'search-product-input-price' %>  
59 - </div>  
60 - <% end %> 55 + <div>
  56 + <div class="arrow"></div>
  57 + <div class="content" id="product-price-composition">
  58 + <% product.inputs.each do |i| %>
  59 + <div class="search-product-input-dots-to-price">
  60 + <div class="search-product-input-name"><%= i.product_category.name %></div>
  61 + <%= price_span i.price_per_unit * i.amount_used, :class => 'search-product-input-price' %>
  62 + </div>
  63 + <% end %>
  64 + </div>
61 </div> 65 </div>
62 </li> 66 </li>
63 <% end %> 67 <% end %>
@@ -65,12 +69,14 @@ @@ -65,12 +69,14 @@
65 <% if product.inputs.count > 0 %> 69 <% if product.inputs.count > 0 %>
66 <li class="product-inputs expand-box"> 70 <li class="product-inputs expand-box">
67 <span id="inputs-button"><%= _('inputs and raw materials') %></span> 71 <span id="inputs-button"><%= _('inputs and raw materials') %></span>
68 - <div class="arrow"></div>  
69 - <div class="content" id="inputs-description">  
70 - <% product.inputs.each do |i| %>  
71 - <div><%= "#{i.amount_used} #{i.unit.singular} #{_('of')} " if i.has_all_price_details? %>  
72 - <%= "#{i.product_category.name}" %></div>  
73 - <% end %> 72 + <div>
  73 + <div class="arrow"></div>
  74 + <div class="content" id="inputs-description">
  75 + <% product.inputs.each do |i| %>
  76 + <div><%= "#{i.amount_used} #{i.unit.singular} #{_('of')} " if i.has_all_price_details? %>
  77 + <%= "#{i.product_category.name}" %></div>
  78 + <% end %>
  79 + </div>
74 </div> 80 </div>
75 </li> 81 </li>
76 <% end %> 82 <% end %>
public/stylesheets/application.css
@@ -2988,13 +2988,18 @@ div#activation_enterprise div { @@ -2988,13 +2988,18 @@ div#activation_enterprise div {
2988 padding: 10px 30px 10px 0; 2988 padding: 10px 30px 10px 0;
2989 margin-bottom: 10px; 2989 margin-bottom: 10px;
2990 } 2990 }
2991 -#product-list .expand-box.hover { 2991 +#product-list .expand-box:hover {
2992 background-color: #28F091; 2992 background-color: #28F091;
2993 } 2993 }
2994 #product-list .expand-box { 2994 #product-list .expand-box {
2995 background-color: #1EB46D; 2995 background-color: #1EB46D;
2996 margin-bottom: 3px; 2996 margin-bottom: 3px;
2997 - border-radius: 10px 0 0 10px; 2997 + -moz-border-radius-topleft: 10px;
  2998 + -moz-border-radius-topright: 0px;
  2999 + -moz-border-radius-bottomright: 0px;
  3000 + -moz-border-radius-bottomleft: 10px;
  3001 + -webkit-border-radius: 10px 0px 0px 10px;
  3002 + border-radius: 10px 0px 0px 10px;
2998 width: 202px; 3003 width: 202px;
2999 } 3004 }
3000 #product-list .expand-box > span { 3005 #product-list .expand-box > span {
@@ -3038,6 +3043,8 @@ div#activation_enterprise div { @@ -3038,6 +3043,8 @@ div#activation_enterprise div {
3038 max-height: 200px; 3043 max-height: 200px;
3039 width: 160px; 3044 width: 160px;
3040 border-radius: 5px; 3045 border-radius: 5px;
  3046 + -moz-border-radius: 5px;
  3047 + -webkit-border-radius: 5px;
3041 background: #DCFFD7; 3048 background: #DCFFD7;
3042 border: 2px solid #1EB46D; 3049 border: 2px solid #1EB46D;
3043 min-height: 30px; 3050 min-height: 30px;
@@ -3062,10 +3069,12 @@ div#activation_enterprise div { @@ -3062,10 +3069,12 @@ div#activation_enterprise div {
3062 #product-list li.product.not-available .product-unit { 3069 #product-list li.product.not-available .product-unit {
3063 color: #ACACAC !important; 3070 color: #ACACAC !important;
3064 } 3071 }
3065 -#product-list .product-link a {  
3066 - line-height: 29px; 3072 +#product-list .product-link {
  3073 + margin-top: 5px;
  3074 + margin-bottom: 5px;
3067 color: #006672; 3075 color: #006672;
3068 font-weight: bold; 3076 font-weight: bold;
  3077 + text-align: left;
3069 } 3078 }
3070 #product-list .prop { 3079 #product-list .prop {
3071 float:right; 3080 float:right;