UX: Fix topic progress placement

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

diff --git a/app/assets/javascripts/discourse/components/topic-progress.js.es6 b/app/assets/javascripts/discourse/components/topic-progress.js.es6
index f387de7..41c57d0 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");

GitHub sha: 5cf29973

2 Likes