expand/collapse comments with animation; added collapse link on bottom

app/views/comments/_new_comment.mobile.haml

@@ -4,7 +4,7 @@
 
 = form_tag( post_comments_path(post_id), :id => "new_comment_on_#{post_id}", :class => 'new_comment', :autocomplete => "off") do
   = hidden_field_tag :post_id,  post_id, :id => "post_id_on_#{post_id}"
-  = text_area_tag :text, nil, :rows => 2, :class => "comment_box",:id => "comment_text_on_#{post_id}", :placeholder => t('.comment')
+  = text_area_tag :text, nil, :rows => 2, :class => "comment_box",:id => "comment_text_on_#{post_id}", :placeholder => t('.comment'), :autofocus => true
 
   .actions
     = link_to "Cancel", post_path(post_id), :class => "cancel_new_comment btn"

app/views/comments/index.mobile.haml

@@ -2,7 +2,6 @@
   .post_stats
     %span.comment_count
       = @post.comments.size
-
     %span.like_count
       = @post.likes.size
 
@@ -10,4 +9,6 @@
     = render :partial => 'comments/comment', :collection => @comments, :locals => {:post => @post}
 
     %li.comment.add_comment_bottom_link_container
+      = link_to "#", :class => "show_comments bottom_collapse active" do
+        = image_tag 'icons/arrow_up_small.png'
       = link_to "Add a comment", new_post_comment_path(@post), :class => 'add_comment_bottom_link btn comment_action inactive'

app/views/layouts/application.mobile.haml

@@ -50,11 +50,6 @@
       - if user_signed_in?
         = link_to(image_tag('icons/compose_mobile2.png', :height => 28, :width => 28), new_status_message_path, :class => 'compose_icon')
 
-    - if flash.present?
-      %p
-        - flash.each do |name, msg|
-          = content_tag :div, msg, :id => "flash_#{name}"
-
     #main{:role => "main"}
       = yield
 
@@ -64,9 +59,6 @@
     / javascripts at the bottom
     = include_javascripts :mobile
 
-    /-if current_user
-    /  :javascript
-    /    Diaspora.I18n.loadLocale(#{get_javascript_strings_for(current_user.language).to_json}, "#{current_user.language}");
     :javascript
       MBP.hideUrlBar();
 

public/javascripts/mobile.js

@@ -52,27 +52,37 @@ $(document).ready(function(){
     });
   });
 
-  $("a.show_comments").bind("tap click", function(evt){
+  $(".stream").delegate(".show_comments", "tap click", function(evt){
     evt.preventDefault();
     var link = $(this),
         parent = link.closest(".bottom_bar").first(),
-        commentsContainer = parent.find(".comment_container");
+        commentsContainer = function(){ return parent.find(".comment_container").first(); }
+        existingCommentsContainer = commentsContainer();
 
     if( link.hasClass('active') ) {
-      commentsContainer.first().hide();
+      existingCommentsContainer.hide();
-      link.removeClass('active');
+      if(!link.hasClass('bottom_collapse')){
+        link.removeClass('active');
+      } else {
+        parent.find(".show_comments").first().removeClass('active');
+      }
 
-    } else if( commentsContainer.length > 0) {
+      $('html,body').scrollTop(parent.offset().top - parent.closest(".stream_element").height() - 8);
-      commentsContainer.first().show();
 
-      if(!commentsContainer.hasClass('noComments')) {
+    } else if( existingCommentsContainer.length > 0) {
+
+      if(!existingCommentsContainer.hasClass('noComments')) {
         $.ajax({
           url: link.attr('href'),
           success: function(data){
             parent.append($(data).find('.comments_container').html());
             link.addClass('active');
+            existingCommentsContainer.show();
+            scrollToOffset(parent, commentsContainer());
           }
         });
+      } else {
+        existingCommentsContainer.show();
       }
 
       link.addClass('active');
@@ -83,18 +93,30 @@ $(document).ready(function(){
         success: function(data){
           parent.append(data);
           link.addClass('active');
+          scrollToOffset(parent, commentsContainer());
         }
       });
     }
+
   });
 
+  var scrollToOffset = function(parent, commentsContainer){
+    var commentCount = commentsContainer.find("li.comment").length;
+    if( commentCount > 3 ) {
+      var lastComment = commentsContainer.find("li:nth-child("+(commentCount-4)+")");
+      $('html,body').animate({
+        scrollTop: lastComment.offset().top
+      }, 1000);
+    }
+  };
+
   $(".stream").delegate("a.comment_action", "tap click", function(evt){
     evt.preventDefault();
     var link = $(this);
 
     if(link.hasClass('inactive')) {
       var parent = link.closest(".bottom_bar").first(),
-          container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container');
+          container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container').first();
 
       $.ajax({
         url: link.attr('href'),
@@ -111,12 +133,9 @@ $(document).ready(function(){
             link.removeClass('inactive');
           }
 
-          container.first().hide();
+          container.hide();
-
           parent.append(data);
-
+          new MBP.autogrow(textarea);
-          textarea.focus();
-          new MBP.autogrow(textarea, lineHeight);
         }
       });
     }
@@ -145,7 +164,7 @@ $(document).ready(function(){
       var bottomBar = form.closest('.bottom_bar').first(),
           container = bottomBar.find('.add_comment_bottom_link_container'),
           commentActionLink = bottomBar.find("a.comment_action").first();
-          reactionLink = bottomBar.find(".show_comments"),
+          reactionLink = bottomBar.find("a.show_comments").first(),
           commentCount = bottomBar.find(".comment_count");
 
       if(container.length > 0) {
@@ -154,7 +173,7 @@ $(document).ready(function(){
         container.show();
 
       } else {
-        var container = $("<div class='comments_container '></div>"),
+        var container = $("<div class='comments_container not_all_present'></div>"),
             comments = $("<ul class='comments'></ul>");
 
         comments.html(data);
@@ -163,8 +182,6 @@ $(document).ready(function(){
         container.appendTo(bottomBar)
       }
 
-      console.log(reactionLink.text());
-
       reactionLink.text(reactionLink.text().replace(/(\d+)/, function(match){ return parseInt(match) + 1; }));
       commentCount.text(commentCount.text().replace(/(\d+)/, function(match){ return parseInt(match) + 1; }));
       commentActionLink.addClass("inactive");

public/stylesheets/sass/mobile.scss

@@ -265,8 +265,6 @@ header {
   z-index: 10;
   top: 0;
 
-  -webkit-transform: translate3d(0,0,0);
-
   border: {
     bottom: 1px solid #222;
   }
@@ -317,7 +315,7 @@ footer {
   a.show_comments {
     color: #999;
 
-    &.active {
+    &.active:not(.bottom_collapse) {
       color: #444;
       padding: {
         right: 14px;
@@ -330,6 +328,13 @@ footer {
     }
   }
 
+  .show_comments.bottom_collapse {
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    padding: 5px 10px;
+  }
+
   #bottom_bar_tabs {
     display: table;
     width: 100%;
@@ -364,10 +369,6 @@ footer {
 .floater {
   float: right; }
 
-.stream_element {
-  -webkit-transform: translate3d(0,0,0);
-}
-
 .stream_element .photo_attachments {
   background: {
     color: #999;
@@ -507,6 +508,7 @@ select {
 }
 
 .comment.add_comment_bottom_link_container {
+  position: relative;
   text-align: center;
   padding: 25px !important;
 }