wip

app/views/comments/_comments.mobile.haml

@@ -1,18 +0,0 @@
--#   Copyright (c) 2010-2011, Diaspora Inc.  This file is
--#   licensed under the Affero General Public License version 3 or later.  See
--#   the COPYRIGHT file.
-.comment_stream
-  - unless comments_expanded
-    %ul.show_comments{:class => ("hidden" if post.comments.size <= 3)}
-      %li
-        = comment_toggle( post)
-
-  %ul.comments{:class => ('loaded' if post.comments.size <= 3)}
-    -if post.comments.size > 3 && !comments_expanded
-      = render :partial => 'comments/comment', :collection => post.last_three_comments, :locals => {:post => post}
-    -else
-      = render :partial => 'comments/comment', :collection => post.comments, :locals => {:post => post}
-
-  - unless !user_signed_in? || @commenting_disabled
-    .new_comment_form_wrapper{:class => comment_form_wrapper_class(post)}
-      = new_comment_form(post.id, current_user)

app/views/comments/_new_comment.mobile.haml

@@ -6,7 +6,7 @@
   = 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}"
 
-  %div{:style => 'text-align:right;'}
+  .actions
     = link_to "Cancel", post_path(post_id), :class => "cancel_new_comment btn"
     = submit_tag t('.comment'), :id => "comment_submit_#{post_id}", :disable_with => t('.commenting'), :class => "action"
 

app/views/comments/index.html.haml

@@ -1 +1 @@
-= render :partial => 'comments/comment', :collection => @comments, :locals => {:post => @post}
+= render :partial => 'comments/comment', :colleccion => @comments, :locals => {:post => @post}

app/views/comments/index.mobile.haml

@@ -1 +1,5 @@
-= render :partial => 'comments/comment', :collection => @comments, :locals => {:post => @post}
+%ul.comments
+  = render :partial => 'comments/comment', :collection => @comments, :locals => {:post => @post}
+
+  %li.comment.add_comment_bottom_link_container
+    = 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

@@ -62,7 +62,6 @@
 
     / javascripts at the bottom
     = include_javascripts :mobile
-    = yield(:javascript)
 
     /-if current_user
     /  :javascript

app/views/shared/_publisher.mobile.haml

@@ -3,6 +3,7 @@
 -#   the COPYRIGHT file.
 
 = form_for StatusMessage.new, {:data => {:ajax => false}} do |status|
+  #message_container
     = status.text_area :text, :placeholder => t('.whats_on_your_mind'), :style => "width:300px", :rows => 4, :autofocus => "autofocus"
 
   - for aspect_id in aspect_ids
@@ -16,8 +17,6 @@
       - unless current_user.services.empty?
         %div{:data => {:role => 'fieldcontain'}}
           %label{:for => 'services', :class => 'select'}
-            choose services
-
           - current_user.services.each do |service|
             %input{:type => 'checkbox', :name => "services[]", :id => "#{service.provider}", :class => 'custom', :value => "#{service.provider}"}
             %label{:for => "#{service.provider}"}

app/views/shared/_stream_element.mobile.haml

@@ -12,7 +12,6 @@
     - elsif post.activity_streams?
       = image_tag post.image_url
 
-
   .content
     .from
       = person_image_link(post.author, :size => :thumb_small)

public/javascripts/mobile.js

@@ -59,8 +59,7 @@ $(document).ready(function(){
       $.ajax({
         url: link.attr('href'),
         success: function(data){
-          var comments = $("<ul class='comments'></ul>");
+          parent.append(data);
-          parent.append(comments.append(data));
           link.addClass('active');
         }
       });
@@ -72,7 +71,9 @@ $(document).ready(function(){
     var link = $(this);
 
     if(link.hasClass('inactive')) {
-      var parent = link.closest(".bottom_bar").first();
+      var parent = link.closest(".bottom_bar").first(),
+          container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container');
+
       $.ajax({
         url: link.attr('href'),
         beforeSend: function(){
@@ -81,7 +82,11 @@ $(document).ready(function(){
         success: function(data){
           link.removeClass('loading')
               .removeClass('inactive');
+
+          container.first().hide();
+
           parent.append(data);
+          parent.find('textarea').first().focus();
         }
       });
     }
@@ -92,9 +97,13 @@ $(document).ready(function(){
     var link = $(this);
         form = link.closest("form"),
         commentActionLink = link.closest(".bottom_bar").find("a.comment_action").first();
+        container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container');
+
+    if(container.length > 0 ){
+      container.first().show();
+    }
 
     commentActionLink.addClass("inactive");
     form.remove();
   });
-
 });

public/stylesheets/sass/mobile.scss

@@ -213,6 +213,7 @@ body {
 #author_info.profile {
   box-shadow: inset 0 -1px 3px #111;
   margin-top: -10px;
+  text-align: left;
 
   h2 {
     color: #ccc;
@@ -285,7 +286,7 @@ footer {
     top: 1px solid #dddddd; };
   min-height: 24px;
 
-  a,
+  > a,
   .show_comments {
     color: #999;
     font-weight: bold;
@@ -378,7 +379,7 @@ footer {
   }
 }
 
-.comment_action {
+.comment_action.image_link {
   background-image: url("/images/icons/pencil_mobile_grey_active.png");
 
   &.inactive {
@@ -396,38 +397,78 @@ footer {
 }
 
 #new_status_message {
+  text-align: left;
   position: absolute;
   left: 0;
-  top: 45px;
+  top: 40px;
-  width:100%;
+  width: 100%;
+
+  fieldset {
+    padding: 10px;
+  }
+
+  #message_container {
+    background-color: #fff;
+    padding: 5px;
+  }
 
   textarea {
     @include border-radius(0);
     left: 0;
+    border: none;
+    margin: 10px 0;
+    font-size: larger;
+    padding: 0;
+    min-width: 100%;
   }
 }
 
+textarea {
+  font-size: larger !important;
+}
+
 form {
   input:not([type='checkbox']),
   textarea {
     -webkit-appearance: none;
     text-size: larger;
   }
+}
 
-  .btn,
+.btn,
-  input[type=submit] {
+input[type=submit] {
   @include border-radius(3px);
-    background-color: #ccc;
+  background-color: #ddd;
   color: #666;
   text-size: larger;
   font-weight: bold;
   padding: 10px;
-    border: 1px solid #999;
+  border: 1px solid #ccc;
+  min-width: 100px;
 
   &.action {
     color: #fff;
     background-color: green;
     border: 1px solid #888;
   }
+}
+
+.new_comment {
+  padding: 10px 0;
+  padding-top: 20px;
+
+  textarea {
+    width: 98%;
+  }
+
+  .actions {
+    text-align: right;
+    margin-top: 10px;
   }
 }
+
+.comment.add_comment_bottom_link_container {
+  text-align: center;
+  padding: 15px !important;
+  padding-top: 25px !important;
+}