FIX: Adjusted the composer preview to avoid odd scroll issue

discourse · Dec 6, 2017 · f559275 · f559275 · discoursebot · Dec 6, 2017
1 parent 7c3a087
commit f559275
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
@@ -75,7 +75,7 @@ export default Ember.Component.extend({
   _composerEditorInit() {
     const topicId = this.get('topic.id');
     const $input = this.$('.d-editor-input');
-    const $preview = this.$('.d-editor-preview');
+    const $preview = this.$('.d-editor-preview-wrapper');
 
     $input.autocomplete({
       template: findRawTemplate('user-selector-autocomplete'),
@@ -180,7 +180,7 @@ export default Ember.Component.extend({
   },
 
   _teardownInputPreviewSync() {
-    [this.$('.d-editor-input'), this.$('.d-editor-preview')].forEach($element => {
+    [this.$('.d-editor-input'), this.$('.d-editor-preview-wrapper')].forEach($element => {
       $element.off("mouseenter touchstart");
       $element.off("scroll");
     });

diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
@@ -64,7 +64,6 @@
   margin-left: 1%;
   display: flex;
   flex-direction: column;
-  background: $secondary;
 }
 
 .d-editor-button-bar {
@@ -101,11 +100,15 @@
   display: inline-block;
 }
 
+.d-editor-preview-wrapper {
+  overflow: auto;
+  cursor: default;
+}
+
 .d-editor-input,
 .d-editor-preview {
   box-sizing: border-box;
   flex: 1 1 100%;  
-  height: 100%;
   width: 100%;  
   margin: 0;
   min-height: auto;
@@ -119,22 +122,21 @@
   }
 }
 
-.d-editor-plugin {
-  display: flex;
-  overflow: auto;
-}
-
 .d-editor-input {
   border: 0;
   padding: 10px;
+  height: 100%;
   overflow-x: hidden;
-  resize: none;  
+  resize: none; 
 }
 
 .d-editor-preview {
+  height: auto;
+}
+
+.d-editor-plugin {
+  display: flex;
   overflow: auto;
-  cursor: default;
-  padding: 0 10px;
 }
 
 .composing-whisper .d-editor-preview {

diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
@@ -17,21 +17,19 @@
 }
 
 .edit-title {
-  .d-editor-preview {
+  .d-editor-preview-wrapper {
     margin-top: -43px;
   }
   &:not(.private-message) {
-    .d-editor-preview {
+    .d-editor-preview-wrapper {
       @media screen and (max-width: 955px) {
         margin-top: -79px;
       }
     }
   }
 
-
-
   .with-tags {
-    .d-editor-preview {
+    .d-editor-preview-wrapper {
       margin-top: -79px;
       @media screen and (max-width: 900px) {
         margin-top: -116px;

diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
@@ -89,9 +89,10 @@
         background-color: $secondary;
         max-width: 100%;
         margin: 0;
+        padding: 10px;
+        overflow: auto;        
         .d-editor-preview {
           margin-bottom: 40px;
-          overflow: auto;
         }
       }
       .btn.hide-preview {