Download as
Browse Code »

Commit 6232bcfd3afa493164de924429a86dc814ca89de

Authored by Aurelio A. Heckert
1 parent ab433a58
Exists in master and in 29 other branches add_member_task_reject_details, admin_visible_profile, article-list-template, community_notifications, contact_admin_translation, event_fixes, fix_comments_pagination, fix_rails4_organization_ratings, fix_sign_up_form, follow_step_fix, forum_topic_creation, mirror_block_improvements, multi_env_on_remote_user, new_security, noosfero_spb_ci, organization_ratings_improvements, organization_ratings_link_to_profile_stable-spb-1.3, organization_ratings_translations_fix, profile_api_improvements, ratings_minor_fixes, remote_user_fix, send_email_to_admins, stable-spb-1.3, stable-spb-1.3-fixes, stable-spb-1.4, stable-spb-1.5, suggest_rejected_value, web_steps_improvements, xss_terminate_custom_options

Correct the image display for activites 

(close ActionItem2446)
Showing 4 changed files with 113 additions and 88 deletions   Show diff stats
config/initializers/action_tracker.rb
  Diff comments   View file @6232bcf
... ... @@ -23,7 +23,28 @@ ActionTrackerConfig.verbs = {
23 23 },
24 24  
25 25 :upload_image => {
26   - :description => lambda { n_('uploaded 1 image<br />%{thumbnails}<br style="clear: both;" />', 'uploaded %{num} images<br />%{thumbnails}<br style="clear: both;" />', get_view_url.size) % { :num => get_view_url.size, :thumbnails => '{{ta.collect_group_with_index(:thumbnail_path){ |t,i| content_tag(:span, link_to(image_tag(t), ta.get_view_url[i]))}.last(3).join}}' } },
  26 + :description => lambda do
  27 + total = get_view_url.size
  28 + n_('uploaded 1 image', 'uploaded %d images', total) % total +
  29 + '<br />{{'+
  30 + 'ta.collect_group_with_index(:thumbnail_path) { |t,i|' +
  31 + " if ( #{total} == 1 );" +
  32 + ' link_to( image_tag(t), ta.get_view_url[i], :class => \'upimg\' );' +
  33 + ' else;' +
  34 + " pos = #{total}-i;" +
  35 + ' morethen2 = pos>2 ? \'morethen2\' : \'\';' +
  36 + ' morethen5 = pos>5 ? \'morethen5\' : \'\';' +
  37 + ' t = t.gsub(/(.*)(display)(.*)/, \'\\1thumb\\3\');' +
  38 + ' link_to( \'&nbsp;\', ta.get_view_url[i],' +
  39 + ' :style => "background-image:url(#{t})",' +
  40 + ' :class => "upimg pos#{pos} #{morethen2} #{morethen5}" );' +
  41 + ' end' +
  42 + '}.reverse.join}}' +
  43 + ( total > 5 ?
  44 + '<span class="more" onclick="this.parentNode.className+=\' show-all\'">' +
  45 + '&hellip;</span>' : '' ) +
  46 + '<br style="clear: both;" />'
  47 + end,
27 48 :type => :groupable
28 49 },
29 50  
... ...
public/designs/templates/leftbar/stylesheets/style.css
  Diff comments   View file @6232bcf
