comment_paragraph: improve layout and usability

Conflicts: plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb

comment_paragraph: improve layout and usability
Conflicts: plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
Victor Costa
1 parent 3d04994e
Showing 3 changed files with 93 additions and 76 deletions Show diff stats
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
@@ -29,7 +29,7 @@ jQuery(document).ready(function($) {
     // on press ESC key...
     if (e.which == 27) {
       // closing side comment box
-      $("div.side-comment").hide();
+      hideCommentBox();
     }
   });
  
@@ -51,9 +51,15 @@ jQuery(document).ready(function($) {
  
   $('#cancel-comment').die();
   $(document.body).on("click", '#cancel-comment', function(){
-    $("div.side-comment").hide();
+    hideCommentBox();
+    return false;
   });
  
+  function hideCommentBox() {
+    $("div.side-comment").hide();
+    $('.article-body').removeClass('comment-paragraph-slide-left');
+  }
+
   function showBox(div){
     if(div.hasClass('closed')) {
       div.removeClass('closed');
@@ -65,7 +71,7 @@ jQuery(document).ready(function($) {
   cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
   //Add marked text bubble
   $("body").append('\
-      <a id="comment-bubble" style="width:90px;text-decoration: none">\
+      <a id="comment-bubble">\
           <div align="center"  class="triangle-right" >Comentar</div>\
       </a>');
  
@@ -82,14 +88,10 @@ jQuery(document).ready(function($) {
     var paragraphId = $(this).data('paragraph');
     hideAllCommentsExcept(paragraphId);
     hideAllSelectedAreasExcept(paragraphId);
-    if($('.comment-paragraph-slide-left').size()==0){
-      $('.article-body').addClass('comment-paragraph-slide-left');
-      $('#side_comment_' + paragraphId).show();
-    }else{
-      $('.article-body').removeClass('comment-paragraph-slide-left');
-      $('.side-comment').hide();
-    }
-    $('#comment-bubble').hide();
+    hideCommentBox();
+    $('.article-body').addClass('comment-paragraph-slide-left');
+    $('#side_comment_' + paragraphId).show();
+    $('#comment-bubble').removeClass('visible');
     //Loads the comments
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
     $.ajax({
@@ -108,7 +110,6 @@ jQuery(document).ready(function($) {
     if($('.comment-paragraph-slide-left').size()==0){
       $('.article-body').addClass('comment-paragraph-slide-left');
     }
-    $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
     var url = $("#comment-bubble").data('url');
     var paragraphId = $("#comment-bubble").data("paragraphId");
     hideAllCommentsExcept(paragraphId);
@@ -142,8 +143,6 @@ jQuery(document).ready(function($) {
     });
   }
  
-  $("#comment-bubble").hide();
-
   function getSelectionText() {
     var text = "";
     if (window.getSelection) {
@@ -157,19 +156,15 @@ jQuery(document).ready(function($) {
   function setCommentBubblePosition(posX, posY) {
     $("#comment-bubble").css({
       top: (posY - 80),
-      left: (posX - 70),
-      position:'absolute'
+      left: (posX - 70)
     });
   }
  
   //highlight area from the paragraph
   $('.comment_paragraph').mouseup(function(event) {
  
-    $('#comment-bubble').hide();
     if($('.comment-paragraph-slide-left').size() > 0){
-      $('.article-body').removeClass('comment-paragraph-slide-left');
-      $('.side-comment').hide();
-      //$('.side-comment').find().hide();
+      hideCommentBox();
     }
  
     //Don't do anything if there is no selected text
@@ -185,7 +180,7 @@ jQuery(document).ready(function($) {
     var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
     $("#comment-bubble").data("url", url);
     $("#comment-bubble").data("paragraphId", paragraphId);
-    $("#comment-bubble").show();
+    $("#comment-bubble").addClass('visible');
  
     var rootElement = $(this).get(0);
  
+#comment-bubble.visible {
+  visibility: visible;
+}
+#comment-bubble {
+  transition: top 0.15s ease-in-out;
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 90px;
+  text-decoration: none;
+  visibility: hidden;
+}
+
 div.article-comments-list-more{
   width: 100%;
-  height: 30px;
   text-align: center;
   font-size: 20px;
   margin-bottom: 5px;
 }
  
 .popBox_comment_paragraph {
-/*  position: absolute;*/
   z-index: 2;
   background: #cccccc;
   width: 60px;
@@ -33,9 +44,8 @@ div.article-comments-list-more{
 }
  
 .comment_paragraph{
-  padding: 0px;
-  font-weight: bold;
-  text-align: justify;
+  display: table-cell;
+  width: 97%;
 }
  
 .triangle-right {
@@ -45,13 +55,14 @@ div.article-comments-list-more{
   color:#fff;
   background:#075698; /* default background for browsers without gradient support */
   /* css3 */
-  background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
-  background:-moz-linear-gradient(#2e88c4, #075698);
-  background:-o-linear-gradient(#2e88c4, #075698);
-  background:linear-gradient(#2e88c4, #075698);
+  background:-webkit-gradient(linear, 0 0, 0 100%, from(#ababab), to(#424242));
+  background:-moz-linear-gradient(#ABABAB, #424242);
+  background:-o-linear-gradient(#ABABAB, #424242);
+  background: linear-gradient(#ABABAB, #424242);
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
+  font-weight: bold;
 }
  
 .triangle-right:after {
@@ -61,7 +72,7 @@ div.article-comments-list-more{
   left: 50px;
   border-width: 20px 0 0 20px;
   border-style: solid;
-  border-color: #075698 transparent;
+  border-color: #424242 transparent;
   display: block;
   width: 0;
 }
@@ -93,10 +104,10 @@ div.article-comments-list-more{
 div[class^='comments_list_toggle_paragraph_'] {
  border-style: solid;
  border-width: 1px;
- border-color: #ccc;
+ border-color: #e7e7e7;
  padding: 5px;
  background-color: whitesmoke;
- width: 300px;
+ width: 280px;
 }
  
 div[class^='comment-paragraph-loading-'] {
@@ -109,6 +120,13 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
  
 .side-comment{
   z-index: 199;
+  box-shadow: 0px 0px 20px #b8b8b8;
+}
+
+.side-comments-counter-container {
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 10px;
 }
  
 .side-comments-counter {
@@ -116,26 +134,33 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   width: 20px;
   height: 19px;
   padding: 0px;
-  background: #b3b2d4;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
+  background: #b8b8b8;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   cursor: pointer;
   z-index: 1;
+  display: inline-block;
+  font-weight: bold;
+  color: white;
+  text-align: center;
 }
  
 .side-comments-counter:hover{
-  color: white;
+  background-color: rgb(117, 192, 117);
+}
+.side-comments-counter:hover:after{
+  border-color: rgb(117, 192, 117) transparent;
 }
  
 .side-comments-counter:after {
   content: "";
   position: absolute;
   bottom: -9px;
-  left: 8px;
+  left: 5px;
   border-style: solid;
   border-width: 12px 5px 0;
-  border-color: #b3b2d4 transparent;
+  border-color: #bdbdbd transparent;
   display: block;
   width: 0;
 }
@@ -145,7 +170,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   top: 3px;
 }
  
-.article-comment-inner {border-bottom: 1px solid #ddd;}
+.article-comment-inner {border-bottom: 1px solid #ececec;}
  
 #article .side-comment .comment-replies .article-comment{background: white; border: 0px; border-top: 1px solid #ddd;}
  
@@ -170,6 +195,7 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   width: 98%;
   text-align: justify;
   overflow:  visible;
+  color: rgb(107, 107, 107);
 }
 .side-comment .comment-text p {
   margin: 0;
@@ -183,6 +209,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   left: 36px;
   line-height: 0;
   font-weight: bold;
+  font-size: 12px;
+  color: rgb(80, 80, 80);
 }
 .side-comment .comment-wrapper-1 {
   margin-left: 36px;
@@ -193,6 +221,8 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
 #article .side-comment .comment-picture {
   width: 100%;
   height: auto;
+  margin-top: 8px;
+  max-width: none;
 }
 #article .side-comment .article-comment .comment-details > h4 {
   display: none;
@@ -215,21 +245,9 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   bg-color: #b3b2d4;
 }
  
-/*
-.comment-paragraph-rowset{
-  padding: 0;
-  margin: 0;
-  list-style: none;
-
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-
-  -webkit-flex-flow: row wrap;
-  justify-content: space-around;
-}*/
+.side-comment textarea {
+  height: 50px;
+}
  
 .comment-paragraph-comments{
   background: lightblue;
@@ -246,14 +264,24 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   border-width: 2px;
 }
  
+.comment-paragraph-slide-left .comments {
+  position: relative;
+  display: table;
+}
+
 .comment-paragraph-group-comments{
   position: absolute;
+  right: -296px;
+  top: 12px;
   background-color: white;
   z-index: 9999;
 }
  
-.comment-paragraph-slide-left{
+.article-body.comment-paragraph-slide-left {
   position: relative;
   width: 80%;
-  transition: 0.6s;
+}
+.article-body {
+  width: 100%;
+  transition: width 0.3s ease-in-out;
 }
-<table class="comments">
-  <tr>
-    <td>
-      <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
-        <%= inner_html %>
-      </div>
-    </td>
-    <td>
-      <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;">
-        <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
-          <%= count %>
-        </span>
-      </div>
-    </td>
-    <td>
+<div class="comments">
+  <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
+    <%= inner_html %>
+  </div>
+  <div class="side-comments-counter-container">
+    <div class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>"  data-paragraph="<%= paragraph_id %>">
+      <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
+        <%= count %>
+      </span>
+    </div>
+  </div>
 <div class="comment-paragraph-group-comments">
      <%=
        url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
@@ -42,9 +38,7 @@
      </div>
   </div>
 </div>
-    </td>
-  </tr>
-</table>
+</div>
...	...	@@ -29,7 +29,7 @@ jQuery(document).ready(function($) {
29	29	// on press ESC key...
30	30	if (e.which == 27) {
31	31	// closing side comment box
32		- $("div.side-comment").hide();
	32	+ hideCommentBox();
33	33	}
34	34	});
35	35
...	...	@@ -51,9 +51,15 @@ jQuery(document).ready(function($) {
51	51
52	52	$('#cancel-comment').die();
53	53	$(document.body).on("click", '#cancel-comment', function(){
54		- $("div.side-comment").hide();
	54	+ hideCommentBox();
	55	+ return false;
55	56	});
56	57
	58	+ function hideCommentBox() {
	59	+ $("div.side-comment").hide();
	60	+ $('.article-body').removeClass('comment-paragraph-slide-left');
	61	+ }
	62	+
57	63	function showBox(div){
58	64	if(div.hasClass('closed')) {
59	65	div.removeClass('closed');
...	...	@@ -65,7 +71,7 @@ jQuery(document).ready(function($) {
65	71	cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
66	72	//Add marked text bubble
67	73	$("body").append('\
68		- <a id="comment-bubble" style="width:90px;text-decoration: none">\
	74	+ <a id="comment-bubble">\
69	75	<div align="center" class="triangle-right" >Comentar</div>\
70	76	</a>');
71	77
...	...	@@ -82,14 +88,10 @@ jQuery(document).ready(function($) {
82	88	var paragraphId = $(this).data('paragraph');
83	89	hideAllCommentsExcept(paragraphId);
84	90	hideAllSelectedAreasExcept(paragraphId);
85		- if($('.comment-paragraph-slide-left').size()==0){
86		- $('.article-body').addClass('comment-paragraph-slide-left');
87		- $('#side_comment_' + paragraphId).show();
88		- }else{
89		- $('.article-body').removeClass('comment-paragraph-slide-left');
90		- $('.side-comment').hide();
91		- }
92		- $('#comment-bubble').hide();
	91	+ hideCommentBox();
	92	+ $('.article-body').addClass('comment-paragraph-slide-left');
	93	+ $('#side_comment_' + paragraphId).show();
	94	+ $('#comment-bubble').removeClass('visible');
93	95	//Loads the comments
94	96	var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
95	97	$.ajax({
...	...	@@ -108,7 +110,6 @@ jQuery(document).ready(function($) {
108	110	if($('.comment-paragraph-slide-left').size()==0){
109	111	$('.article-body').addClass('comment-paragraph-slide-left');
110	112	}
111		- $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
112	113	var url = $("#comment-bubble").data('url');
113	114	var paragraphId = $("#comment-bubble").data("paragraphId");
114	115	hideAllCommentsExcept(paragraphId);
...	...	@@ -142,8 +143,6 @@ jQuery(document).ready(function($) {
142	143	});
143	144	}
144	145
145		- $("#comment-bubble").hide();
146		-
147	146	function getSelectionText() {
148	147	var text = "";
149	148	if (window.getSelection) {
...	...	@@ -157,19 +156,15 @@ jQuery(document).ready(function($) {
157	156	function setCommentBubblePosition(posX, posY) {
158	157	$("#comment-bubble").css({
159	158	top: (posY - 80),
160		- left: (posX - 70),
161		- position:'absolute'
	159	+ left: (posX - 70)
162	160	});
163	161	}
164	162
165	163	//highlight area from the paragraph
166	164	$('.comment_paragraph').mouseup(function(event) {
167	165
168		- $('#comment-bubble').hide();
169	166	if($('.comment-paragraph-slide-left').size() > 0){
170		- $('.article-body').removeClass('comment-paragraph-slide-left');
171		- $('.side-comment').hide();
172		- //$('.side-comment').find().hide();
	167	+ hideCommentBox();
173	168	}
174	169
175	170	//Don't do anything if there is no selected text
...	...	@@ -185,7 +180,7 @@ jQuery(document).ready(function($) {
185	180	var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
186	181	$("#comment-bubble").data("url", url);
187	182	$("#comment-bubble").data("paragraphId", paragraphId);
188		- $("#comment-bubble").show();
	183	+ $("#comment-bubble").addClass('visible');
189	184
190	185	var rootElement = $(this).get(0);
191	186
...	...
	1	+#comment-bubble.visible {
	2	+ visibility: visible;
	3	+}
	4	+#comment-bubble {
	5	+ transition: top 0.15s ease-in-out;
	6	+ top: 0;
	7	+ left: 0;
	8	+ position: absolute;
	9	+ width: 90px;
	10	+ text-decoration: none;
	11	+ visibility: hidden;
	12	+}
	13	+
1	14	div.article-comments-list-more{
2	15	width: 100%;
3		- height: 30px;
4	16	text-align: center;
5	17	font-size: 20px;
6	18	margin-bottom: 5px;
7	19	}
8	20
9	21	.popBox_comment_paragraph {
10		-/* position: absolute;*/
11	22	z-index: 2;
12	23	background: #cccccc;
13	24	width: 60px;
...	...	@@ -33,9 +44,8 @@ div.article-comments-list-more{
33	44	}
34	45
35	46	.comment_paragraph{
36		- padding: 0px;
37		- font-weight: bold;
38		- text-align: justify;
	47	+ display: table-cell;
	48	+ width: 97%;
39	49	}
40	50
41	51	.triangle-right {
...	...	@@ -45,13 +55,14 @@ div.article-comments-list-more{
45	55	color:#fff;
46	56	background:#075698; /* default background for browsers without gradient support */
47	57	/* css3 */
48		- background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
49		- background:-moz-linear-gradient(#2e88c4, #075698);
50		- background:-o-linear-gradient(#2e88c4, #075698);
51		- background:linear-gradient(#2e88c4, #075698);
	58	+ background:-webkit-gradient(linear, 0 0, 0 100%, from(#ababab), to(#424242));
	59	+ background:-moz-linear-gradient(#ABABAB, #424242);
	60	+ background:-o-linear-gradient(#ABABAB, #424242);
	61	+ background: linear-gradient(#ABABAB, #424242);
52	62	-webkit-border-radius:10px;
53	63	-moz-border-radius:10px;
54	64	border-radius:10px;
	65	+ font-weight: bold;
55	66	}
56	67
57	68	.triangle-right:after {
...	...	@@ -61,7 +72,7 @@ div.article-comments-list-more{
61	72	left: 50px;
62	73	border-width: 20px 0 0 20px;
63	74	border-style: solid;
64		- border-color: #075698 transparent;
	75	+ border-color: #424242 transparent;
65	76	display: block;
66	77	width: 0;
67	78	}
...	...	@@ -93,10 +104,10 @@ div.article-comments-list-more{
93	104	div[class^='comments_list_toggle_paragraph_'] {
94	105	border-style: solid;
95	106	border-width: 1px;
96		- border-color: #ccc;
	107	+ border-color: #e7e7e7;
97	108	padding: 5px;
98	109	background-color: whitesmoke;
99		- width: 300px;
	110	+ width: 280px;
100	111	}
101	112
102	113	div[class^='comment-paragraph-loading-'] {
...	...	@@ -109,6 +120,13 @@ div[class^='comment-paragraph-loading-'] {
109	120
110	121	.side-comment{
111	122	z-index: 199;
	123	+ box-shadow: 0px 0px 20px #b8b8b8;
	124	+}
	125	+
	126	+.side-comments-counter-container {
	127	+ display: table-cell;
	128	+ vertical-align: middle;
	129	+ padding-left: 10px;
112	130	}
113	131
114	132	.side-comments-counter {
...	...	@@ -116,26 +134,33 @@ div[class^='comment-paragraph-loading-'] {
116	134	width: 20px;
117	135	height: 19px;
118	136	padding: 0px;
119		- background: #b3b2d4;
120		- -webkit-border-radius: 5px;
121		- -moz-border-radius: 5px;
122		- border-radius: 5px;
	137	+ background: #b8b8b8;
	138	+ -webkit-border-radius: 2px;
	139	+ -moz-border-radius: 2px;
	140	+ border-radius: 2px;
123	141	cursor: pointer;
124	142	z-index: 1;
	143	+ display: inline-block;
	144	+ font-weight: bold;
	145	+ color: white;
	146	+ text-align: center;
125	147	}
126	148
127	149	.side-comments-counter:hover{
128		- color: white;
	150	+ background-color: rgb(117, 192, 117);
	151	+}
	152	+.side-comments-counter:hover:after{
	153	+ border-color: rgb(117, 192, 117) transparent;
129	154	}
130	155
131	156	.side-comments-counter:after {
132	157	content: "";
133	158	position: absolute;
134	159	bottom: -9px;
135		- left: 8px;
	160	+ left: 5px;
136	161	border-style: solid;
137	162	border-width: 12px 5px 0;
138		- border-color: #b3b2d4 transparent;
	163	+ border-color: #bdbdbd transparent;
139	164	display: block;
140	165	width: 0;
141	166	}
...	...	@@ -145,7 +170,7 @@ div[class^='comment-paragraph-loading-'] {
145	170	top: 3px;
146	171	}
147	172
148		-.article-comment-inner {border-bottom: 1px solid #ddd;}
	173	+.article-comment-inner {border-bottom: 1px solid #ececec;}
149	174
150	175	#article .side-comment .comment-replies .article-comment{background: white; border: 0px; border-top: 1px solid #ddd;}
151	176
...	...	@@ -170,6 +195,7 @@ div[class^='comment-paragraph-loading-'] {
170	195	width: 98%;
171	196	text-align: justify;
172	197	overflow: visible;
	198	+ color: rgb(107, 107, 107);
173	199	}
174	200	.side-comment .comment-text p {
175	201	margin: 0;
...	...	@@ -183,6 +209,8 @@ div[class^='comment-paragraph-loading-'] {
183	209	left: 36px;
184	210	line-height: 0;
185	211	font-weight: bold;
	212	+ font-size: 12px;
	213	+ color: rgb(80, 80, 80);
186	214	}
187	215	.side-comment .comment-wrapper-1 {
188	216	margin-left: 36px;
...	...	@@ -193,6 +221,8 @@ div[class^='comment-paragraph-loading-'] {
193	221	#article .side-comment .comment-picture {
194	222	width: 100%;
195	223	height: auto;
	224	+ margin-top: 8px;
	225	+ max-width: none;
196	226	}
197	227	#article .side-comment .article-comment .comment-details > h4 {
198	228	display: none;
...	...	@@ -215,21 +245,9 @@ div[class^='comment-paragraph-loading-'] {
215	245	bg-color: #b3b2d4;
216	246	}
217	247
218		-/*
219		-.comment-paragraph-rowset{
220		- padding: 0;
221		- margin: 0;
222		- list-style: none;
223		-
224		- display: -webkit-box;
225		- display: -moz-box;
226		- display: -ms-flexbox;
227		- display: -webkit-flex;
228		- display: flex;
229		-
230		- -webkit-flex-flow: row wrap;
231		- justify-content: space-around;
232		-}*/
	248	+.side-comment textarea {
	249	+ height: 50px;
	250	+}
233	251
234	252	.comment-paragraph-comments{
235	253	background: lightblue;
...	...	@@ -246,14 +264,24 @@ div[class^='comment-paragraph-loading-'] {
246	264	border-width: 2px;
247	265	}
248	266
	267	+.comment-paragraph-slide-left .comments {
	268	+ position: relative;
	269	+ display: table;
	270	+}
	271	+
249	272	.comment-paragraph-group-comments{
250	273	position: absolute;
	274	+ right: -296px;
	275	+ top: 12px;
251	276	background-color: white;
252	277	z-index: 9999;
253	278	}
254	279
255		-.comment-paragraph-slide-left{
	280	+.article-body.comment-paragraph-slide-left {
256	281	position: relative;
257	282	width: 80%;
258		- transition: 0.6s;
	283	+}
	284	+.article-body {
	285	+ width: 100%;
	286	+ transition: width 0.3s ease-in-out;
259	287	}
...	...
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>
	1	+<div class="comments">
	2	+ <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
	3	+ <%= inner_html %>
	4	+ </div>
	5	+ <div class="side-comments-counter-container">
	6	+ <div class="side-comments-counter" id="side_comments_counter_<%= paragraph_id %>" data-paragraph="<%= paragraph_id %>">
	7	+ <span id="comment-count-<%= paragraph_id %>" class='comment-count'>
	8	+ <%= count %>
	9	+ </span>
	10	+ </div>
	11	+ </div>
16	12	<div class="comment-paragraph-group-comments">
17	13	<%=
18	14	url = { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id}
...	...	@@ -42,9 +38,7 @@
42	38	</div>
43	39	</div>
44	40	</div>
45		- </td>
46		- </tr>
47		-</table>
	41	+</div>
48	42
49	43
50	44
...	...