diff options
author | Dessalines <tyhou13@gmx.com> | 2020-07-09 10:44:05 -0400 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-07-09 10:44:05 -0400 |
commit | 20f9bde88f52ce875be4d0dc4bd5dd346dfe6b84 (patch) | |
tree | 91365f6eab521f6a1a3ed35aceb01c758cc30e81 | |
parent | 558644b8b364697159c5832908b8497a44d6179d (diff) |
Making comment collapse and lightning buttons not spans. Fixes #884
-rw-r--r-- | ui/src/components/comment-node.tsx | 14 |
1 files changed, 8 insertions, 6 deletions
diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 839a01dc..49b56629 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -189,8 +189,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { </Link> </> )} - <div - className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" + <button + class="btn btn-sm text-muted" onClick={linkEvent(this, this.handleCommentCollapse)} > {this.state.collapsed ? ( @@ -202,9 +202,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { <use xlinkHref="#icon-minus-square"></use> </svg> )} - </div> - <span - className={`unselectable pointer ${this.scoreColor}`} + </button> + {/* This is an expanding spacer for mobile */} + <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div> + <button + className={`btn btn-sm p-0 unselectable pointer ${this.scoreColor}`} onClick={linkEvent(node, this.handleCommentUpvote)} data-tippy-content={this.pointsTippy} > @@ -212,7 +214,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> { <use xlinkHref="#icon-zap"></use> </svg> <span class="mr-1">{this.state.score}</span> - </span> + </button> <span className="mr-1">•</span> <span> <MomentTime data={node.comment} /> |