Download as
Browse Code »

Commit 4babb0b1df16b8f152ac137740773cccfda3005b

Authored by Victor Costa
1 parent e8f8ec18
Exists in staging and in 4 other branches captcha_serpro_plugin, login-captcha, production, production-vendorized

comment_paragraph: improve layout and usability 

Conflicts:

	plugins/comment_paragraph/public/comment_paragraph_macro.js
	plugins/comment_paragraph/public/style.css
	plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
Showing 3 changed files with 28 additions and 18 deletions   Show diff stats
plugins/comment_paragraph/public/comment_paragraph_macro.js
  Diff comments   View file @4babb0b
... ... @@ -58,6 +58,7 @@ jQuery(document).ready(function($) {
58 58 function hideCommentBox() {
59 59 $("div.side-comment").hide();
60 60 $('.article-body').removeClass('comment-paragraph-slide-left');
  61 + $('.comments').removeClass('selected');
61 62 }
62 63  
63 64 function showBox(div){
... ... @@ -75,20 +76,12 @@ jQuery(document).ready(function($) {
75 76 <div align="center" class="triangle-right" >Comentar</div>\
76 77 </a>');
77 78  
78   - function resizeArticle(paragraphId){
79   - var commentHeigh = $('#side_comment_' + paragraphId).height();
80   - if(commentHeigh > 0){
81   - $('.article-body').height(originalArticleHeight + commentHeigh + 50);
82   - }else{
83   - $('.article-body').height(originalArticleHeight);
84   - }
85   - }
86   -
87 79 $('.side-comments-counter').click(function(){
88 80 var paragraphId = $(this).data('paragraph');
89 81 hideAllCommentsExcept(paragraphId);
90 82 hideAllSelectedAreasExcept(paragraphId);
91 83 hideCommentBox();
  84 + $(this).closest('.comments').addClass('selected');
92 85 $('.article-body').addClass('comment-paragraph-slide-left');
93 86 $('#side_comment_' + paragraphId).show();
94 87 $('#comment-bubble').removeClass('visible');
... ... @@ -100,7 +93,6 @@ jQuery(document).ready(function($) {
100 93 }).done(function() {
101 94 var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
102 95 button.click();
103   - resizeArticle(paragraphId);
104 96 });
105 97 });
106 98  
... ... @@ -120,7 +112,6 @@ jQuery(document).ready(function($) {
120 112 }).done(function() {
121 113 var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
122 114 button.click();
123   - resizeArticle(paragraphId);
124 115 });
125 116 });
126 117  
... ...
plugins/comment_paragraph/public/style.css
  Diff comments   View file @4babb0b
... ... @@ -134,7 +134,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
134 134 width: 20px;
135 135 height: 19px;
136 136 padding: 0px;
137   - background: #b8b8b8;
  137 + background: #b5b5b5;
138 138 -webkit-border-radius: 2px;
139 139 -moz-border-radius: 2px;
140 140 border-radius: 2px;
... ... @@ -144,15 +144,25 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
144 144 font-weight: bold;
145 145 color: white;
146 146 text-align: center;
  147 + opacity: 0.7;
147 148 }
148 149  
149   -.side-comments-counter:hover{
  150 +.comment-paragraph-plugin .loading {
  151 + height: 40px;
  152 + background-position: center 0;
  153 +}
  154 +
  155 +.side-comments-counter:hover {
150 156 background-color: rgb(117, 192, 117);
151 157 }
152   -.side-comments-counter:hover:after{
  158 +.side-comments-counter:hover:after {
153 159 border-color: rgb(117, 192, 117) transparent;
154 160 }
155 161  
  162 +.comments.selected .side-comments-counter, .comments.selected .side-comments-counter:after {
  163 + opacity: 1;
  164 +}
  165 +
156 166 .side-comments-counter:after {
157 167 content: "";
158 168 position: absolute;
... ... @@ -182,6 +192,9 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
182 192  
183 193 #article .side-comment .article-comments-list {
184 194 margin: 0;
  195 + overflow-y: auto;
  196 + overflow-x: hidden;
  197 + max-height: 400px;
185 198 }
186 199 #article .side-comment .article-comments-list .article-comment {
187 200 margin: 0;
... ... @@ -269,12 +282,16 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
269 282 display: table;
270 283 }
271 284  
  285 +.comments .comment_paragraph:hover, .comments.selected .comment_paragraph {
  286 + background-color: rgb(236, 236, 236);
  287 +}
  288 +
272 289 .comment-paragraph-group-comments{
273 290 position: absolute;
274 291 right: -296px;
275   - top: 12px;
  292 + top: 0px;
276 293 background-color: white;
277   - z-index: 9999;
  294 + z-index: 199;
278 295 }
279 296  
280 297 .article-body.comment-paragraph-slide-left {
... ...
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
  Diff comments   View file @4babb0b
1   -<div class="comments">
  1 +<div class="comment-paragraph-plugin comments">
2 2 <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
3 3 <%= inner_html %>
4 4 </div>
... ... @@ -29,7 +29,9 @@
29 29 <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
30 30 <div class="comment-paragraph-loading-<%= paragraph_id %>">
31 31 <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
32   - <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
  32 + <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>">
  33 + <div class="loading"></div>
  34 + </div>
33 35 <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
34 36 <div id="page-comment-form-<%= paragraph_id %>" class='post_comment_box closed'>
35 37 <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_id => paragraph_id}%>
... ...