Fixing tribute positioning issue, moving recent comments to top.

This commit is contained in:
Dessalines 2019-09-11 17:20:57 -07:00
parent d010da0e8d
commit 80e89a24b6
6 changed files with 77 additions and 605 deletions

2
ui/package.json vendored
View file

@ -36,7 +36,7 @@
"moment": "^2.24.0",
"rxjs": "^6.4.0",
"terser": "^3.17.0",
"tributejs": "^3.7.2",
"tributejs": "^3.7.3",
"twemoji": "^12.1.2",
"ws": "^7.0.0"
},

View file

@ -6,7 +6,7 @@ import { WebSocketService, UserService } from '../services';
import * as autosize from 'autosize';
import { i18n } from '../i18next';
import { T } from 'inferno-i18next';
import Tribute from 'tributejs/src/Tribute.js';
import * as Tribute from 'tributejs';
import * as emojiShortName from 'emoji-short-name';
interface CommentFormProps {
@ -60,7 +60,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
values: Object.entries(emojiShortName).map(e => {return {'key': e[1], 'val': e[0]}}),
allowSpaces: false,
autocompleteMode: true,
menuItemLimit: 10,
menuItemLimit: mentionDropdownFetchLimit,
},
// Users
{
@ -73,7 +73,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
},
allowSpaces: false,
autocompleteMode: true,
menuItemLimit: 10,
menuItemLimit: mentionDropdownFetchLimit,
},
// Communities
@ -87,7 +87,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
},
allowSpaces: false,
autocompleteMode: true,
menuItemLimit: 10,
menuItemLimit: mentionDropdownFetchLimit,
}
]
});
@ -123,7 +123,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
<div class="mb-3">
<form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
<div class="form-group row">
<div class="col-sm-12">
<div className={`col-sm-12`}>
<textarea id={this.id} className={`form-control ${this.state.previewMode && 'd-none'}`} value={this.state.commentForm.content} onInput={linkEvent(this, this.handleCommentContentChange)} required disabled={this.props.disabled} rows={2} maxLength={10000} />
{this.state.previewMode &&
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.commentForm.content)} />

View file

@ -140,8 +140,8 @@ export class Post extends Component<any, PostState> {
{this.commentsTree()}
</div>
<div class="col-12 col-sm-12 col-md-4">
{this.sidebar()}
{this.state.comments.length > 0 && this.newComments()}
{this.sidebar()}
</div>
</div>
}
@ -173,7 +173,7 @@ export class Post extends Component<any, PostState> {
newComments() {
return (
<div class="d-none d-md-block sticky-top new-comments card border-secondary">
<div class="d-none d-md-block new-comments mb-3 card border-secondary">
<div class="card-body small">
<h6><T i18nKey="recent_comments">#</T></h6>
{this.state.comments.map(comment =>

2
ui/src/css/main.css vendored
View file

@ -115,7 +115,7 @@ blockquote {
}
.new-comments {
max-height: 100vh;
max-height: 50vh;
overflow: hidden;
}

View file

@ -1,3 +1,7 @@
body {
position: relative;
}
.tribute-container {
position: absolute;
top: 0;

660
ui/yarn.lock vendored

File diff suppressed because it is too large Load diff