Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Don't let topic progress widget dangle when preview is disabled

This commit is contained in:
Robin Ward 2018-03-08 16:34:19 -05:00
parent 4ad3a258d1
commit 6385c7fcb3
3 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,20 +116,29 @@ export default Ember.Component.extend({
},
_dock() {
const maximumOffset = $('#topic-bottom').offset(),
composerHeight = $('#reply-control').height() || 0,
$topicProgressWrapper = this.$(),
offset = window.pageYOffset || $('html').scrollTop();
let maximumOffset = $('#topic-bottom').offset();
let composerHeight = $('#reply-control').height() || 0;
let $topicProgressWrapper = this.$();
let offset = window.pageYOffset || $('html').scrollTop();
if (!$topicProgressWrapper || $topicProgressWrapper.length === 0) {
return;
}
// Right position
let $replyArea = $('#reply-control .reply-area');
if ($replyArea && $replyArea.length) {
let rightPos = $replyArea.offset().left;
$topicProgressWrapper.css('right', `${rightPos}px`);
} else {
$topicProgressWrapper.css('right', `1em`);
}
let isDocked = false;
if (maximumOffset) {
const threshold = maximumOffset.top;
const windowHeight = $(window).height();
const headerHeight = $('header').outerHeight(true);
let threshold = maximumOffset.top;
let windowHeight = $(window).height();
let headerHeight = $('header').outerHeight(true);
if (this.capabilities.isIOS) {
isDocked = offset >= (threshold - windowHeight - headerHeight + composerHeight);
@ -138,12 +147,12 @@ export default Ember.Component.extend({
}
}
const dockPos = $(document).height() - $('#topic-bottom').offset().top;
let dockPos = $(document).height() - $('#topic-bottom').offset().top;
if (composerHeight > 0) {
if (isDocked) {
$topicProgressWrapper.css('bottom', dockPos);
} else {
const height = composerHeight + "px";
let height = composerHeight + "px";
if ($topicProgressWrapper.css('bottom') !== height) {
$topicProgressWrapper.css('bottom', height);
}

2
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -34,7 +34,7 @@
transition: max-height 0.4s ease-out;
@media screen and (max-height: 425px) {
max-height: 75vh;
}
}
.topic-timeline {
.timeline-footer-controls {
display: inherit;

3
app/assets/stylesheets/desktop/topic.scss
View File

@ -76,8 +76,7 @@
#topic-progress-wrapper {
position: fixed;
right: 50%;
width: 0;
right: 1em;
bottom: 0;
z-index: z("timeline");
&.docked {