comment_paragraph: improve layout and usability

Victor Costa
1 parent a5e0b197
Showing 3 changed files with 136 additions and 91 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,16 @@ 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');
+    $('.comments').removeClass('selected');
+  }
+
   function showBox(div){
     if(div.hasClass('closed')) {
       div.removeClass('closed');
@@ -65,31 +72,19 @@ 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>');
  
-  function resizeArticle(paragraphId){
-    var commentHeigh = $('#side_comment_' + paragraphId).height();
-    if(commentHeigh > 0){
-      $('.article-body').height(originalArticleHeight + commentHeigh + 50);
-    }else{
-       $('.article-body').height(originalArticleHeight);
-    }
-  }
-
   $('.side-comments-counter').click(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();
+    $(this).closest('.comments').addClass('selected');
+    $('.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({
@@ -98,7 +93,6 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
-      resizeArticle(paragraphId);
     });
   });
  
@@ -108,7 +102,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);
@@ -119,7 +112,6 @@ jQuery(document).ready(function($) {
     }).done(function() {
       var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
       button.click();
-      resizeArticle(paragraphId);
     });
   });
  
@@ -142,8 +134,6 @@ jQuery(document).ready(function($) {
     });
   }
  
-  $("#comment-bubble").hide();
-
   function getSelectionText() {
     var text = "";
     if (window.getSelection) {
@@ -157,19 +147,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 +171,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;
 }
@@ -83,6 +94,8 @@ div.article-comments-list-more{
   width: 150px;
   right: 0;
   top: 0;
+  zoom: 0.8;
+  -moz-transform: scale(0.8);
 }
  
 .side-comment .comment-created-at{display: none;}
@@ -93,10 +106,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 +122,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 +136,43 @@ 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: #b5b5b5;
+  -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;
+  opacity: 0.7;
 }
  
-.side-comments-counter:hover{
-  color: white;
+.comment-paragraph-plugin .loading {
+  height: 40px;
+  background-position: center 0;
+}
+
+.side-comments-counter:hover {
+  background-color: rgb(117, 192, 117);
+}
+.side-comments-counter:hover:after {
+  border-color: rgb(117, 192, 117) transparent;
+}
+
+.comments.selected .side-comments-counter, .comments.selected .side-comments-counter:after {
+  opacity: 1;
 }
  
 .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-width: 10px 5px 0;
+  border-color: #bdbdbd transparent;
   display: block;
   width: 0;
 }
@@ -145,7 +182,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;}
  
@@ -157,6 +194,10 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
  
 #article .side-comment .article-comments-list {
   margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 400px;
+  border-bottom: 1px solid rgb(240, 240, 240);
 }
 #article .side-comment .article-comments-list .article-comment {
   margin: 0;
@@ -170,6 +211,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 +225,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 +237,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 +261,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 +280,43 @@ div[class^=&#39;comment-paragraph-loading-&#39;] {
   border-width: 2px;
 }
  
+.comment-paragraph-slide-left .comments {
+  position: relative;
+  display: table;
+}
+
+.comments .comment_paragraph:hover, .comments.selected .comment_paragraph {
+  background-color: rgb(236, 236, 236);
+}
+
 .comment-paragraph-group-comments{
   position: absolute;
+  right: -296px;
+  top: 0px;
   background-color: white;
-  z-index: 9999;
+  z-index: 199;
 }
  
-.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;
+}
+
+.comment-paragraph-plugin .post_comment_box {
+  text-align: center;
+  padding: 5px 5px 0 5px;
+}
+.comment-paragraph-plugin .comment-details .menu-submenu {
+  right: 21px;
+  top: -1px;
+}
+
+.comment-paragraph-plugin .comment_reply.post_comment_box form {
+  padding-left: 0;
+  padding-right: 10px;
+  margin-left: -36px;
 }
-<table class="comments">
-  <tr>
-    <td>
-      <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>">
-        <%= inner_html %>
-      </div>
-    </td>
-    <td>
-      <div  align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_uuid %>"  data-paragraph="<%= paragraph_uuid %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
-        <span id="comment-count-<%= paragraph_uuid %>" class='comment-count'>
-          <%= count %>
-        </span>
-      </div>
-    </td>
-    <td>
+<div class="comment-paragraph-plugin comments">
+  <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>">
+    <%= inner_html %>
+  </div>
+  <div class="side-comments-counter-container">
+    <div class="side-comments-counter" id="side_comments_counter_<%= paragraph_uuid %>"  data-paragraph="<%= paragraph_uuid %>">
+      <span id="comment-count-<%= paragraph_uuid %>" 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_uuid => paragraph_uuid, :article_id => article_id}
@@ -33,7 +29,9 @@
   <div class="side-comment" id="side_comment_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>" style="display:none">
      <div class="comment-paragraph-loading-<%= paragraph_uuid %>">
        <div class="comments_list_toggle_paragraph_<%= paragraph_uuid %>" >
