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

FIX: rtl topic progress wrapper position (#7070) 

* Set left/right topic-progress-wrapper CSS from text-direction

* Remove unnecessary CSS rule
This commit is contained in:
Simon Cossar 2019-02-25 17:56:52 -08:00 committed by Kris
parent d6875a77fb
commit c742d42031
2 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -155,14 +155,16 @@ export default Ember.Component.extend({
const $wrapper = this.$(); const $wrapper = this.$();
if (!$wrapper || $wrapper.length === 0) return; if (!$wrapper || $wrapper.length === 0) return;
const offset = window.pageYOffset || $("html").scrollTop(), const $html = $("html"),
offset = window.pageYOffset || $html.scrollTop(),
progressHeight = this.site.mobileView ? 0 : $("#topic-progress").height(), progressHeight = this.site.mobileView ? 0 : $("#topic-progress").height(),
maximumOffset = $("#topic-bottom").offset().top + progressHeight, maximumOffset = $("#topic-bottom").offset().top + progressHeight,
windowHeight = $(window).height(), windowHeight = $(window).height(),
bodyHeight = $("body").height(), bodyHeight = $("body").height(),
composerHeight = $("#reply-control").height() || 0, composerHeight = $("#reply-control").height() || 0,
isDocked = offset >= maximumOffset - windowHeight + composerHeight, isDocked = offset >= maximumOffset - windowHeight + composerHeight,
bottom = bodyHeight - maximumOffset; bottom = bodyHeight - maximumOffset,
wrapperDir = $html.hasClass("rtl") ? "left" : "right";
if (composerHeight > 0) { if (composerHeight > 0) {
$wrapper.css("bottom", isDocked ? bottom : composerHeight); $wrapper.css("bottom", isDocked ? bottom : composerHeight);
@ -174,9 +176,9 @@ export default Ember.Component.extend({
const $replyArea = $("#reply-control .reply-area"); const $replyArea = $("#reply-control .reply-area");
if ($replyArea && $replyArea.length > 0) { if ($replyArea && $replyArea.length > 0) {
$wrapper.css("right", `${$replyArea.offset().left}px`); $wrapper.css(wrapperDir, `${$replyArea.offset().left}px`);
} else { } else {
$wrapper.css("right", "1em"); $wrapper.css(wrapperDir, "1em");
} }
// switch mobile scroll logo at the very bottom of topics // switch mobile scroll logo at the very bottom of topics

5
app/assets/stylesheets/common/base/rtl.scss
View File

@ -2,11 +2,6 @@
// *** These styles are all going to be flipped by the r2 gem *** // *** These styles are all going to be flipped by the r2 gem ***
// Adding the !important declaration to a rule prevents it from being flipped. // Adding the !important declaration to a rule prevents it from being flipped.
.rtl #topic-progress-wrapper .topic-admin-popup-menu.right-side,
.rtl #topic-progress-wrapper.docked .topic-admin-popup-menu.right-side {
right: 80px;
}
// This is used to flip the .d-icon-caret-right // This is used to flip the .d-icon-caret-right
@mixin rotate($degrees) { @mixin rotate($degrees) {
-webkit-transform: rotate(#{$degrees}deg); -webkit-transform: rotate(#{$degrees}deg);