styled new comments layout

app/assets/javascripts/step_comments.js

@@ -16,6 +16,7 @@
         beforeSend: animateSpinner(that, true),
         success: function(data){
           $(that.children()[0]).html(data.html);
+          commentFormOnSubmitAction();
           animateSpinner(that, false);
         },
         complete: animateSpinner(that, false)
@@ -24,15 +25,14 @@
   }
 
   function refreshComments(child){
-    var parent = chils.closest(".step-comment");
+    var parent = child.closest(".step-comment");
     var link = parent.attr("data-href");
-
     $.ajax({
       method: 'GET',
       url: link,
       beforeSend: animateSpinner(parent, true),
       success: function(data){
-        $(parent.children()[0]).html(data.html);
+        updateCommentHTML(parent, data);
         animateSpinner(parent, false);
       },
       complete: animateSpinner(parent, false)
@@ -42,15 +42,22 @@
   function commentFormOnSubmitAction(){
     $(".comment-form")
       .each(function() {
-        var obj = $(this);
-        debugger;
-        obj
-          .on('submit', function(){
-            refreshComments(obj);
-          });
+        bindCommentAjax($(this));
       });
   }
 
+  function bindCommentAjax(form){
+    form
+      .ajaxSuccess( function(){
+        refreshComments(form);
+      });
+  }
+
+  function updateCommentHTML(parent, data) {
+    var comment_form = $(parent.find(".comment-form"));
+    $(parent.children()[0]).html(data.html);
+    bindCommentAjax(comment_form);
+  }
+
   initializeComments();
-  commentFormOnSubmitAction();
 })();

app/assets/stylesheets/my_modules.scss

@@ -2,6 +2,8 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
+@import "colors";
+
 .description-label {
   word-wrap: break-word;
 }
@@ -14,4 +16,19 @@
 
 .btn-colorselector{
 	background-color: transparent !important;
-}
+}
+
+.step-comment {
+  border: 1px solid $color-gallery;
+}
+
+.equal {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+
+  & > div[class*='col-'] {
+    display: flex;
+    flex-direction: column;
+  }
+}

app/views/steps/_step.html.erb

@@ -30,8 +30,9 @@
       </a>
     </div>
     <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
-      <div class="panel-body">
+      <div class="panel-body equal">
       <% if @protocol.in_module? %>
+      <div class="col-md-9">
         <ul class="nav nav-tabs">
           <li role="presentation" class="active">
             <a class="step-info-tab" href="#step-info-<%= step.id %>" data-toggle="tab"><span class="glyphicon glyphicon-info-sign"></span>
@@ -40,7 +41,6 @@
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" role="tabpanel" id="step-info-<%= step.id %>">
-            <div class="col-md-9">
       <% end %>
         <% if step.description.blank? %>
           <em><%= t("protocols.steps.no_description") %></em>
@@ -126,13 +126,13 @@
         <% end %>
 <% if @protocol.in_module? %>
           </div>
-          <% if can_view_step_comments(@protocol) %>
-          <div class="col-md-3 step-comment" data-href="<%= url_for step_step_comments_path(step_id: step.id, format: :json) %>">
-            <div id="step-comments-<%= step.id %>"></div>
-          </div>
-          <% end %>
         </div>
       </div>
+      <% if can_view_step_comments(@protocol) %>
+      <div class="col-md-3 step-comment" data-href="<%= url_for step_step_comments_path(step_id: step.id, format: :json) %>">
+        <div id="step-comments-<%= step.id %>"></div>
+      </div>
+      <% end %>
 <% end %>
       </div>
     </div>