Commit 223280f69567359b2f39fd06a86bb9942cb93d99
1 parent
1aeb0d56
Exists in
master
and in
28 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; | ... | ... |