FIX: Adjusted the composer preview to avoid odd scroll issue

This commit is contained in:
Kris 2017-12-06 11:28:12 -05:00
parent 7c3a087ef5
commit f559275b14
4 changed files with 19 additions and 18 deletions

View File

@ -75,7 +75,7 @@ export default Ember.Component.extend({
_composerEditorInit() {
const topicId = this.get('topic.id');
const $input = this.$('.d-editor-input');
const $preview = this.$('.d-editor-preview');
const $preview = this.$('.d-editor-preview-wrapper');
$input.autocomplete({
template: findRawTemplate('user-selector-autocomplete'),
@ -180,7 +180,7 @@ export default Ember.Component.extend({
},
_teardownInputPreviewSync() {
[this.$('.d-editor-input'), this.$('.d-editor-preview')].forEach($element => {
[this.$('.d-editor-input'), this.$('.d-editor-preview-wrapper')].forEach($element => {
$element.off("mouseenter touchstart");
$element.off("scroll");
});

View File

@ -64,7 +64,6 @@
margin-left: 1%;
display: flex;
flex-direction: column;
background: $secondary;
}
.d-editor-button-bar {
@ -101,11 +100,15 @@
display: inline-block;
}
.d-editor-preview-wrapper {
overflow: auto;
cursor: default;
}
.d-editor-input,
.d-editor-preview {
box-sizing: border-box;
flex: 1 1 100%;
height: 100%;
width: 100%;
margin: 0;
min-height: auto;
@ -119,22 +122,21 @@
}
}
.d-editor-plugin {
display: flex;
overflow: auto;
}
.d-editor-input {
border: 0;
padding: 10px;
height: 100%;
overflow-x: hidden;
resize: none;
resize: none;
}
.d-editor-preview {
height: auto;
}
.d-editor-plugin {
display: flex;
overflow: auto;
cursor: default;
padding: 0 10px;
}
.composing-whisper .d-editor-preview {

View File

@ -17,21 +17,19 @@
}
.edit-title {
.d-editor-preview {
.d-editor-preview-wrapper {
margin-top: -43px;
}
&:not(.private-message) {
.d-editor-preview {
.d-editor-preview-wrapper {
@media screen and (max-width: 955px) {
margin-top: -79px;
}
}
}
.with-tags {
.d-editor-preview {
.d-editor-preview-wrapper {
margin-top: -79px;
@media screen and (max-width: 900px) {
margin-top: -116px;

View File

@ -89,9 +89,10 @@
background-color: $secondary;
max-width: 100%;
margin: 0;
padding: 10px;
overflow: auto;
.d-editor-preview {
margin-bottom: 40px;
overflow: auto;
}
}
.btn.hide-preview {