Commit 223280f69567359b2f39fd06a86bb9942cb93d99
1 parent
1aeb0d56
Exists in
master
and in
23 other branches
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.
Showing
2 changed files
with
42 additions
and
3 deletions
Show diff stats
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; | ... | ... |