FIX: refactor padding when exiting composer

FIX: refactor padding when exiting composer

Previously, when exiting composer, the #main-outlet element padding was set to zero. This inline style would override any CSS set for that element, causing issues with the mobile footer nav.

The fix removes the inline padding style instead of setting it to zero. It also uses integers for the set values, and removes a duplicate style.

diff --git a/app/assets/javascripts/discourse/components/composer-body.js.es6 b/app/assets/javascripts/discourse/components/composer-body.js.es6
index c536565..683c3a7 100644
--- a/app/assets/javascripts/discourse/components/composer-body.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-body.js.es6
@@ -45,8 +45,8 @@ export default Ember.Component.extend(KeyEnterEscape, {
     return composeState || Composer.CLOSED;
   },
 
-  movePanels(sizePx) {
-    $("#main-outlet").css("padding-bottom", sizePx);
+  movePanels(size) {
+    $("#main-outlet").css("padding-bottom", size ? size : "");
 
     // signal the progress bar it should move!
     this.appEvents.trigger("composer:resized");
@@ -64,7 +64,7 @@ export default Ember.Component.extend(KeyEnterEscape, {
       }
 
       const h = $("#reply-control").height() || 0;
-      this.movePanels(h + "px");
+      this.movePanels(h);
     });
   },
 
@@ -111,9 +111,8 @@ export default Ember.Component.extend(KeyEnterEscape, {
       const winHeight = Ember.$(window).height();
       size = Math.min(size, winHeight - headerHeight());
       size = Math.max(size, MIN_COMPOSER_SIZE);
-      const sizePx = `${size}px`;
-      this.movePanels(sizePx);
-      $composer.height(sizePx);
+      this.movePanels(size);
+      $composer.height(size);
     };
 
     const throttledPerformDrag = (event => {
diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index f28654a..912852b 100644
--- a/app/assets/javascripts/discourse/components/composer-editor.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-editor.js.es6
@@ -912,7 +912,6 @@ export default Ember.Component.extend({
   _composerClosed() {
     this.appEvents.trigger("composer:will-close");
     Ember.run.next(() => {
-      $("#main-outlet").css("padding-bottom", 0);
       // need to wait a bit for the "slide down" transition of the composer
       Ember.run.later(
         () => this.appEvents.trigger("composer:closed"),

GitHub sha: 1a8c6577

1 Like