From 96ed5e0e5464a8e33bf10726c49f6f58d2be5364 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Mon, 26 May 2014 10:53:05 -0400
Subject: [PATCH] FIX: layout problems in composer on mobile

---
 .../templates/composer.js.handlebars          | 22 ++++++++++---------
 .../stylesheets/common/base/mobile.scss       |  3 ---
 app/assets/stylesheets/mobile/compose.scss    | 18 ++++++++-------
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/composer.js.handlebars b/app/assets/javascripts/discourse/templates/composer.js.handlebars
index 7570252f5cc..ba494254238 100644
--- a/app/assets/javascripts/discourse/templates/composer.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/composer.js.handlebars
@@ -64,17 +64,19 @@
             <div id='wmd-preview' {{bind-attr class="hidePreview:hidden"}}></div>
           </div>
           {{#if currentUser}}
-            <a href="#" {{action togglePreview}} class='toggle-preview'>{{{model.toggleText}}}</a>
-            <div id='draft-status'></div>
-            {{#if view.isUploading}}
-              <div id="file-uploading">
-                {{i18n upload_selector.uploading}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n cancel}}</a>
-              </div>
-            {{else}}
-              {{#if Discourse.Mobile.mobileView}}
-                <a {{action showUploadSelector view}} class='mobile-file-upload'>{{i18n upload}}</a>
+            <div class="composer-bottom-right">
+              <a href="#" {{action togglePreview}} class='toggle-preview'>{{{model.toggleText}}}</a>
+              {{#if view.isUploading}}
+                <div id="file-uploading">
+                  {{i18n upload_selector.uploading}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n cancel}}</a>
+                </div>
+              {{else}}
+                {{#if Discourse.Mobile.mobileView}}
+                  <a {{action showUploadSelector view}} class='mobile-file-upload'>{{i18n upload}}</a>
+                {{/if}}
               {{/if}}
-            {{/if}}
+              <div id='draft-status'></div>
+            </div>
           {{/if}}
         </div>
 
diff --git a/app/assets/stylesheets/common/base/mobile.scss b/app/assets/stylesheets/common/base/mobile.scss
index eab0f0e33ad..a870c8d9b6d 100644
--- a/app/assets/stylesheets/common/base/mobile.scss
+++ b/app/assets/stylesheets/common/base/mobile.scss
@@ -15,9 +15,6 @@ and (max-device-width : 540px) {
       .textarea-wrapper {
         width: 100%;
       }
-      .wmd-button-bar {
-        display: none;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index a27413a7835..85fb6ccec78 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -16,13 +16,20 @@ display: none;
 
 
 #reply-control {
-  .toggle-preview, #draft-status, #file-uploading, .mobile-file-upload {
+  .composer-bottom-right {
     position: absolute;
     bottom: -37px;
+    right: 5px;
     margin-top: 0;
   }
   .toggle-preview, .mobile-file-upload {
-    right: 5px;
+    text-decoration: underline;
+  }
+  .toggle-preview, #draft-status, #file-uploading, .mobile-file-upload {
+    float: right;
+    margin-right: 8px;
+  }
+  .toggle-preview, .mobile-file-upload {
     text-decoration: underline;
   }
   #file-uploading {
@@ -31,7 +38,6 @@ display: none;
     color: scale-color($secondary, $lightness: 50%);
   }
   #draft-status {
-    right: 70px;
     color: scale-color($primary, $lightness: 75%);
     &.flash {
       color: $danger;
@@ -354,10 +360,6 @@ display: none;
     }
   }
   #wmd-button-bar {
-    top: 0;
-    position: absolute;
-    border-bottom: 1px solid scale-color-diff();
-    background-color: $secondary;
-    z-index: 100;
+    display: none;
   }
 }