Adding better comment highlighting.

Fixes #66
This commit is contained in:
Dessalines 2019-04-16 20:23:52 -07:00
parent ed6595bec7
commit 57e274c87a
2 changed files with 6 additions and 6 deletions

View file

@ -49,13 +49,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
render() { render() {
let node = this.props.node; let node = this.props.node;
return ( return (
<div id={`comment-${node.comment.id}`} className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}> <div className={`comment ${node.comment.parent_id && !this.props.noIndent ? 'ml-4' : ''}`}>
<div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}> <div className={`float-left small text-center ${this.props.viewOnly && 'no-click'}`}>
<div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}></div> <div className={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}></div>
<div>{node.comment.score}</div> <div>{node.comment.score}</div>
<div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}></div> <div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}></div>
</div> </div>
<div className="details ml-4"> <div id={`comment-${node.comment.id}`} className="details ml-4">
<ul class="list-inline mb-0 text-muted small"> <ul class="list-inline mb-0 text-muted small">
<li className="list-inline-item"> <li className="list-inline-item">
<Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link> <Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>

View file

@ -63,7 +63,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div className="ml-4"> <div className="ml-4">
{post.url {post.url
? <div className="mb-0"> ? <div className="mb-0">
<h4 className="d-inline"><a className="text-white" href={post.url}>{post.name}</a> <h4 className="d-inline"><a className="text-white" href={post.url} title={post.url}>{post.name}</a>
{post.removed && {post.removed &&
<small className="ml-2 text-muted font-italic">removed</small> <small className="ml-2 text-muted font-italic">removed</small>
} }
@ -71,12 +71,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<small className="ml-2 text-muted font-italic">locked</small> <small className="ml-2 text-muted font-italic">locked</small>
} }
</h4> </h4>
<small><a className="ml-2 text-muted font-italic" href={post.url}>{(new URL(post.url)).hostname}</a></small> <small><a className="ml-2 text-muted font-italic" href={post.url} title={post.url}>{(new URL(post.url)).hostname}</a></small>
{ !this.state.iframeExpanded { !this.state.iframeExpanded
? <span class="pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleIframeExpandClick)}>+</span> ? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleIframeExpandClick)}>+</span>
: :
<span> <span>
<span class="pointer ml-2 text-muted small" onClick={linkEvent(this, this.handleIframeExpandClick)}>-</span> <span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleIframeExpandClick)}>-</span>
<div class="embed-responsive embed-responsive-1by1"> <div class="embed-responsive embed-responsive-1by1">
<iframe scrolling="yes" class="embed-responsive-item" src={post.url}></iframe> <iframe scrolling="yes" class="embed-responsive-item" src={post.url}></iframe>
</div> </div>