Download as
Browse Code »

Commit 464f8af62d5a640b406f9ae8c1a560418fe8983d

Authored by Daniela Feitosa
Committed by Antonio Terceiro
1 parent e557259a
Exists in master and in 28 other branches 1.2+SPB2, 2_split_by_role, add_fields_in_api, api_fixies, api_pagination, api_private_token, api_tasks, article_hit_count, blog_page_bug, checkbox_to_user_can_edit_page, communities_ratings, communities_ratings_moderation, community_ratings_rebase, fix_cloned_article_parent, fix_gallery_image_url, fix_javascript_categories, fix_optional_fields, fix_suggest_article, fix_user_email_validation, highlight_block_fix, notification_plugin, notification_plugin_rebase, script_to_update, split_by_role, stable, temp_ratings, tests, tests_fixies

ActionItem1042: enhancing comments 

* added div's arround comment
  * image in left side
  * comment author under the image
Showing 2 changed files with 46 additions and 20 deletions   Show diff stats
app/views/content_viewer/_comment.rhtml
  Diff comments   View file @464f8af
@@ -8,27 +8,36 @@ @@ -8,27 +8,36 @@
8 <% end %> 8 <% end %>
9 9
10 <% if comment.author %> 10 <% if comment.author %>
11 - <%= link_to content_tag( 'span', comment.author.name() ), comment.author.url, 11 + <%= link_to content_tag( 'span', comment.author.short_name, :class => 'comment-info' ), comment.author.url,
12 :class => 'comment-picture', 12 :class => 'comment-picture',
13 :style => 'background-image:url(%s)' % profile_icon(comment.author, :minor) 13 :style => 'background-image:url(%s)' % profile_icon(comment.author, :minor)
14 %> 14 %>
15 <% else %> 15 <% else %>
16 <%# unauthenticated user: display gravatar icon %> 16 <%# unauthenticated user: display gravatar icon %>
17 - <%= content_tag 'span', '&nbsp;', 17 + <%= content_tag 'span', content_tag('span', comment.name + '<br/>'+ _('(unauthenticated user)'), :class => 'comment-info'),
18 :class => 'comment-picture', 18 :class => 'comment-picture',
19 :style => 'background-image:url(%s)' % str_gravatar_url_for( comment.email, :size => 50 ) 19 :style => 'background-image:url(%s)' % str_gravatar_url_for( comment.email, :size => 50 )
20 %> 20 %>
21 <% end %> 21 <% end %>
22 22
23 - <h4><%= comment.title %></h4>  
24 - <div class="comment-info">  
25 - <%= _('By %{author} on %{date}') % {  
26 - :author => comment.author ? link_to(comment.author.name, comment.author.url) : content_tag('u', comment.name),  
27 - :date => show_time(comment.created_at) } %>  
28 - <%= _('(unauthenticated user)') if ! comment.author %>  
29 - </div>  
30 - <div class="comment-text">  
31 - <p/>  
32 - <%= txt2html comment.body %>  
33 - </div> 23 + <div class='comment-wrapper-1'>
  24 + <div class='comment-wrapper-2'>
  25 + <div class='comment-wrapper-3'>
  26 + <div class='comment-wrapper-4'>
  27 + <div class='comment-wrapper-5'>
  28 + <div class='comment-wrapper-6'>
  29 + <div class='comment-wrapper-7'>
  30 + <div class='comment-wrapper-8'>
  31 + <div class="comment-details">
  32 + <div class="comment-created-at">
  33 + <%= show_time(comment.created_at) %>
  34 + </div>
  35 + <h4><%= comment.title %></h4>
  36 + <div class="comment-text">
  37 + <p/>
  38 + <%= txt2html comment.body %>
  39 + </div>
  40 + </div>
  41 + </div></div></div></div>
  42 + </div></div></div></div>
34 </div> 43 </div>
public/stylesheets/article.css
  Diff comments   View file @464f8af
@@ -60,13 +60,11 @@ @@ -60,13 +60,11 @@
60 60
61 .article-comment { 61 .article-comment {
62 position: relative; 62 position: relative;
63 - border: 1px solid #B8CFE7;  
64 margin-bottom: 10px; 63 margin-bottom: 10px;
65 padding: 4px; 64 padding: 4px;
66 } 65 }
67 66
68 .comment-from-owner { 67 .comment-from-owner {
69 - border: 1px solid #3465A4;  
70 background: #B8CFE7; 68 background: #B8CFE7;
71 } 69 }
72 70
@@ -79,22 +77,41 @@ @@ -79,22 +77,41 @@
79 .comment-picture { 77 .comment-picture {
80 position: relative; 78 position: relative;
81 display: block; 79 display: block;
82 - width: 50px; 80 + width: 70px;
83 height: 50px; 81 height: 50px;
84 background-repeat: no-repeat; 82 background-repeat: no-repeat;
85 - background-position: 50% 50%; 83 + background-position: 0% 50%;
86 margin: 0px 4px 4px 4px; 84 margin: 0px 4px 4px 4px;
87 - float: right; 85 + float: left;
88 } 86 }
  87 +
89 .comment-picture span { 88 .comment-picture span {
90 - display: none; 89 + top: 50px;
  90 + position: absolute;
  91 + width: 100%;
  92 + overflow: hidden;
  93 +}
  94 +
  95 +a.comment-picture {
  96 + text-decoration: none;
91 } 97 }
92 98
93 -.comment-info { 99 +.comment-created-at {
  100 + float: right;
  101 + margin-left: 5px;
  102 +}
  103 +
  104 +.comment-info,
  105 +.comment-created-at {
94 font-size: 10px; 106 font-size: 10px;
95 color: #999; 107 color: #999;
96 display: inline; 108 display: inline;
97 } 109 }
  110 +
  111 +.comment-details {
  112 + margin-left: 100px;
  113 +}
  114 +
98 .comment-from-owner .comment-info { 115 .comment-from-owner .comment-info {
99 color: #729FCF; 116 color: #729FCF;
100 } 117 }