UX: Minor composer button alignment adjustments, simplification

UX: Minor composer button alignment adjustments, simplification

diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 99e7238..4ae081b 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -176,7 +176,6 @@
               </div>
             </div>
 
-            <div class="composer-bottom-right">
               {{#if site.mobileView}}
                 {{#if allowUpload}}
                   <a class="btn btn-default no-text mobile-file-upload {{if isUploading 'hidden'}}">
@@ -195,7 +194,6 @@
                 <a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
               {{/if}}
 
-            </div>
           </div>
         </div>
 
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 283bb99..4c564bc 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -280,6 +280,7 @@
     flex-basis: 50%;
     display: flex;
     align-items: center;
+    margin-right: auto;
     button {
       flex: 0 0 auto;
     }
@@ -314,15 +315,6 @@
     }
   }
 
-  .composer-bottom-right {
-    flex-basis: 50%;
-    display: flex;
-    flex-direction: row-reverse;
-    .toggle-preview {
-      order: 2;
-    }
-  }
-
   #draft-status,
   #file-uploading {
     color: $primary-high;
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index e91f93c..0594ca8 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -202,12 +202,10 @@
   width: calc(50% - 65px);
 }
 
-.composer-bottom-right {
-  a {
-    color: $primary-high;
-    &:hover {
-      color: $tertiary;
-    }
+a.toggle-preview {
+  color: $primary-high;
+  &:hover {
+    color: $tertiary;
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 2138c44..e73ac05 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -71,22 +71,21 @@
       flex: 1 1 auto;
       #draft-status,
       #file-uploading {
-        margin-left: 15px;
+        margin-left: 6px;
       }
       .cancel {
-        font-size: 1.6em;
+        font-size: 1.4em;
         color: $primary-low-mid;
         margin-left: 0.6em;
-        padding: 0 5px;
+        padding: 3px 6px;
       }
     }
-    .composer-bottom-right {
-      margin-left: auto;
-      flex: 1 1 auto;
+    .mobile-file-upload:not(.hidden),
+    .mobile-preview {
+      // Alignment fix, remove if converted to buttons
+      display: inline-flex;
     }
-
     .mobile-file-upload {
-      order: 2;
       &.hidden + .mobile-preview {
         // Hide preview button while file is uploading to make room for upload progress
         display: none;

GitHub sha: b24938b5

1 Like