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,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; |