github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-15 13:57:25 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: ensure the topic progress indicator is never overlapping with post controls

Browse Source
This commit is contained in:
Régis Hanol 2018-04-09 19:44:35 +02:00
parent 6e8bf1271f
commit d19bbfc7f8
1 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,43 +116,43 @@ export default Ember.Component.extend({
}, },
_dock() { _dock() {
let maximumOffset = $('#topic-bottom').offset(); const $topicProgressWrapper = this.$();
let composerHeight = $('#reply-control').height() || 0; if (!$topicProgressWrapper || $topicProgressWrapper.length === 0) return;
let $topicProgressWrapper = this.$();
let offset = window.pageYOffset || $('html').scrollTop();
if (!$topicProgressWrapper || $topicProgressWrapper.length === 0) { // on desktop, we want the topic-progress after the last post
return; // on mobile, we want it right before the end of the last post
} const progressHeight = this.site.mobileView ? 0 : $("#topic-progress").outerHeight();
// Right position const maximumOffset = $('#topic-bottom').offset();
let $replyArea = $('#reply-control .reply-area'); const composerHeight = $('#reply-control').height() || 0;
const offset = window.pageYOffset || $('html').scrollTop();
const $replyArea = $('#reply-control .reply-area');
if ($replyArea && $replyArea.length) { if ($replyArea && $replyArea.length) {
let rightPos = $replyArea.offset().left; $topicProgressWrapper.css('right', `${$replyArea.offset().left}px`);
$topicProgressWrapper.css('right', `${rightPos}px`);
} else { } else {
$topicProgressWrapper.css('right', `1em`); $topicProgressWrapper.css('right', `1em`);
} }
let isDocked = false; let isDocked = false;
if (maximumOffset) { if (maximumOffset) {
let threshold = maximumOffset.top; const threshold = maximumOffset.top + progressHeight;
let windowHeight = $(window).height(); const windowHeight = $(window).height();
let headerHeight = $('header').outerHeight(true);
if (this.capabilities.isIOS) { if (this.capabilities.isIOS) {
const headerHeight = $('header').outerHeight(true);
isDocked = offset >= (threshold - windowHeight - headerHeight + composerHeight); isDocked = offset >= (threshold - windowHeight - headerHeight + composerHeight);
} else { } else {
isDocked = offset >= (threshold - windowHeight + composerHeight); isDocked = offset >= (threshold - windowHeight + composerHeight);
} }
} }
let dockPos = $(document).height() - $('#topic-bottom').offset().top; const dockPos = $(document).height() - maximumOffset.top - progressHeight;
if (composerHeight > 0) { if (composerHeight > 0) {
if (isDocked) { if (isDocked) {
$topicProgressWrapper.css('bottom', dockPos); $topicProgressWrapper.css('bottom', dockPos);
} else { } else {
let height = composerHeight + "px"; const height = composerHeight + "px";
if ($topicProgressWrapper.css('bottom') !== height) { if ($topicProgressWrapper.css('bottom') !== height) {
$topicProgressWrapper.css('bottom', height); $topicProgressWrapper.css('bottom', height);
} }