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 8 <% end %>
9 9  
10 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 12 :class => 'comment-picture',
13 13 :style => 'background-image:url(%s)' % profile_icon(comment.author, :minor)
14 14 %>
15 15 <% else %>
16 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 18 :class => 'comment-picture',
19 19 :style => 'background-image:url(%s)' % str_gravatar_url_for( comment.email, :size => 50 )
20 20 %>
21 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 43 </div>
... ...
public/stylesheets/article.css
  Diff comments   View file @464f8af
... ... @@ -60,13 +60,11 @@
60 60  
61 61 .article-comment {
62 62 position: relative;
63   - border: 1px solid #B8CFE7;
64 63 margin-bottom: 10px;
65 64 padding: 4px;
66 65 }
67 66  
68 67 .comment-from-owner {
69   - border: 1px solid #3465A4;
70 68 background: #B8CFE7;
71 69 }
72 70  
... ... @@ -79,22 +77,41 @@
79 77 .comment-picture {
80 78 position: relative;
81 79 display: block;
82   - width: 50px;
  80 + width: 70px;
83 81 height: 50px;
84 82 background-repeat: no-repeat;
85   - background-position: 50% 50%;
  83 + background-position: 0% 50%;
86 84 margin: 0px 4px 4px 4px;
87   - float: right;
  85 + float: left;
88 86 }
  87 +
89 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 106 font-size: 10px;
95 107 color: #999;
96 108 display: inline;
97 109 }
  110 +
  111 +.comment-details {
  112 + margin-left: 100px;
  113 +}
  114 +
98 115 .comment-from-owner .comment-info {
99 116 color: #729FCF;
100 117 }
... ...