Commit 223280f69567359b2f39fd06a86bb9942cb93d99

Authored by Aurélio A. Heckert
1 parent 1aeb0d56

Organize gallery itens on search result page

Change a little the image display to repeat the gallery display
in the network stream and for a better space usage.
app/views/search/_image.rhtml
... ... @@ -28,8 +28,9 @@
28 28 <div class="search-gallery-items">
29 29 <% r = image.children.find(:all, :order => :updated_at, :conditions => ['type = ?', 'UploadedFile']).last(3) %>
30 30 <% if r.length > 0 %>
31   - <% r.each do |i| %>
32   - <%= link_to '', i.view_url, :class => "search-image-pic", :style => 'background-image: url(%s)'% i.public_filename(:thumb) %>
  31 + <% r.each_index do |i| img = r[i] %>
  32 + <%= link_to '', img.view_url, :class => "search-image-pic pic-num#{i+1}",
  33 + :style => 'background-image: url(%s)'% img.public_filename(:thumb) %>
33 34 <% end %>
34 35 <% else %>
35 36 <div class="search-no-image"><span><%= _('No image') %></span></div>
... ...
public/stylesheets/search.css
... ... @@ -736,10 +736,18 @@ li.search-product-item hr {
736 736 min-height: 98px;
737 737 position: absolute;
738 738 }
  739 +.search-gallery .search-content-first-column {
  740 + width: 190px;
  741 +}
  742 +
739 743 .search-content-second-column {
740 744 margin-left: 140px;
741 745 width: auto;
742 746 }
  747 +.search-gallery .search-content-second-column {
  748 + margin-left: 200px;
  749 +}
  750 +
743 751 .search-content-second-column tr:hover {
744 752 background-color: none;
745 753 }
... ... @@ -807,15 +815,45 @@ a.search-image-pic {
807 815 display: table-cell;
808 816 vertical-align: middle;
809 817 }
  818 +
810 819 .search-gallery-items a.search-image-pic {
811 820 float:left;
812 821 margin:0 2px;
813 822 }
  823 +
  824 +
814 825 .search-gallery .search-gallery-items {
815 826 float: left;
816   - margin: 0 10px 0 0;
  827 + margin: 0;
817 828 min-width: 130px;
  829 + position: relative;
818 830 }
  831 +
  832 +.search-gallery .search-gallery-items a.search-image-pic {
  833 + border: none;
  834 + border-radius: 0;
  835 + box-shadow: none;
  836 + width: 62px;
  837 + margin: 0px 0px 1px 1px;
  838 + background-size: cover;
  839 + background-position: 50% 10%;
  840 + float: none;
  841 +}
  842 +
  843 +.search-gallery .search-gallery-items a.search-image-pic.pic-num1,
  844 +.search-gallery .search-gallery-items a.search-image-pic.pic-num2 {
  845 + display: block;
  846 + width: 60px;
  847 + height: 49px;
  848 +}
  849 +.search-gallery .search-gallery-items a.search-image-pic.pic-num3 {
  850 + width: 130px;
  851 + height: 99px;
  852 + position: absolute;
  853 + left: 61px;
  854 + top: 0px;
  855 +}
  856 +
819 857 .search-content-first-column .search-image-container .search-image-pic
820 858 .search-uploaded-file-first-column .search-image-container .search-image-pic {
821 859 display: block;
... ...