FIX: Small adjustments to topic progress position on desktop (#15447)

This commit is contained in:
Penar Musaraj 2022-01-04 18:28:26 -05:00 committed by GitHub
parent 1f1aa6a0d8
commit a717c307ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 8 deletions

View File

@ -5,6 +5,7 @@ import PanEvents, {
import Component from "@ember/component";
import EmberObject from "@ember/object";
import discourseDebounce from "discourse-common/lib/debounce";
import { headerOffset } from "discourse/components/site-header";
import { later, next } from "@ember/runloop";
import { observes } from "discourse-common/utils/decorators";
import showModal from "discourse/lib/show-modal";
@ -13,7 +14,10 @@ const MIN_WIDTH_TIMELINE = 924,
MIN_HEIGHT_TIMELINE = 325;
export default Component.extend(PanEvents, {
classNameBindings: ["info.topicProgressExpanded:topic-progress-expanded"],
classNameBindings: [
"info.topicProgressExpanded:topic-progress-expanded",
"info.renderTimeline:with-timeline:with-topic-progress",
],
composerOpen: null,
info: null,
isPanning: false,
@ -47,15 +51,12 @@ export default Component.extend(PanEvents, {
let renderTimeline = !this.site.mobileView;
if (renderTimeline) {
const width = window.innerWidth,
composer = document.getElementById("reply-control"),
headerContainer = document.querySelector(".d-header"),
headerHeight = (headerContainer && headerContainer.offsetHeight) || 0;
const composer = document.getElementById("reply-control");
if (composer) {
renderTimeline =
width > MIN_WIDTH_TIMELINE &&
window.innerHeight - composer.offsetHeight - headerHeight >
window.innerWidth > MIN_WIDTH_TIMELINE &&
window.innerHeight - composer.offsetHeight - headerOffset() >
MIN_HEIGHT_TIMELINE;
}
}

View File

@ -52,6 +52,10 @@ $topic-progress-height: 42px;
margin-left: 1em;
z-index: z("timeline");
&.with-topic-progress {
align-self: end;
}
&.topic-progress-expanded {
z-index: z("fullscreen");
}
@ -153,7 +157,7 @@ $topic-progress-height: 42px;
&:not(.docked) {
@media screen and (min-width: $reply-area-max-width) {
// position to right side of composer
right: 50%;
right: calc(50% + 10px);
margin-right: calc(#{$reply-area-max-width} / 2 * -1);
}
}