Commit c8c8f629c71ae43ec7425be1a10f6788d9437457

Authored by Evandro Jr
1 parent 134036eb

improving layout

plugins/comment_paragraph/public/comment_paragraph_macro.js
... ... @@ -71,9 +71,20 @@ jQuery(document).ready(function($) {
71 71 var paragraphId = $(this).data('paragraph');
72 72 hideAllCommentsExcept(paragraphId);
73 73 hideAllSelectedAreasExcept(paragraphId);
74   - $('#comment-bubble').hide();
  74 + $('.article-body').toggleClass('comment-paragraph-slide-left');
75 75 $('#side_comment_' + paragraphId).toggle();
76   - $('#side_comment_' + paragraphId).find().toggle();
  76 +
  77 +
  78 +// if($('.comment-paragraph-slide-left').size()==0){
  79 +// $('.article-body').addClass('comment-paragraph-slide-left');
  80 +// $('#side_comment_' + paragraphId).show();
  81 +// $('#side_comment_' + paragraphId).find().show();
  82 +// }else{
  83 +// $('.article-body').removeClass('comment-paragraph-slide-left');
  84 +// $('.side-comment').hide();
  85 +// $('.side-comment').find().hide();
  86 +// }
  87 + $('#comment-bubble').hide();
77 88 //Loads the comments
78 89 var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
79 90 $.ajax({
... ... @@ -88,6 +99,9 @@ jQuery(document).ready(function($) {
88 99  
89 100 $('#comment-bubble').click(function(event){
90 101 $(this).hide();
  102 + if($('.comment-paragraph-slide-left').size()==0){
  103 + $('.article-body').addClass('comment-paragraph-slide-left');
  104 + }
91 105 $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
92 106 var url = $("#comment-bubble").data('url');
93 107 var paragraphId = $("#comment-bubble").data("paragraphId");
... ... @@ -107,7 +121,7 @@ jQuery(document).ready(function($) {
107 121 paragraph = $(this).data('paragraph');
108 122 if(paragraph != clickedParagraph){
109 123 $(this).hide();
110   - $(this).find().hide();
  124 + //$(this).find().hide();
111 125 }
112 126 });
113 127 }
... ... @@ -145,6 +159,11 @@ jQuery(document).ready(function($) {
145 159 $('.comment_paragraph').mouseup(function(event) {
146 160  
147 161 $('#comment-bubble').hide();
  162 + if($('.comment-paragraph-slide-left').size() > 0){
  163 + $('.article-body').removeClass('comment-paragraph-slide-left');
  164 + $('.side-comment').hide();
  165 + //$('.side-comment').find().hide();
  166 + }
148 167  
149 168 //Don't do anything if there is no selected text
150 169 if (getSelectionText().length == 0) {
... ...
plugins/comment_paragraph/public/style.css
... ... @@ -7,7 +7,7 @@ div.article-comments-list-more{
7 7 }
8 8  
9 9 .popBox_comment_paragraph {
10   - position: absolute;
  10 +/* position: absolute;*/
11 11 z-index: 2;
12 12 background: #cccccc;
13 13 width: 60px;
... ... @@ -34,9 +34,6 @@ div.article-comments-list-more{
34 34  
35 35 .comment_paragraph{
36 36 padding: 0px;
37   - position: relative;
38   - left: -20px;
39   - width: 450px;
40 37 font-weight: bold;
41 38 text-align: justify;
42 39 }
... ... @@ -96,8 +93,6 @@ div[class^='comments_list_toggle_paragraph_'] {
96 93 }
97 94  
98 95 div[class^='comment-paragraph-loading-'] {
99   - position: relative;
100   - left: 470px;
101 96 z-index: 99;
102 97 }
103 98  
... ... @@ -212,6 +207,7 @@ div[class^='comment-paragraph-loading-'] {
212 207 bg-color: #b3b2d4;
213 208 }
214 209  
  210 +/*
215 211 .comment-paragraph-rowset{
216 212 padding: 0;
217 213 margin: 0;
... ... @@ -225,8 +221,8 @@ div[class^='comment-paragraph-loading-'] {
225 221  
226 222 -webkit-flex-flow: row wrap;
227 223 justify-content: space-around;
  224 +}*/
228 225  
229   -}
230 226 .comment-paragraph-comments{
231 227 background: lightblue;
232 228 padding: 5px;
... ... @@ -235,4 +231,19 @@ div[class^='comment-paragraph-loading-'] {
235 231 color: white;
236 232 font-weight: bold;
237 233 text-align: center;
  234 +}
  235 +
  236 +.single-border{
  237 + border-style: solid;
  238 + border-width: 2px;
  239 +}
  240 +
  241 +.comment-paragraph-group-comments{
  242 + position: absolute;
  243 +}
  244 +
  245 +.comment-paragraph-slide-left{
  246 + position: relative;
  247 + width: 80%;
  248 + transition: 0.6s;
238 249 }
239 250 \ No newline at end of file
... ...
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
1   -<ul class="comments comment-paragraph-rowset">
2   - <li class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
3   - <%= inner_html %>
4   - </li>
5   -
6   - <li align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
7   - <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
8   - <%= count %>
9   - </span>
10   - </li>
11   -
12   - <div align="center">
  1 +<table class="comments">
  2 + <tr>
  3 + <td>
  4 + <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
  5 + <%= inner_html %>
  6 + </div>
  7 + </td>
  8 + <td>
  9 + <div align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
  10 + <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
  11 + <%= count %>
  12 + </span>
  13 + </div>
  14 + </td>
  15 + <td>
  16 +<div class="comment-paragraph-group-comments">
13 17 <%=
14 18 url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
15 19 link_to_remote(
... ... @@ -25,10 +29,9 @@
25 29 :'data-url' => url_for(url)
26 30 }
27 31 )%>
28   - </div>
29   -
30   - <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
31   - <div class="comment-paragraph-loading-<%= paragraph_id %>" style="position: absolute;">
  32 +
  33 + <div class="side-comment" id="side_comment_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>" style="display:none">
  34 + <div class="comment-paragraph-loading-<%= paragraph_id %>">
32 35 <div class="comments_list_toggle_paragraph_<%= paragraph_id %>" >
33 36 <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_id %>"></div>
34 37 <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_id %>_more"></div>
... ... @@ -37,7 +40,13 @@
37 40 </div>
38 41 </div>
39 42 </div>
40   - </div>
41   - </ul>
  43 + </div>
  44 +</div>
  45 + </td>
  46 + </tr>
  47 +</table>
  48 +
  49 +
  50 +
42 51  
43 52  
... ...