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

DEV: Small refactor of topic progress wrapper positioning (#10646) 

This moves the logic for horizontally placing the topic progress wrapper from the JS component to SCSS. Doing so means it is more easily overridable by themes and plugins.

This also changes the left/right spacing from 1em to 2em for non-mobile screens (it fits better on iPad portrait especially).
This commit is contained in:
Penar Musaraj 2020-09-10 13:29:14 -04:00 committed by GitHub
parent ddab7cc239
commit 94ed54a616
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,7 +162,7 @@ export default Component.extend({
if ($iPadFooterNav && $iPadFooterNav.length > 0) { if ($iPadFooterNav && $iPadFooterNav.length > 0) {
bottom += $iPadFooterNav.outerHeight(); bottom += $iPadFooterNav.outerHeight();
} }
const wrapperDir = $html.hasClass("rtl") ? "left" : "right";
const draftComposerHeight = 40; const draftComposerHeight = 40;
if (composerHeight > 0) { if (composerHeight > 0) {
@ -179,13 +179,6 @@ export default Component.extend({
this.set("docked", isDocked); this.set("docked", isDocked);
const $replyArea = $("#reply-control .reply-area");
if ($replyArea && $replyArea.length > 0) {
$wrapper.css(wrapperDir, `${$replyArea.offset().left}px`);
} else {
$wrapper.css(wrapperDir, "1em");
}
$wrapper.css( $wrapper.css(
"margin-bottom", "margin-bottom",
!isDocked && composerHeight > draftComposerHeight ? "0px" : "" !isDocked && composerHeight > draftComposerHeight ? "0px" : ""

2
app/assets/stylesheets/common/base/compose.scss
View File

@ -8,7 +8,7 @@
left: 0; left: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 1475px; max-width: $reply-area-max-width;
width: 100%; width: 100%;
&.hide-preview { &.hide-preview {
max-width: 740px; max-width: 740px;

1
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -13,6 +13,7 @@ $input-padding: 4px 10px;
$topic-body-width: 690px; $topic-body-width: 690px;
$topic-body-width-padding: 11px; $topic-body-width-padding: 11px;
$topic-avatar-width: 45px; $topic-avatar-width: 45px;
$reply-area-max-width: 1475px !default;
// Brand color variables // Brand color variables
// -------------------------------------------------- // --------------------------------------------------

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

@ -77,13 +77,23 @@
#topic-progress-wrapper { #topic-progress-wrapper {
position: fixed; position: fixed;
right: 1em; right: 2em;
bottom: 0; bottom: 0;
left: 0;
margin: 0 auto;
max-width: $reply-area-max-width;
display: flex;
justify-content: flex-end;
z-index: z("timeline"); z-index: z("timeline");
&.docked { &.docked {
position: absolute; position: absolute;
bottom: -70px; bottom: -70px;
} }
html.rtl & {
justify-content: flex-start;
right: 0;
left: 2em;
}
} }
#topic-progress-expanded { #topic-progress-expanded {
@ -194,14 +204,6 @@
left: 0; left: 0;
} }
#topic-progress-wrapper {
right: 19vw;
}
#topic-progress-wrapper.docked {
right: 19vw;
}
#topic-footer-main-buttons { #topic-footer-main-buttons {
max-width: 70%; max-width: 70%;
} }

6
app/assets/stylesheets/mobile/topic.scss
View File

@ -43,12 +43,16 @@
#topic-progress-wrapper { #topic-progress-wrapper {
position: fixed; position: fixed;
right: 0; right: 1em;
bottom: 0; bottom: 0;
z-index: z("timeline"); z-index: z("timeline");
&:not(.docked) { &:not(.docked) {
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);
} }
html.rtl & {
right: 0;
left: 1em;
}
} }
#topic-progress-expanded { #topic-progress-expanded {