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 42 <% if product.description %>
43 43 <li class="product-description expand-box">
44 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 49 </li>
48 50 <% end %>
49 51  
50 52 <% if product.is_open_price? %>
51 53 <li class="product-price-composition expand-box">
52 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 65 </div>
62 66 </li>
63 67 <% end %>
... ... @@ -65,12 +69,14 @@
65 69 <% if product.inputs.count > 0 %>
66 70 <li class="product-inputs expand-box">
67 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 80 </div>
75 81 </li>
76 82 <% end %>
... ...
public/stylesheets/application.css
... ... @@ -2988,13 +2988,18 @@ div#activation_enterprise div {
2988 2988 padding: 10px 30px 10px 0;
2989 2989 margin-bottom: 10px;
2990 2990 }
2991   -#product-list .expand-box.hover {
  2991 +#product-list .expand-box:hover {
2992 2992 background-color: #28F091;
2993 2993 }
2994 2994 #product-list .expand-box {
2995 2995 background-color: #1EB46D;
2996 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 3003 width: 202px;
2999 3004 }
3000 3005 #product-list .expand-box > span {
... ... @@ -3038,6 +3043,8 @@ div#activation_enterprise div {
3038 3043 max-height: 200px;
3039 3044 width: 160px;
3040 3045 border-radius: 5px;
  3046 + -moz-border-radius: 5px;
  3047 + -webkit-border-radius: 5px;
3041 3048 background: #DCFFD7;
3042 3049 border: 2px solid #1EB46D;
3043 3050 min-height: 30px;
... ... @@ -3062,10 +3069,12 @@ div#activation_enterprise div {
3062 3069 #product-list li.product.not-available .product-unit {
3063 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 3075 color: #006672;
3068 3076 font-weight: bold;
  3077 + text-align: left;
3069 3078 }
3070 3079 #product-list .prop {
3071 3080 float:right;
... ...