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>