Fixing tribute positioning issue, moving recent comments to top.

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

2
ui/package.json vendored
View file

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

View file

@ -6,7 +6,7 @@ import { WebSocketService, UserService } from '../services';
import * as autosize from 'autosize'; import * as autosize from 'autosize';
import { i18n } from '../i18next'; import { i18n } from '../i18next';
import { T } from 'inferno-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'; import * as emojiShortName from 'emoji-short-name';
interface CommentFormProps { 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]}}), values: Object.entries(emojiShortName).map(e => {return {'key': e[1], 'val': e[0]}}),
allowSpaces: false, allowSpaces: false,
autocompleteMode: true, autocompleteMode: true,
menuItemLimit: 10, menuItemLimit: mentionDropdownFetchLimit,
}, },
// Users // Users
{ {
@ -73,7 +73,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
}, },
allowSpaces: false, allowSpaces: false,
autocompleteMode: true, autocompleteMode: true,
menuItemLimit: 10, menuItemLimit: mentionDropdownFetchLimit,
}, },
// Communities // Communities
@ -87,7 +87,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
}, },
allowSpaces: false, allowSpaces: false,
autocompleteMode: true, autocompleteMode: true,
menuItemLimit: 10, menuItemLimit: mentionDropdownFetchLimit,
} }
] ]
}); });
@ -123,7 +123,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
<div class="mb-3"> <div class="mb-3">
<form onSubmit={linkEvent(this, this.handleCommentSubmit)}> <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
<div class="form-group row"> <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} /> <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 && {this.state.previewMode &&
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.commentForm.content)} /> <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()} {this.commentsTree()}
</div> </div>
<div class="col-12 col-sm-12 col-md-4"> <div class="col-12 col-sm-12 col-md-4">
{this.sidebar()}
{this.state.comments.length > 0 && this.newComments()} {this.state.comments.length > 0 && this.newComments()}
{this.sidebar()}
</div> </div>
</div> </div>
} }
@ -173,7 +173,7 @@ export class Post extends Component<any, PostState> {
newComments() { newComments() {
return ( 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"> <div class="card-body small">
<h6><T i18nKey="recent_comments">#</T></h6> <h6><T i18nKey="recent_comments">#</T></h6>
{this.state.comments.map(comment => {this.state.comments.map(comment =>

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

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

View file

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

660
ui/yarn.lock vendored

File diff suppressed because it is too large Load diff