UX: Mobile - fix editor button space, divider, extra upload icon

UX: Mobile - fix editor button space, divider, extra upload icon

diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index e477d52..f28654a 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 a5f6b99..f93e708 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 6f7e148..3c49e59 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 86e16bb..9c8216c 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 a4fa84f..cdee8c5 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 e8e7550..1fd0eb8 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;

GitHub sha: 8e9d0ceb

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there: