diff options
-rw-r--r-- | ui/assets/css/main.css | 2 | ||||
-rw-r--r-- | ui/src/components/comment-node.tsx | 90 | ||||
-rw-r--r-- | ui/src/components/post.tsx | 2 | ||||
-rw-r--r-- | ui/src/utils.ts | 15 |
4 files changed, 58 insertions, 51 deletions
diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index 53237793..b458a9d2 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -117,7 +117,7 @@ } blockquote { - border-left: 1px solid var(--secondary); + border-left: 2px solid var(--secondary); margin: 0.5em 5px; padding: 0.1em 5px; } diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index db3c589d..524367bc 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -125,7 +125,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { }`} > {!node.comment.parent_id && !this.props.noIndent && ( - <hr class="d-sm-none my-2" /> + <> + <hr class="d-sm-none my-2" /> + <div class="d-none d-sm-block d-sm-none my-3" /> + </> )} <div id={`comment-${node.comment.id}`} @@ -135,7 +138,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { style={ !this.props.noIndent && this.props.node.comment.parent_id && - `border-left: 1px ${this.state.borderColor} solid !important` + `border-left: 2px ${this.state.borderColor} solid !important` } > <div @@ -182,34 +185,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { {i18n.t('banned')} </li> )} - <li className="list-inline-item">•</li> - <span - class="unselectable pointer mr-2" - data-tippy-content={i18n.t('number_of_points', { - count: this.state.score, - })} - > - <li className="list-inline-item"> - <span className={this.scoreColor}> - <svg className="small icon icon-inline mr-1"> - <use xlinkHref="#icon-zap"></use> - </svg> - {this.state.score} - </span> - </li> - <li className="list-inline-item"> - <svg class="small icon icon-inline mr-1"> - <use xlinkHref="#icon-arrow-up"></use> - </svg> - {this.state.upvotes} - </li> - <li className="list-inline-item"> - <svg class="small icon icon-inline mr-1"> - <use xlinkHref="#icon-arrow-down"></use> - </svg> - {this.state.downvotes} - </li> - </span> {this.props.showCommunity && ( <li className="list-inline-item"> <span> {i18n.t('to')} </span> @@ -220,6 +195,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { )} <li className="list-inline-item">•</li> <li className="list-inline-item"> + <span + className={`unselectable pointer ${this.scoreColor}`} + onClick={linkEvent(node, this.handleCommentUpvote)} + data-tippy-content={i18n.t('number_of_points', { + count: this.state.score, + })} + > + <svg class="icon icon-inline mr-1"> + <use xlinkHref="#icon-zap"></use> + </svg> + {this.state.score} + </span> + </li> + <li className="list-inline-item">•</li> + <li className="list-inline-item"> <span> <MomentTime data={node.comment} /> </span> @@ -230,11 +220,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { onClick={linkEvent(this, this.handleCommentCollapse)} > {this.state.collapsed ? ( - <svg class="icon"> + <svg class="icon icon-inline"> <use xlinkHref="#icon-plus-square"></use> </svg> ) : ( - <svg class="icon"> + <svg class="icon icon-inline"> <use xlinkHref="#icon-minus-square"></use> </svg> )} @@ -292,9 +282,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { onClick={linkEvent(node, this.handleCommentUpvote)} data-tippy-content={i18n.t('upvote')} > - <svg class="icon"> + <svg class="icon icon-inline"> <use xlinkHref="#icon-arrow-up"></use> </svg> + {this.state.upvotes !== this.state.score && ( + <span class="ml-1">{this.state.upvotes}</span> + )} </button> </li> {WebSocketService.Instance.site.enable_downvotes && ( @@ -311,9 +304,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { )} data-tippy-content={i18n.t('downvote')} > - <svg class="icon"> + <svg class="icon icon-inline"> <use xlinkHref="#icon-arrow-down"></use> </svg> + {this.state.upvotes !== this.state.score && ( + <span class="ml-1">{this.state.downvotes}</span> + )} </button> </li> )} @@ -328,19 +324,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { </svg> </span> </li> - {!this.myComment && ( - <li className="list-inline-item-action"> - <Link - class="text-muted" - to={`/create_private_message?recipient_id=${node.comment.creator_id}`} - title={i18n.t('message').toLowerCase()} - > - <svg class="icon"> - <use xlinkHref="#icon-mail"></use> - </svg> - </Link> - </li> - )} <li className="list-inline-item-action"> <Link className="text-muted" @@ -366,6 +349,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { </li> ) : ( <> + {!this.myComment && ( + <li className="list-inline-item-action"> + <Link + class="text-muted" + to={`/create_private_message?recipient_id=${node.comment.creator_id}`} + title={i18n.t('message').toLowerCase()} + > + <svg class="icon"> + <use xlinkHref="#icon-mail"></use> + </svg> + </Link> + </li> + )} <li className="list-inline-item-action"> <span class="pointer" diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index e6b4a206..ed1ba302 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -211,7 +211,7 @@ export class Post extends Component<any, PostState> { sortRadios() { return ( - <div class="btn-group btn-group-toggle mb-3"> + <div class="btn-group btn-group-toggle"> <label className={`btn btn-sm btn-secondary pointer ${this.state .commentSort === CommentSortType.Hot && 'active'}`} diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 058be6ae..8e456cc5 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -768,8 +768,19 @@ export function postSort( } } -export const colorList: Array<string> = [...Array(10)].map(() => randomHsl()); +export const colorList: Array<string> = [ + hsl(0), + hsl(100), + hsl(150), + hsl(200), + hsl(250), + hsl(300), +]; + +function hsl(num: number) { + return `hsla(${num}, 35%, 50%, 1)`; +} -export function randomHsl() { +function randomHsl() { return `hsla(${Math.random() * 360}, 100%, 50%, 1)`; } |