Commit 464f8af62d5a640b406f9ae8c1a560418fe8983d
Committed by
Antonio Terceiro
1 parent
e557259a
Exists in
master
and in
28 other branches
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
@@ -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', ' ', | 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
@@ -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 | } |