-         <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_uuid %>"></div>
+         <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_uuid %>">
+           <div class="loading"></div>
+         </div>
          <div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_uuid %>_more"></div>
          <div id="page-comment-form-<%= paragraph_uuid %>" class='post_comment_box closed'>
            <%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_uuid => paragraph_uuid}%>
@@ -42,9 +40,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,16 @@ 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	+ $('.comments').removeClass('selected');
	62	+ }
	63	+
57	64	function showBox(div){
58	65	if(div.hasClass('closed')) {
59	66	div.removeClass('closed');
...	...	@@ -65,31 +72,19 @@ jQuery(document).ready(function($) {
65	72	cssApplier = rangy.createCssClassApplier("commented-area", {normalize: false});
66	73	//Add marked text bubble
67	74	$("body").append('\
68		- <a id="comment-bubble" style="width:90px;text-decoration: none">\
	75	+ <a id="comment-bubble">\
69	76	<div align="center" class="triangle-right" >Comentar</div>\
70	77	</a>');
71	78
72		- function resizeArticle(paragraphId){
73		- var commentHeigh = $('#side_comment_' + paragraphId).height();
74		- if(commentHeigh > 0){
75		- $('.article-body').height(originalArticleHeight + commentHeigh + 50);
76		- }else{
77		- $('.article-body').height(originalArticleHeight);
78		- }
79		- }
80		-
81	79	$('.side-comments-counter').click(function(){
82	80	var paragraphId = $(this).data('paragraph');
83	81	hideAllCommentsExcept(paragraphId);
84	82	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();
	83	+ hideCommentBox();
	84	+ $(this).closest('.comments').addClass('selected');
	85	+ $('.article-body').addClass('comment-paragraph-slide-left');
	86	+ $('#side_comment_' + paragraphId).show();
	87	+ $('#comment-bubble').removeClass('visible');
93	88	//Loads the comments
94	89	var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
95	90	$.ajax({
...	...	@@ -98,7 +93,6 @@ jQuery(document).ready(function($) {
98	93	}).done(function() {
99	94	var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
100	95	button.click();
101		- resizeArticle(paragraphId);
102	96	});
103	97	});
104	98
...	...	@@ -108,7 +102,6 @@ jQuery(document).ready(function($) {
108	102	if($('.comment-paragraph-slide-left').size()==0){
109	103	$('.article-body').addClass('comment-paragraph-slide-left');
110	104	}
111		- $("#comment-bubble").css({top: 0, left: 0, position:'absolute'});
112	105	var url = $("#comment-bubble").data('url');
113	106	var paragraphId = $("#comment-bubble").data("paragraphId");
114	107	hideAllCommentsExcept(paragraphId);
...	...	@@ -119,7 +112,6 @@ jQuery(document).ready(function($) {
119	112	}).done(function() {
120	113	var button = $('#page-comment-form-' + paragraphId + ' a').get(0);
121	114	button.click();
122		- resizeArticle(paragraphId);
123	115	});
124	116	});
125	117
...	...	@@ -142,8 +134,6 @@ jQuery(document).ready(function($) {
142	134	});
143	135	}
144	136
145		- $("#comment-bubble").hide();
146		-
147	137	function getSelectionText() {
148	138	var text = "";
149	139	if (window.getSelection) {
...	...	@@ -157,19 +147,15 @@ jQuery(document).ready(function($) {
157	147	function setCommentBubblePosition(posX, posY) {
158	148	$("#comment-bubble").css({
159	149	top: (posY - 80),
160		- left: (posX - 70),
161		- position:'absolute'
	150	+ left: (posX - 70)
162	151	});
163	152	}
164	153
165	154	//highlight area from the paragraph
166	155	$('.comment_paragraph').mouseup(function(event) {
167	156
168		- $('#comment-bubble').hide();
169	157	if($('.comment-paragraph-slide-left').size() > 0){
170		- $('.article-body').removeClass('comment-paragraph-slide-left');
171		- $('.side-comment').hide();
172		- //$('.side-comment').find().hide();
	158	+ hideCommentBox();
173	159	}
174	160
175	161	//Don't do anything if there is no selected text
...	...	@@ -185,7 +171,7 @@ jQuery(document).ready(function($) {
185	171	var url = $('#link_to_ajax_comments_' + paragraphId).data('url');
186	172	$("#comment-bubble").data("url", url);
187	173	$("#comment-bubble").data("paragraphId", paragraphId);
188		- $("#comment-bubble").show();
	174	+ $("#comment-bubble").addClass('visible');
189	175
190	176	var rootElement = $(this).get(0);
191	177
...	...
	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	}
...	...	@@ -83,6 +94,8 @@ div.article-comments-list-more{
83	94	width: 150px;
84	95	right: 0;
85	96	top: 0;
	97	+ zoom: 0.8;
	98	+ -moz-transform: scale(0.8);
86	99	}
87	100
88	101	.side-comment .comment-created-at{display: none;}
...	...	@@ -93,10 +106,10 @@ div.article-comments-list-more{
93	106	div[class^='comments_list_toggle_paragraph_'] {
94	107	border-style: solid;
95	108	border-width: 1px;
96		- border-color: #ccc;
	109	+ border-color: #e7e7e7;
97	110	padding: 5px;
98	111	background-color: whitesmoke;
99		- width: 300px;
	112	+ width: 280px;
100	113	}
101	114
102	115	div[class^='comment-paragraph-loading-'] {
...	...	@@ -109,6 +122,13 @@ div[class^='comment-paragraph-loading-'] {
109	122
110	123	.side-comment{
111	124	z-index: 199;
	125	+ box-shadow: 0px 0px 20px #b8b8b8;
	126	+}
	127	+
	128	+.side-comments-counter-container {
	129	+ display: table-cell;
	130	+ vertical-align: middle;
	131	+ padding-left: 10px;
112	132	}
113	133
114	134	.side-comments-counter {
...	...	@@ -116,26 +136,43 @@ div[class^='comment-paragraph-loading-'] {
116	136	width: 20px;
117	137	height: 19px;
118	138	padding: 0px;
119		- background: #b3b2d4;
120		- -webkit-border-radius: 5px;
121		- -moz-border-radius: 5px;
122		- border-radius: 5px;
	139	+ background: #b5b5b5;
	140	+ -webkit-border-radius: 2px;
	141	+ -moz-border-radius: 2px;
	142	+ border-radius: 2px;
123	143	cursor: pointer;
124	144	z-index: 1;
	145	+ display: inline-block;
	146	+ font-weight: bold;
	147	+ color: white;
	148	+ text-align: center;
	149	+ opacity: 0.7;
125	150	}
126	151
127		-.side-comments-counter:hover{
128		- color: white;
	152	+.comment-paragraph-plugin .loading {
	153	+ height: 40px;
	154	+ background-position: center 0;
	155	+}
	156	+
	157	+.side-comments-counter:hover {
	158	+ background-color: rgb(117, 192, 117);
	159	+}
	160	+.side-comments-counter:hover:after {
	161	+ border-color: rgb(117, 192, 117) transparent;
	162	+}
	163	+
	164	+.comments.selected .side-comments-counter, .comments.selected .side-comments-counter:after {
	165	+ opacity: 1;
129	166	}
130	167
131	168	.side-comments-counter:after {
132	169	content: "";
133	170	position: absolute;
134	171	bottom: -9px;
135		- left: 8px;
	172	+ left: 5px;
136	173	border-style: solid;
137		- border-width: 12px 5px 0;
138		- border-color: #b3b2d4 transparent;
	174	+ border-width: 10px 5px 0;
	175	+ border-color: #bdbdbd transparent;
139	176	display: block;
140	177	width: 0;
141	178	}
...	...	@@ -145,7 +182,7 @@ div[class^='comment-paragraph-loading-'] {
145	182	top: 3px;
146	183	}
147	184
148		-.article-comment-inner {border-bottom: 1px solid #ddd;}
	185	+.article-comment-inner {border-bottom: 1px solid #ececec;}
149	186
150	187	#article .side-comment .comment-replies .article-comment{background: white; border: 0px; border-top: 1px solid #ddd;}
151	188
...	...	@@ -157,6 +194,10 @@ div[class^='comment-paragraph-loading-'] {
157	194
158	195	#article .side-comment .article-comments-list {
159	196	margin: 0;
	197	+ overflow-y: auto;
	198	+ overflow-x: hidden;
	199	+ max-height: 400px;
	200	+ border-bottom: 1px solid rgb(240, 240, 240);
160	201	}
161	202	#article .side-comment .article-comments-list .article-comment {
162	203	margin: 0;
...	...	@@ -170,6 +211,7 @@ div[class^='comment-paragraph-loading-'] {
170	211	width: 98%;
171	212	text-align: justify;
172	213	overflow: visible;
	214	+ color: rgb(107, 107, 107);
173	215	}
174	216	.side-comment .comment-text p {
175	217	margin: 0;
...	...	@@ -183,6 +225,8 @@ div[class^='comment-paragraph-loading-'] {
183	225	left: 36px;
184	226	line-height: 0;
185	227	font-weight: bold;
	228	+ font-size: 12px;
	229	+ color: rgb(80, 80, 80);
186	230	}
187	231	.side-comment .comment-wrapper-1 {
188	232	margin-left: 36px;
...	...	@@ -193,6 +237,8 @@ div[class^='comment-paragraph-loading-'] {
193	237	#article .side-comment .comment-picture {
194	238	width: 100%;
195	239	height: auto;
	240	+ margin-top: 8px;
	241	+ max-width: none;
196	242	}
197	243	#article .side-comment .article-comment .comment-details > h4 {
198	244	display: none;
...	...	@@ -215,21 +261,9 @@ div[class^='comment-paragraph-loading-'] {
215	261	bg-color: #b3b2d4;
216	262	}
217	263
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		-}*/
	264	+.side-comment textarea {
	265	+ height: 50px;
	266	+}
233	267
234	268	.comment-paragraph-comments{
235	269	background: lightblue;
...	...	@@ -246,14 +280,43 @@ div[class^='comment-paragraph-loading-'] {
246	280	border-width: 2px;
247	281	}
248	282
	283	+.comment-paragraph-slide-left .comments {
	284	+ position: relative;
	285	+ display: table;
	286	+}
	287	+
	288	+.comments .comment_paragraph:hover, .comments.selected .comment_paragraph {
	289	+ background-color: rgb(236, 236, 236);
	290	+}
	291	+
249	292	.comment-paragraph-group-comments{
250	293	position: absolute;
	294	+ right: -296px;
	295	+ top: 0px;
251	296	background-color: white;
252		- z-index: 9999;
	297	+ z-index: 199;
253	298	}
254	299
255		-.comment-paragraph-slide-left{
	300	+.article-body.comment-paragraph-slide-left {
256	301	position: relative;
257	302	width: 80%;
258		- transition: 0.6s;
	303	+}
	304	+.article-body {
	305	+ width: 100%;
	306	+ transition: width 0.3s ease-in-out;
	307	+}
	308	+
	309	+.comment-paragraph-plugin .post_comment_box {
	310	+ text-align: center;
	311	+ padding: 5px 5px 0 5px;
	312	+}
	313	+.comment-paragraph-plugin .comment-details .menu-submenu {
	314	+ right: 21px;
	315	+ top: -1px;
	316	+}
	317	+
	318	+.comment-paragraph-plugin .comment_reply.post_comment_box form {
	319	+ padding-left: 0;
	320	+ padding-right: 10px;
	321	+ margin-left: -36px;
259	322	}
...	...
1		-<table class="comments">
2		- <tr>
3		- <td>
4		- <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>">
5		- <%= inner_html %>
6		- </div>
7		- </td>
8		- <td>
9		- <div align="center" class="side-comments-counter" id="side_comments_counter_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px;">
10		- <span id="comment-count-<%= paragraph_uuid %>" class='comment-count'>
11		- <%= count %>
12		- </span>
13		- </div>
14		- </td>
15		- <td>
	1	+<div class="comment-paragraph-plugin comments">
	2	+ <div class="comment_paragraph" id="comment_paragraph_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>">
	3	+ <%= inner_html %>
	4	+ </div>
	5	+ <div class="side-comments-counter-container">
	6	+ <div class="side-comments-counter" id="side_comments_counter_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>">
	7	+ <span id="comment-count-<%= paragraph_uuid %>" 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_uuid => paragraph_uuid, :article_id => article_id}
...	...	@@ -33,7 +29,9 @@
33	29	<div class="side-comment" id="side_comment_<%= paragraph_uuid %>" data-paragraph="<%= paragraph_uuid %>" style="display:none">
34	30	<div class="comment-paragraph-loading-<%= paragraph_uuid %>">
35	31	<div class="comments_list_toggle_paragraph_<%= paragraph_uuid %>" >
36		- <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_uuid %>"></div>
	32	+ <div class="article-comments-list" id="comments_list_paragraph_<%= paragraph_uuid %>">
	33	+ <div class="loading"></div>
	34	+ </div>
37	35	<div class ="article-comments-list-more" id="comments_list_paragraph_<%= paragraph_uuid %>_more"></div>
38	36	<div id="page-comment-form-<%= paragraph_uuid %>" class='post_comment_box closed'>
39	37	<%= render :partial => 'comment/comment_form', :locals => {:comment => Comment.new, :display_link => true, :cancel_triggers_hide => true, :paragraph_uuid => paragraph_uuid}%>
...	...	@@ -42,9 +40,7 @@
42	40	</div>
43	41	</div>
44	42	</div>
45		- </td>
46		- </tr>
47		-</table>
	43	+</div>
48	44
49	45
50	46
...	...