first working version

app/assets/javascripts/my_modules/results.js

@@ -1,5 +1,4 @@
 //= require comments
-
 function initHandsOnTables(root) {
   root.find("div.hot-table").each(function()  {
     var $container = $(this).find(".step-result-hot-table");
@@ -49,7 +48,7 @@ function initResultCommentForm($el) {
         .find("li.no-comments").remove();
 
       list.parent().find(".content-comments")
-        .prepend("<li class='comment'>" + data.html + "</li>")
+        .append("<li class='comment'>" + data.html + "</li>")
         .scrollTop(0);
       list.parents("ul").find("> li.comment:gt(8)").remove();
       $("#comment_message", $form).val("");
@@ -58,9 +57,7 @@ function initResultCommentForm($el) {
       $(".help-block", $form)
           .html("")
           .addClass("hide");
-      scrollCommentOptions(
+      scrollBottom($el);
-        list.parent().find(".content-comments .dropdown-comment")
-      );
     }
   })
   .on("ajax:error", function (ev, xhr) {
@@ -77,6 +74,7 @@ function initResultCommentForm($el) {
     }
   })
   .on("ajax:complete", function () {
+    scrollBottom($("#comment_message", $form));
     $("#comment_message", $form)
       .attr("readonly", false)
       .focus();
@@ -92,7 +90,7 @@ function initResultCommentsLink($el) {
       var list = $(this).parents("ul");
       var moreBtn = list.find(".btn-more-comments");
       var listItem = moreBtn.parents('li');
-      $(data.html).insertBefore(listItem);
+      $(data.html).insertAfter(listItem);
       if (data.results_number < data.per_page) {
         moreBtn.remove();
       } else {
@@ -106,38 +104,72 @@ function initResultCommentsLink($el) {
   });
 }
 
-function initResultCommentTabAjax() {
+// function initResultCommentTabAjax(element) {
-  $(".comment-tab-link")
+//   debugger;
-  .on("ajax:before", function (e) {
+//   $(element)
-    var $this = $(this);
+//   .on("ajax:before", function (e) {
-    var parentNode = $this.parents("li");
+//     debugger;
-    var targetId = $this.attr("aria-controls");
+//     var $this = $(this);
+//     var parentNode = $this.parents("li");
+//     var targetId = $this.attr("aria-controls");
+//
+//     if (parentNode.hasClass("active")) {
+//       return false;
+//     }
+//   })
+//   .on("ajax:success", function (e, data) {
+//     if (data.html) {
+//       var $this = $(this);
+//       var targetId = $this.attr("aria-controls");
+//       var target = $("#" + targetId);
+//       var parentNode = $this.parents("ul").parent();
+//
+//       target.html(data.html);
+//       initResultCommentForm(parentNode);
+//       initResultCommentsLink(parentNode);
+//
+//       parentNode.find(".active").removeClass("active");
+//       $this.parents("li").addClass("active");
+//       target.addClass("active");
+//     }
+//   })
+//   .on("ajax:error", function(e, xhr, status, error) {
+//     // TODO
+//   });
+// }
 
-    if (parentNode.hasClass("active")) {
+function loadCommentsIn() {
-      return false;
+  $.each($(".result-comment"), function() {
-    }
+    var that = $(this);
-  })
+    var link = that.attr("data-href");
-  .on("ajax:success", function (e, data) {
+    $.ajax({ method: 'GET',
-    if (data.html) {
+             url: link,
-      var $this = $(this);
+             beforeSend: animateSpinner(that, true) })
-      var targetId = $this.attr("aria-controls");
+      .done(function(data) {
-      var target = $("#" + targetId);
+        that.html(data.html);
-      var parentNode = $this.parents("ul").parent();
+        initResultCommentForm(that);
-
+        initResultCommentsLink(that);
-      target.html(data.html);
+        scrollBottom(that.find(".content-comments"));
-      initResultCommentForm(parentNode);
+        animateSpinner(that, false);
-      initResultCommentsLink(parentNode);
+      })
-
+      .always(function(data) {
-      parentNode.find(".active").removeClass("active");
+        animateSpinner(that, false);
-      $this.parents("li").addClass("active");
+      });
-      target.addClass("active");
-    }
-  })
-  .on("ajax:error", function(e, xhr, status, error) {
-    // TODO
   });
 }
 
+function scrollBottom(id) {
+  var list;
+  if ( id.hasClass("content-comments")) {
+    list = id;
+  } else {
+    list = id.find(".content-comments");
+  }
+  if ( list && list.length > 0) {
+    list.scrollTop($(list)[0].scrollHeight);
+  }
+}
+
 function applyCollapseLinkCallBack() {
   $(".result-panel-collapse-link")
     .on("ajax:success", function() {
@@ -183,8 +215,9 @@ function expandResult(result) {
 
 
 initHandsOnTables($(document));
-initResultCommentTabAjax();
+//initResultCommentTabAjax();
 expandAllResults();
+loadCommentsIn();
 initTutorial();
 applyCollapseLinkCallBack();
 

app/assets/stylesheets/themes/scinote.scss

@@ -911,6 +911,10 @@ ul.content-module-activities {
     margin-left: 38px;
   }
 
+  .row {
+    padding: 0 20px;
+  }
+
   .badge-num {
     position: absolute;
 
@@ -1178,6 +1182,9 @@ html.turbolinks-progress-bar::before {
 
 // Comments
 
+.comment-more {
+  margin-left: 15px;
+}
 .dropdown.dropdown-comment {
   display: inline-block;
 

app/controllers/result_comments_controller.rb

@@ -1,8 +1,8 @@
 class ResultCommentsController < ApplicationController
   before_action :load_vars
 
-  before_action :check_view_permissions, only: [ :index ]
+  before_action :check_view_permissions, only: [:index]
-  before_action :check_add_permissions, only: [ :new, :create ]
+  before_action :check_add_permissions, only: [:new, :create]
   before_action :check_edit_permissions, only: [:edit, :update]
   before_action :check_destroy_permissions, only: [:destroy]
 
@@ -10,31 +10,28 @@ class ResultCommentsController < ApplicationController
     @comments = @result.last_comments(@last_comment_id, @per_page)
 
     respond_to do |format|
-      format.json {
+      format.json do
         # 'index' partial includes header and form for adding new
         # messages. 'list' partial is used for showing more
         # comments.
-        partial = "index.html.erb"
+        partial = 'index.html.erb'
-        partial = "list.html.erb" if @last_comment_id > 0
+        partial = 'list.html.erb' if @last_comment_id > 0
-        more_url = ""
+        more_url = ''
         if @comments.count > 0
           more_url = url_for(result_result_comments_path(@result,
-                                                     format: :json,
+                                                         format: :json,
-                                                     from: @comments.last.id))
+                                                         from: @comments
+                                                                 .first.id))
         end
-        render :json => {
+        render json: {
           per_page: @per_page,
           results_number: @comments.length,
           more_url: more_url,
-          html: render_to_string({
+          html: render_to_string(partial: partial,
-            partial: partial,
+                                 locals: { comments: @comments,
-            locals: {
+                                           more_comments_url: more_url })
-              comments: @comments,
-              more_comments_url: more_url
-            }
-          })
         }
-      }
+      end
     end
   end
 

app/models/result.rb

@@ -74,11 +74,12 @@ class Result < ActiveRecord::Base
 
   def last_comments(last_id = 1, per_page = 20)
     last_id = 9999999999999 if last_id <= 1
-    Comment.joins(:result_comment)
+    comments = Comment.joins(:result_comment)
-    .where(result_comments: {result_id: id})
+                      .where(result_comments: { result_id: id })
-    .where('comments.id <  ?', last_id)
+                      .where('comments.id <  ?', last_id)
-    .order(created_at: :desc)
+                      .order(created_at: :desc)
-    .limit(per_page)
+                      .limit(per_page)
+    comments.reverse
   end
 
   def is_text

app/models/step.rb

@@ -88,7 +88,7 @@ class Step < ActiveRecord::Base
   end
 
   def last_comments(last_id = 1, per_page = 20)
-    last_id = 9999999999 if last_id <= 1
+    last_id = 9999999999999 if last_id <= 1
     comments = Comment.joins(:step_comment)
                       .where(step_comments: { step_id: id })
                       .where('comments.id <  ?', last_id)

app/views/my_modules/_result.html.erb

@@ -41,7 +41,7 @@
             <a href="#result-info-<%= result.id %>" data-toggle="tab"><span class="glyphicon glyphicon-info-sign"></span>
               <%= t'my_modules.results.info_tab' %></a>
           </li>
-          <% if can_view_result_comments(@my_module) %>
+          <% if false %>
           <li role="presentation">
             <a class="comment-tab-link" href="<%= url_for result_result_comments_path(result_id: result.id, format: :json) %>" aria-controls="result-comments-<%= result.id %>" data-remote="true">
               <span class="glyphicon glyphicon-comment"></span>
@@ -51,9 +51,19 @@
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" role="tabpanel" id="result-info-<%= result.id %>">
-            <%= render partial: 'my_modules/result_user_generated.html.erb', locals: { result: result, markdown: markdown } %>
+            <div class="row">
+              <%= render partial: 'my_modules/result_user_generated.html.erb',
+                         locals: { result: result, markdown: markdown } %>
+            </div>
+            <% if can_view_result_comments(@my_module) %>
+            <div class="row">
+              <div class="result-comment"
+                   role="tabpanel"
+                   id="result-comments-<%= result.id %>"
+                   data-href="<%= result_result_comments_url(result) %>"></div>
+            </div>
+            <% end %>
           </div>
-          <div class="tab-pane" role="tabpanel" id="result-comments-<%= result.id %>"></div>
         </div>
       </div>
     </div>

app/views/result_comments/_index.html.erb

@@ -1,11 +1,7 @@
+<hr>
 <h5 class="text-center"><%= t('my_modules.results.comments_tab') %></h5>
 <hr>
 <ul class="no-style double-line content-comments">
-  <% if @comments.size == 0 then %>
-    <li class="no-comments"><em><%= t 'general.no_comments' %></em></li>
-  <% else %>
-    <%= render 'result_comments/list.html.erb', comments: @comments %>
-  <% end %>
   <% if @comments.length == @per_page %>
     <li class="comment-more text-center">
       <a class="btn btn-default btn-more-comments" href="<%= more_comments_url %>" data-remote="true">
@@ -13,6 +9,11 @@
       </a>
     </li>
   <% end %>
+  <% if @comments.size == 0 then %>
+    <li class="no-comments"><em><%= t 'general.no_comments' %></em></li>
+  <% else %>
+    <%= render 'result_comments/list.html.erb', comments: @comments %>
+  <% end %>
 </ul>
 <% if can_add_result_comment_in_module(@my_module) then %>
   <ul class="no-style double-line">