Commit 2e98ca49e04597bfa5920f249ba2850134175cef

Authored by AurelioAHeckert
1 parent 967cac32

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
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
... ... @@ -152,3 +152,6 @@ div.file-manager-button a:hover {
152 152 }
153 153  
154 154  
  155 +#lightbox{
  156 + background: #FFF url(../images/bg-top-cinza.jpg) no-repeat 50% -15px;
  157 +}
... ...
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 +
... ...
public/images/icons-app/gnome-home_size-minor.png 0 → 100644

3.09 KB

public/images/icons-app/product-default-pic-minor.png 0 → 100644

1.36 KB

public/images/icons-app/users_size-minor.png 0 → 100644

3.47 KB

public/stylesheets/common.css
... ... @@ -330,3 +330,4 @@ div.pending-tasks {
330 330 padding: 2px;
331 331 margin: 1em;
332 332 }
  333 +
... ...
public/stylesheets/controller_search.css 0 → 100644
... ... @@ -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
... ... @@ -18,7 +18,6 @@ Modified : February 1, 2006
18 18 width: 500px;
19 19 margin: -200px 0 0 -250px;
20 20 border: 10px solid #000;
21   - background: #FFF url(../images/bg-top-cinza.jpg) no-repeat 50% -15px;
22 21 text-align: left;
23 22 padding: 1em;
24 23 }
... ...
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 +
... ...