Commit c8c8f629c71ae43ec7425be1a10f6788d9437457
1 parent
134036eb
Exists in
theme-brasil-digital-from-staging
and in
9 other branches
improving layout
Showing
3 changed files
with
67 additions
and
28 deletions
Show diff stats
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 | ... | ... |