... ... @@ -45,26 +45,25 @@
45 45 width: 489px;
46 46 }
47 47  
48   -#profile-wall li.profile-activity-item.upload_image span,
49   -#profile-wall li.profile-activity-item.upload_image span img,
50   -#profile-wall li.profile-activity-item.upload_image span a,
51   -#profile-network li.profile-activity-item.upload_image span,
52   -#profile-network li.profile-activity-item.upload_image span img,
53   -#profile-network li.profile-activity-item.upload_image span a {
54   - width: 178px;
55   - height: 144px;
  48 +li.profile-activity-item.upload_image .upimg {
  49 + width: 168px;
  50 + height: 168px;
56 51 }
57   -
58   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span,
59   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a img,
60   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a,
61   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span,
62   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a img,
63   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a {
64   - max-width: 540px;
  52 +li.profile-activity-item.upload_image .more,
  53 +li.profile-activity-item.upload_image .upimg.morethen2 {
  54 + font-size: 46px;
  55 + width: 77px;
  56 + height: 77px;
  57 +}
  58 +li.profile-activity-item.upload_image .activity-gallery-images-count-3 .pos3 {
  59 + /* reduce size only for 4 or more itens */
  60 + width: 168px;
  61 + height: 168px;
65 62 }
66 63  
67   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a,
68   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a {
69   - background-image: url(/images/gallery-image-activity-border-big-onecol.png);
  64 +li.profile-activity-item.upload_image .activity-gallery-images-count-4 .pos3 {
  65 + /* make a line-break on this case */
  66 + float: none;
  67 + margin-left: 364px;
70 68 }
  69 +
... ...
public/designs/templates/rightbar/stylesheets/style.css
  Diff comments   View file @6232bcf
... ... @@ -45,21 +45,25 @@
45 45 width: 489px;
46 46 }
47 47  
48   -#profile-wall li.profile-activity-item.upload_image span,
49   -#profile-wall li.profile-activity-item.upload_image span img,
50   -#profile-wall li.profile-activity-item.upload_image span a,
51   -#profile-network li.profile-activity-item.upload_image span,
52   -#profile-network li.profile-activity-item.upload_image span img,
53   -#profile-network li.profile-activity-item.upload_image span a {
54   - width: 178px;
55   - height: 144px;
  48 +li.profile-activity-item.upload_image .upimg {
  49 + width: 168px;
  50 + height: 168px;
  51 +}
  52 +li.profile-activity-item.upload_image .more,
  53 +li.profile-activity-item.upload_image .upimg.morethen2 {
  54 + font-size: 46px;
  55 + width: 77px;
  56 + height: 77px;
  57 +}
  58 +li.profile-activity-item.upload_image .activity-gallery-images-count-3 .pos3 {
  59 + /* reduce size only for 4 or more itens */
  60 + width: 168px;
  61 + height: 168px;
56 62 }
57 63  
58   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span,
59   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a img,
60   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a,
61   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span,
62   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a img,
63   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a {
64   - max-width: 540px;
  64 +li.profile-activity-item.upload_image .activity-gallery-images-count-4 .pos3 {
  65 + /* make a line-break on this case */
  66 + float: none;
  67 + margin-left: 364px;
65 68 }
  69 +
... ...
public/stylesheets/application.css
  Diff comments   View file @6232bcf
... ... @@ -4702,16 +4702,13 @@ h1#agenda-title {
4702 4702 }
4703 4703 #profile-activity li, #profile-network li, #profile-wall li {
4704 4704 display: block;
4705   - padding: 3px;
  4705 + padding: 3px 0px;
4706 4706 margin-bottom: 3px;
4707 4707 background-color: #fff;
4708 4708 border-bottom: 1px solid #e8e8e8;
4709 4709 position: relative;
4710 4710 }
4711 4711  
4712   -#profile-activity li, #profile-network li, #profile-wall li {
4713   -}
4714   -
4715 4712 .profile-activity-lead img {
4716 4713 width: 124px;
4717 4714 float: left;
... ... @@ -4775,75 +4772,79 @@ h1#agenda-title {
4775 4772 color: #000;
4776 4773 }
4777 4774  
4778   -#profile-wall li.profile-activity-item.upload_image span,
4779   -#profile-wall li.profile-activity-item.upload_image span a,
4780   -#profile-network li.profile-activity-item.upload_image span,
4781   -#profile-network li.profile-activity-item.upload_image span a {
4782   - width: 110px;
4783   - height: 100px;
  4775 +li.profile-activity-item.upload_image .more,
  4776 +li.profile-activity-item.upload_image .upimg {
4784 4777 display: block;
4785   - overflow: hidden;
4786   - position: absolute;
  4778 + float: left;
  4779 + width: 114px;
  4780 + height: 114px;
  4781 + background-size: cover;
  4782 + -o-background-size: cover;
  4783 + -moz-background-size: cover;
  4784 + -webkit-background-size: cover;
  4785 + background-position: 50% 50%;
  4786 + border: 4px solid #D2D2D2;
  4787 + border-radius: 4px;
  4788 + -moz-border-radius: 4px;
  4789 + -webkit-border-radius: 4px;
  4790 + margin: 3px 6px 3px 0px;
4787 4791 }
4788 4792  
4789   -#profile-wall li.profile-activity-item.upload_image span a img,
4790   -#profile-network li.profile-activity-item.upload_image span a img {
4791   - width: 110px;
4792   - height: 100px;
  4793 +#wrap-1 li.profile-activity-item.upload_image .upimg:hover {
  4794 + text-decoration: none;
