From 8e9d0ceb67021d0d534a833f80f9400092b38fa8 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 9 Apr 2019 13:15:31 -0400
Subject: [PATCH] UX: Mobile - fix editor button space, divider, extra upload
 icon

---
 .../javascripts/discourse/components/composer-editor.js.es6 | 6 +++++-
 app/assets/stylesheets/common/admin/customize.scss          | 2 +-
 app/assets/stylesheets/common/base/menu-panel.scss          | 2 +-
 app/assets/stylesheets/common/d-editor.scss                 | 5 ++---
 app/assets/stylesheets/common/foundation/mixins.scss        | 1 +
 app/assets/stylesheets/mobile/compose.scss                  | 5 +++--
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index e477d520e2b..f28654a3fe2 100644
--- a/app/assets/javascripts/discourse/components/composer-editor.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-editor.js.es6
@@ -963,7 +963,11 @@ export default Ember.Component.extend({
         unshift: true
       });
 
-      if (this.get("allowUpload") && this.get("uploadIcon")) {
+      if (
+        this.get("allowUpload") &&
+        this.get("uploadIcon") &&
+        !this.site.mobileView
+      ) {
         toolbar.addButton({
           id: "upload",
           group: "insertions",
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index a5f6b9923a8..f93e7085046 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -699,7 +699,7 @@
     }
   }
 
-  @media screen and (max-width: 350px) {
+  @include breakpoint(mobile-medium) {
     table.grid tr {
       grid-template-columns: repeat(2, 1fr);
       td.controls {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 6f7e148e118..3c49e597ed1 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -285,7 +285,7 @@ div.menu-links-header {
     overflow: hidden;
     text-overflow: ellipsis;
     margin: -0.5em 0;
-    @media screen and (max-width: 350px) {
+    @include breakpoint(mobile-medium) {
       max-width: 125px;
     }
   }
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 86e16bbb2f5..9c8216ce554 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -106,11 +106,10 @@
 }
 
 .d-editor-spacer {
-  width: 1px;
-  height: 20px;
+  height: 16px;
   margin: 0 5px;
-  background-color: $primary-low;
   display: inline-block;
+  border-left: 1px solid $primary-low-mid;
 }
 
 .d-editor-preview-wrapper {
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index a4fa84fcd68..cdee8c5ba86 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -7,6 +7,7 @@
 
 $breakpoints: (
   mobile-small: 320px,
+  mobile-medium: 350px,
   mobile: 550px,
   tablet: 768px,
   medium: 850px,
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index e8e75501f94..1fd0eb8052a 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -134,8 +134,9 @@
         0
       ); // Hack: Reduces composer icon jitter while scrolling in Safari on iOS12
     }
-    @media all and (max-width: 350px) {
-      padding: 2px 4px;
+    @include breakpoint(mobile-medium) {
+      padding: 4px;
+      font-size: 0.96em;
     }
     &.preview {
       margin: 0;