github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-02 14:55:50 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Fix topic progress placement

Browse Source 
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
This commit is contained in:
Penar Musaraj 2019-10-01 13:14:36 -04:00
parent d407bcab36
commit 5cf299733a
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/discourse/components/topic-progress.js.es6
View File

@ -158,12 +158,17 @@ export default Ember.Component.extend({
const offset = window.pageYOffset || $html.scrollTop(); const offset = window.pageYOffset || $html.scrollTop();
const progressHeight = this.site.mobileView const progressHeight = this.site.mobileView
? 0 ? 0
: $("#topic-progress").height(); : $("#topic-progress").outerHeight();
const maximumOffset = $("#topic-bottom").offset().top + progressHeight; const maximumOffset = $("#topic-bottom").offset().top + progressHeight;
const windowHeight = $(window).height(); const windowHeight = $(window).height();
const composerHeight = $("#reply-control").height() || 0; const composerHeight = $("#reply-control").height() || 0;
const isDocked = offset >= maximumOffset - windowHeight + composerHeight; 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"; const wrapperDir = $html.hasClass("rtl") ? "left" : "right";
if (composerHeight > 0) { if (composerHeight > 0) {
@ -175,7 +180,7 @@ export default Ember.Component.extend({
this.set("docked", isDocked); this.set("docked", isDocked);
const $replyArea = $("#reply-control .reply-area"); 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`); $wrapper.css(wrapperDir, `${$replyArea.offset().left}px`);
} else { } else {
$wrapper.css(wrapperDir, "1em"); $wrapper.css(wrapperDir, "1em");