Commit 2e98ca49e04597bfa5920f249ba2850134175cef
1 parent
967cac32
Exists in
master
and in
29 other branches
ActionItem260: the search box is better and the search result is in organized boxes
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1668 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing
17 changed files
with
238 additions
and
37 deletions
Show diff stats
app/helpers/application_helper.rb
... | ... | @@ -312,9 +312,11 @@ module ApplicationHelper |
312 | 312 | link_to name, :controller => 'search', :action => 'category_index', :category_path => category.path.split('/') |
313 | 313 | end |
314 | 314 | |
315 | - def link_to_product(product) | |
315 | + def link_to_product(product, opts={}) | |
316 | 316 | return _('No product') unless product |
317 | - link_to product.name, :controller => 'catalog', :action => 'show', :id => product, :profile => product.enterprise.identifier | |
317 | + link_to content_tag( 'span', product.name ), | |
318 | + { :controller => 'catalog', :action => 'show', :id => product, :profile => product.enterprise.identifier }, | |
319 | + opts | |
318 | 320 | end |
319 | 321 | |
320 | 322 | def partial_for_class(klass) | ... | ... |
app/views/search/_display_results.rhtml
1 | +<div id="search-results" class="<%= 'only-one-result-box' if @results.size == 1 %>"> | |
2 | +<% pos = :odd %> | |
1 | 3 | <% @results.each do |name,results| %> |
2 | 4 | <% if !results.nil? and !results.empty? %> |
3 | - <div id="search-results-<%= name %>"> | |
5 | + <div class="search-results-<%= name %> search-results-box <%= pos==:odd ? pos=:even : pos=:odd %>"> | |
4 | 6 | <% if params[:action] != 'assets' %> |
5 | 7 | <h3><%= @names[name] %></h3> |
6 | 8 | <% end %> |
7 | - <ul> | |
8 | - <% results.each do |hit| %> | |
9 | - <%= render :partial => partial_for_class(hit.class), :object => hit %> | |
9 | + <% partial = partial_for_class results.first.class %> | |
10 | + <div class="search-results-innerbox search-results-type-<%= partial %> <%= 'common-profile-list-block' if partial == 'profile' %>"> | |
11 | + <ul> | |
12 | + <% results.each do |hit| %> | |
13 | + <%= render :partial => partial, :object => hit %> | |
14 | + <% end %> | |
15 | + </ul> | |
16 | + </div><!-- end class="search-results-innerbox" --> | |
17 | + </div><!-- end class="search-results-<%= name %>" --> | |
18 | + <% else %> | |
19 | + <div class="search-results-<%= name %> search-results-empty search-results-box <%= pos==:odd ? pos=:even : pos=:odd %>"> | |
20 | + <% if params[:action] != 'assets' %> | |
21 | + <h3><%= @names[name] %></h3> | |
10 | 22 | <% end %> |
11 | - </ul> | |
12 | - </div> | |
23 | + <div class="search-results-innerbox search-results-type-empty"> | |
24 | + <div> <%= _('None') %> </div> | |
25 | + </div><!-- end class="search-results-innerbox" --> | |
26 | + </div><!-- end class="search-results-<%= name %>" --> | |
13 | 27 | <% end %> |
14 | 28 | <% end %> |
29 | +<br style="clear:both" /> | |
30 | +<div><!-- end id="search-results" --> | ... | ... |
app/views/search/_product.rhtml
1 | 1 | <%# FIXME add more information %> |
2 | 2 | |
3 | 3 | <li> |
4 | - <div class='search-result-text'> | |
5 | - <%= image_tag(product.image.public_filename(:minor)) if product.image %> | |
4 | + <%= link_to_product product, :class => 'product-pic', :style => 'background-image:url(%s)' % | |
5 | + ( product.image ? product.image.public_filename(:minor) : | |
6 | + '/images/icons-app/product-default-pic-minor.png' ) %> | |
6 | 7 | <strong> |
7 | - <%= link_to_product(product) %> | |
8 | + <%= link_to_product product %> | |
8 | 9 | </strong> |
9 | 10 | <ul> |
10 | 11 | <li> <%= _('Price: %d') % product.price %> </li> |
... | ... | @@ -13,5 +14,4 @@ |
13 | 14 | <% end %> |
14 | 15 | <li> <%= _('Category: %s') % link_to_category(product.product_category) %> </li> |
15 | 16 | </ul> |
16 | - </div> | |
17 | 17 | </li> | ... | ... |
app/views/search/_profile.rhtml
1 | 1 | <%# FIXME add more information %> |
2 | -<li> | |
3 | - <div class='search-result-text'> | |
4 | - <%= image_tag(profile.image.public_filename(:minor)) if profile.image %> | |
5 | - <strong> | |
6 | - <%= link_to_homepage(profile.name, profile.identifier) %> | |
7 | - </strong> | |
8 | - </div> | |
9 | -</li> | |
2 | +<li> <%= profile_image_link profile, :portrait %> </li> | ... | ... |
app/views/search/popup.rhtml
1 | +<div id="search-popup"> | |
2 | + | |
1 | 3 | <h2><%= _('Search %s') % @environment.name %></h2> |
2 | 4 | |
3 | 5 | <% form_tag({:action => 'index', :category_path => (@category ? @category.explode_path : [])}, :method => 'get') do%> |
4 | 6 | |
5 | - <div id='search-field' style='text-align: center;'> | |
6 | - <%= text_field_tag('query', '', :size => 50) %> | |
7 | + <div class="search-field"> | |
8 | + <span class="formfield"> | |
9 | + <%= text_field_tag 'query', '', :id => 'popup-search-input', :size => 50 %> | |
10 | + <%= javascript_tag '$("popup-search-input").focus()' %> | |
11 | + </span> | |
7 | 12 | <%= submit_button(:search, _('Search')) %> |
8 | 13 | </div> |
9 | 14 | |
... | ... | @@ -21,17 +26,19 @@ |
21 | 26 | </ul> |
22 | 27 | <% end %> |
23 | 28 | |
24 | - <h3><%= _('Search for:') %></h3> | |
25 | - | |
26 | - <ul> | |
27 | - <% @search_in.each do |thing, name| %> | |
28 | - <li> | |
29 | - <%= check_box_tag 'find_in[]', thing.to_s, true %> | |
30 | - <span><%= gettext(name) %></span> | |
31 | - </li> | |
32 | - <% end %> | |
33 | - </ul> | |
34 | - | |
29 | + <div class="search-options"> | |
30 | + <h3><%= _('Search for:') %></h3> | |
31 | + <ul> | |
32 | + <% @search_in.map { |t,n| [t,gettext(n)] } . | |
33 | + sort_by(&:last).each do |thing, name| %> | |
34 | + <li> | |
35 | + <%= check_box_tag 'find_in[]', thing.to_s, true %> | |
36 | + <span><%= name %></span> | |
37 | + </li> | |
38 | + <% end %> | |
39 | + </ul> | |
40 | + <br style="clear:both" /> | |
41 | + </div><!-- fim class="search-options" --> | |
35 | 42 | |
36 | 43 | <% button_bar do %> |
37 | 44 | <%= submit_button(:search, _('Search')) %> |
... | ... | @@ -43,3 +50,5 @@ |
43 | 50 | <script type='text/javascript'> |
44 | 51 | $('query').focus(); |
45 | 52 | </script> |
53 | + | |
54 | +</div><!-- fim id="search-popup" --> | ... | ... |
public/designs/icons/default/gnome-search.png
1 KB
public/designs/icons/default/gtk-find.png
871 Bytes
public/designs/icons/default/style.css
... | ... | @@ -16,7 +16,7 @@ |
16 | 16 | .icon-add { background-image: url(add-HC.gif) } |
17 | 17 | .icon-up { background-image: url(go-up-HC.gif) } |
18 | 18 | .icon-down { background-image: url(go-down-HC.gif) } |
19 | -.icon-search { background-image: url(gnome-search.png) } | |
19 | +.icon-search { background-image: url(search-HC.gif) } | |
20 | 20 | .icon-ok { background-image: url(ok-HC.gif) } |
21 | 21 | .icon-login { background-image: url(key-HC.gif) } |
22 | 22 | .icon-help { background-image: url(help.gif) } | ... | ... |
public/designs/themes/default/stylesheets/common.css
public/designs/themes/default/stylesheets/controller_search.css
0 → 100644
... | ... | @@ -0,0 +1,32 @@ |
1 | + | |
2 | +.search-results-innerbox { | |
3 | + border: none; | |
4 | + background: #B8CFE7; | |
5 | + -moz-border-radius: 15px; | |
6 | +} | |
7 | + | |
8 | +.search-results-type-article a, | |
9 | +.search-results-type-product a { | |
10 | + text-decoration: none; | |
11 | +} | |
12 | +.search-results-type-article a:hover, | |
13 | +.search-results-type-product a:hover { | |
14 | + text-decoration: underline; | |
15 | +} | |
16 | + | |
17 | +.search-results-type-product li li a { | |
18 | + color: #204A87; | |
19 | +} | |
20 | + | |
21 | +#search-results .common-profile-list-block li a { | |
22 | + border: 2px solid #B8CFE7; | |
23 | +} | |
24 | +#search-results .common-profile-list-block li a:hover { | |
25 | + border: 2px solid #2A5896; | |
26 | + background: #CFDFF7; | |
27 | +} | |
28 | + | |
29 | +.search-results-type-empty div { | |
30 | + color: #729FCF; | |
31 | +} | |
32 | + | ... | ... |
3.09 KB
1.36 KB
3.47 KB
public/stylesheets/common.css
... | ... | @@ -0,0 +1,100 @@ |
1 | +#search-results { | |
2 | + /* none by default, but... Who knows the future? :-) */ | |
3 | +} | |
4 | + | |
5 | +#search-results h3 { | |
6 | + margin: 20px 0px 0px 20px; | |
7 | +} | |
8 | + | |
9 | +.search-results-box { | |
10 | + float: left; | |
11 | + width: 49%; | |
12 | +} | |
13 | + | |
14 | +.only-one-result-box .search-results-box { | |
15 | + width: 100%; | |
16 | +} | |
17 | + | |
18 | +.search-results-box.odd { | |
19 | + margin-left: 1%; | |
20 | +} | |
21 | + | |
22 | +.search-results-innerbox { | |
23 | + border: 1px solid #2A5896; | |
24 | + padding: 10px 0px 10px 10px; | |
25 | + height: 205px; | |
26 | + overflow: auto; | |
27 | +} | |
28 | + | |
29 | +.search-results-innerbox.common-profile-list-block { | |
30 | + padding: 10px 0px 0px 10px; | |
31 | + height: 215px; | |
32 | +} | |
33 | + | |
34 | +.only-one-result-box .search-results-innerbox, | |
35 | +.only-one-result-box .search-results-innerbox.common-profile-list-block { | |
36 | + height: auto; | |
37 | + padding: 10px 4px 10px 10px; | |
38 | +} | |
39 | + | |
40 | +#content .search-results-type-article ul, | |
41 | +#content .search-results-type-article li { | |
42 | + margin: 0px; | |
43 | + padding: 0px; | |
44 | + list-style: none; | |
45 | +} | |
46 | +#content .search-results-type-article li { | |
47 | + padding: 2px 0px 4px 0px; | |
48 | +} | |
49 | + | |
50 | +.search-results-type-article .item_meta { | |
51 | + font-size: 10px; | |
52 | + color: #888; | |
53 | +} | |
54 | + | |
55 | +#content .search-results-type-product ul, | |
56 | +#content .search-results-type-product li { | |
57 | + margin: 0px; | |
58 | + padding: 0px; | |
59 | + list-style: none; | |
60 | + font-size: 10px; | |
61 | +} | |
62 | +#content .search-results-type-product li strong { | |
63 | + display: block; | |
64 | + margin-left: 55px; | |
65 | + font-size: 12px; | |
66 | +} | |
67 | + | |
68 | +#content .search-results-type-product li { | |
69 | + padding-bottom: 10px; | |
70 | +} | |
71 | +#content .search-results-type-product li li { | |
72 | + padding-bottom: 0px; | |
73 | +} | |
74 | + | |
75 | +.product-pic { | |
76 | + display: block; | |
77 | + float: left; | |
78 | + width: 50px; | |
79 | + height: 50px; | |
80 | + background-repeat: no-repeat; | |
81 | + background-position: 50% 50%; | |
82 | + position: relative; | |
83 | + top: 5px; | |
84 | +} | |
85 | +.product-pic span { | |
86 | + display: none; | |
87 | +} | |
88 | + | |
89 | +#content .search-results-type-product ul ul { | |
90 | + margin-left: 55px; | |
91 | +} | |
92 | + | |
93 | +.search-results-type-empty div { | |
94 | + text-align: center; | |
95 | + color: #DDD; | |
96 | + font-weight: bold; | |
97 | + font-size: 30px; | |
98 | + padding: 70px 10px 0px 0px; | |
99 | +} | |
100 | + | ... | ... |
public/stylesheets/lightbox.css
public/stylesheets/search.css
... | ... | @@ -13,6 +13,52 @@ |
13 | 13 | margin-top: 1em; |
14 | 14 | } |
15 | 15 | |
16 | -#search-field input[type=text] { | |
17 | - border: 1px solid black; | |
16 | +/***** search-popup ***************************/ | |
17 | + | |
18 | +#search-popup h2 { | |
19 | + color: #2A5896; | |
20 | + font-size: 20px; | |
21 | +} | |
22 | +#search-popup h3 { | |
23 | + color: #2A5896; | |
24 | + font-size: 16px; | |
25 | +} | |
26 | + | |
27 | +#search-popup .search-field { | |
28 | + text-align: center; | |
29 | +} | |
30 | + | |
31 | +#search-popup .search-options ul, | |
32 | +#search-popup .search-options li { | |
33 | + margin: 0px; | |
34 | + padding: 0px; | |
35 | + list-style: none; | |
36 | +} | |
37 | +#search-popup .search-options ul { | |
38 | + clear: left; | |
39 | +} | |
40 | + | |
41 | +#search-popup .search-options { | |
42 | + border: 1px solid #2A5896; | |
43 | + padding: 0px 0px 5px 20px; | |
44 | + margin-top: 20px; | |
45 | +} | |
46 | + | |
47 | +#search-popup .search-options h3 { | |
48 | + float: left; | |
49 | + margin: -10px 0px 0px 0px; | |
50 | + background: #FFF; | |
51 | + padding: 0px 5px; | |
52 | +} | |
53 | + | |
54 | +#search-popup .search-options li { | |
55 | + float: left; | |
56 | + width: 33%; | |
57 | + padding: 2px 0px; | |
58 | +} | |
59 | + | |
60 | +#search-popup .button-bar { | |
61 | + clear: left; | |
62 | + padding-top: 0px; | |
18 | 63 | } |
64 | + | ... | ... |