4793 4795 }
4794 4796  
4795   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span,
4796   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a,
4797   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a img,
4798   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span,
4799   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a,
4800   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a img {
4801   - width: auto;
4802   - max-width: 383px;
4803   - height: auto;
  4797 +li.profile-activity-item.upload_image .more,
  4798 +li.profile-activity-item.upload_image .upimg.morethen2 {
  4799 + width: 50px;
  4800 + height: 50px;
  4801 +}
  4802 +li.profile-activity-item.upload_image .activity-gallery-images-count-3 .pos3 {
  4803 + /* reduce size only for 4 or more itens */
  4804 + width: 114px;
  4805 + height: 114px;
4804 4806 }
4805 4807  
4806   -#profile-wall li.profile-activity-item.upload_image span img,
4807   -#profile-network li.profile-activity-item.upload_image span img {
4808   - display: block;
  4808 +li.profile-activity-item.upload_image .activity-gallery-images-count-4 .pos3 {
  4809 + /* make a line-break on this case */
  4810 + float: none;
  4811 + margin-left: 256px;
4809 4812 }
4810 4813  
4811   -#profile-wall li.profile-activity-item.upload_image span,
4812   -#profile-network li.profile-activity-item.upload_image span {
4813   - position: relative;
4814   - display: inline-block;
4815   - margin: 5px 0px 0px 5px;
  4814 +li.profile-activity-item.upload_image .more {
  4815 + text-align: center;
  4816 + font-weight: bold;
  4817 + font-size: 28px;
  4818 + color: #DDD;
  4819 + background: #888;
  4820 + cursor: pointer;
  4821 +}
  4822 +li.profile-activity-item.upload_image .more:hover {
  4823 + color: #EEE;
  4824 + background: #999;
4816 4825 }
4817 4826  
4818   -#profile-wall li.profile-activity-item.upload_image .profile-activity-text span,
4819   -#profile-network li.profile-activity-item.upload_image .profile-activity-text span {
4820   - border: 4px solid #D2D2D2;
4821   - border-radius: 4px;
4822   - -webkit-border-radius: 4px;
4823   - -moz-border-radius: 4px;
  4827 +li.profile-activity-item.upload_image .morethen5 {
  4828 + display: none;
4824 4829 }
4825 4830  
4826   -#profile-wall li.profile-activity-item.upload_image span a,
4827   -#profile-network li.profile-activity-item.upload_image span a {
4828   - text-indent: -5000em;
  4831 +li.profile-activity-item.upload_image .show-all .morethen5 {
  4832 + display: block;
4829 4833 }
4830 4834  
4831   -#profile-wall li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a,
4832   -#profile-network li.profile-activity-item.upload_image .activity-gallery-images-count-1 span a {
4833   - position: relative;
  4835 +li.profile-activity-item.upload_image .show-all .more {
  4836 + display: none;
4834 4837 }
4835 4838  
4836   -#profile-wall li.profile-activity-item.upload_image .article-comment span,
4837   -#profile-wall li.profile-activity-item.upload_image .profile-wall-actions span,
4838   -#profile-network li.profile-activity-item.upload_image .article-comment span,
4839   -#profile-network li.profile-activity-item.upload_image .profile-wall-actions span {
4840   - display: inline;
4841   - position: static;
4842   - margin: 0;
  4839 +li.profile-activity-item.upload_image .activity-gallery-images-count-1 .upimg,
  4840 +li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
  4841 + /* Only ".activity-gallery-images-count-1" has a "img" inside */
4843 4842 float: none;
  4843 + display: inline-block;
4844 4844 width: auto;
  4845 + max-width: 100%;
4845 4846 height: auto;
4846   - font-weight: normal;
  4847 + max-height: 300px;
4847 4848 }
4848 4849  
4849 4850 #profile-wall li.profile-activity-item ul.profile-wall-activities-comments,
... ...