From 5cf299733a4803f340084fdb4a45987e6a074499 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 1 Oct 2019 13:14:36 -0400
Subject: [PATCH] UX: Fix topic progress placement

Keeps element 1em away from the right edge of screen

Takes DiscourseHub app nav position into account on iPad

Uses outerHeight to calculate element height including padding/borders
---
 .../discourse/components/topic-progress.js.es6        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/topic-progress.js.es6 b/app/assets/javascripts/discourse/components/topic-progress.js.es6
index f387de7bee9..41c57d073cc 100644
--- a/app/assets/javascripts/discourse/components/topic-progress.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-progress.js.es6
@@ -158,12 +158,17 @@ export default Ember.Component.extend({
     const offset = window.pageYOffset || $html.scrollTop();
     const progressHeight = this.site.mobileView
       ? 0
-      : $("#topic-progress").height();
+      : $("#topic-progress").outerHeight();
     const maximumOffset = $("#topic-bottom").offset().top + progressHeight;
     const windowHeight = $(window).height();
     const composerHeight = $("#reply-control").height() || 0;
     const isDocked = offset >= maximumOffset - windowHeight + composerHeight;
-    const bottom = $("body").height() - maximumOffset;
+    let bottom = $("body").height() - maximumOffset;
+
+    const $iPadFooterNav = $(".footer-nav-ipad .footer-nav");
+    if ($iPadFooterNav && $iPadFooterNav.length > 0) {
+      bottom += $iPadFooterNav.outerHeight();
+    }
     const wrapperDir = $html.hasClass("rtl") ? "left" : "right";
 
     if (composerHeight > 0) {
@@ -175,7 +180,7 @@ export default Ember.Component.extend({
     this.set("docked", isDocked);
 
     const $replyArea = $("#reply-control .reply-area");
-    if ($replyArea && $replyArea.length > 0) {
+    if ($replyArea && $replyArea.length > 0 && wrapperDir === "left") {
       $wrapper.css(wrapperDir, `${$replyArea.offset().left}px`);
     } else {
       $wrapper.css(wrapperDir, "1em");