Commit 9009a9a6d56b0092ec19419838566e69667cda50
1 parent
0d33fd94
Exists in
master
and in
29 other branches
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
Showing
2 changed files
with
35 additions
and
20 deletions
Show diff stats
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; | ... | ... |