From a98aa9f62b74458c14e5c291fc0af5bc2131ea2e Mon Sep 17 00:00:00 2001
From: Samuel Clay <samuel@ofbrooklyn.com>
Date: Tue, 22 Jan 2013 17:17:24 -0800
Subject: [PATCH] Fixing editing comments on iphone.

---
 media/css/circular/css/social_page.css        | 32 +++++++++++++++----
 media/css/circular/sass/social_page.scss      | 31 ++++++++++++++----
 .../social_page/social_page_comment.js        |  1 +
 .../social_page/social_page_login_view.js     |  1 +
 4 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/media/css/circular/css/social_page.css b/media/css/circular/css/social_page.css
index a5ddff366..cef5bb4fc 100644
--- a/media/css/circular/css/social_page.css
+++ b/media/css/circular/css/social_page.css
@@ -950,12 +950,22 @@ blockquote {
   float: left;
 }
 .NB-story-comments-container .NB-story-comment-input {
-  width: 371px;
-  height: 16px;
+  width: 380px;
+  height: 32px;
   font-size: 12px;
   padding: 6px 4px;
   margin-top: 3px;
   border: 1px solid #bdbdbd;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+@media screen and (max-width: 580px) {
+  .NB-story-comments-container .NB-story-comment-input {
+    width: 100%;
+    float: none;
+  }
 }
 .NB-story-comments-container .NB-story-comment-reply-form {
   padding-top: 11px;
@@ -980,6 +990,7 @@ blockquote {
   .NB-story-comments-container .NB-story-comment-reply-form .NB-story-comment-reply-comments {
     clear: both;
     margin: 4px 4px 4px 0;
+    width: 68%;
   }
 }
 .NB-story-comments-container .NB-story-comment-reply-form .NB-modal-submit-button {
@@ -1052,10 +1063,9 @@ blockquote {
   clear: both;
 }
 .NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save {
-  position: absolute;
-  top: 13px;
-  right: 0;
-  width: 140px;
+  float: right;
+  width: 164px;
+  margin: 3px 0 0 0;
   border: 1px solid #bdbdbd;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -1106,10 +1116,20 @@ blockquote {
     font-size: 12px;
   }
 }
+@media screen and (max-width: 580px) {
+  .NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-save {
+    clear: both;
+    float: none;
+    margin: 8px 0 0;
+    width: 100%;
+  }
+}
 .NB-story-comments-container .NB-story-comment-buttons .NB-story-comment-delete {
   display: none;
 }
 .NB-story-comments-container .NB-story-comments-public-header-wrapper {
+  clear: both;
+  margin-top: 6px;
   color: gray;
   font-size: 12px;
   border-bottom: 1px solid #bdbdbd;
diff --git a/media/css/circular/sass/social_page.scss b/media/css/circular/sass/social_page.scss
index 4cf8dae54..3e4f95af0 100644
--- a/media/css/circular/sass/social_page.scss
+++ b/media/css/circular/sass/social_page.scss
@@ -960,12 +960,22 @@ blockquote {
     }
     
     .NB-story-comment-input {
-        width: 371px;
-        height: 16px;
+        width: 380px;
+        height: 32px;
         font-size: 12px;
         padding: 6px 4px;
         margin-top: 3px;
         border: 1px solid $border-color;
+        float: left;
+        
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+
+        @media screen and (max-width: 580px) {
+            width: 100%;
+            float: none;
+        }
     }
     
     .NB-story-comment-reply-form {
@@ -989,6 +999,7 @@ blockquote {
             @media screen and (max-width: 580px) {
                 clear: both;
                 margin: 4px 4px 4px 0;
+                width: 68%;
             }
         }
         .NB-modal-submit-button {
@@ -1016,11 +1027,17 @@ blockquote {
 
     .NB-story-comment-buttons {
         .NB-story-comment-save {
-            position: absolute;
-            top: 13px;
-            right: 0;
-            width: 140px;
+            float: right;
+            width: 164px;
+            margin: 3px 0 0 0;
             @include NB-default-button;
+            
+            @media screen and (max-width: 580px) {
+                clear: both;
+                float: none;
+                margin: 8px 0 0;
+                width: 100%;
+            }
         }
         
         .NB-story-comment-delete {
@@ -1029,6 +1046,8 @@ blockquote {
     }
     
     .NB-story-comments-public-header-wrapper {
+        clear: both;
+        margin-top: 6px;
         color: $light-text-color;
         font-size: $smallest-font-size;
         border-bottom: 1px solid $border-color;
diff --git a/media/js/newsblur/social_page/social_page_comment.js b/media/js/newsblur/social_page/social_page_comment.js
index 26fe26c77..36ffded75 100644
--- a/media/js/newsblur/social_page/social_page_comment.js
+++ b/media/js/newsblur/social_page/social_page_comment.js
@@ -44,6 +44,7 @@ NEWSBLUR.Views.SocialPageComment = Backbone.View.extend({
             this.$el.addClass('NB-hidden');
             $edit.removeClass('NB-hidden');
             $del.removeClass('NB-hidden');
+            $edit.show();
             $input.html(this.model.get('comments')).focus();
         }, this));
     },
diff --git a/media/js/newsblur/social_page/social_page_login_view.js b/media/js/newsblur/social_page/social_page_login_view.js
index 651f2be65..8904a671c 100644
--- a/media/js/newsblur/social_page/social_page_login_view.js
+++ b/media/js/newsblur/social_page/social_page_login_view.js
@@ -2,6 +2,7 @@ NEWSBLUR.Views.SocialPageLoginSignupView = Backbone.View.extend({
     
     events: {
         "click .NB-user-tab"        : "open_user_dropdown",
+        "tap .NB-user-tab"          : "open_user_dropdown",
         "click .NB-menu-logout"     : "logout",
         "click .NB-login-button"    : "login",
         "click .NB-signup-button"   : "signup",