Adding better comment highlighting.

Fixes #66

diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx
index 1fba1d9237c0f3bb7e00155cb963c55a8660e12e..dcfb18a9ce50383276f1347b2bd1bfe4a886b77c 100644 (file)
--- a/ui/src/components/comment-node.tsx
+++ b/ui/src/components/comment-node.tsx
@@ -49,13 +49,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   render() {
     let node = this.props.node;
     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={`pointer upvote ${node.comment.my_vote == 1 ? 'text-info' : 'text-muted'}`} onClick={linkEvent(node, this.handleCommentLike)}>▲</div>
           <div>{node.comment.score}</div>
           <div className={`pointer downvote ${node.comment.my_vote == -1 && 'text-danger'}`} onClick={linkEvent(node, this.handleCommentDisLike)}>▼</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">
             <li className="list-inline-item">
               <Link className="text-info" to={`/user/${node.comment.creator_id}`}>{node.comment.creator_name}</Link>

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index 46e2a9949ba8aac5b31c4b866838ac0e72f777c0..1a52bf79c01ed7573f9b9df9909c36331c8febc0 100644 (file)
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -63,7 +63,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className="ml-4">
           {post.url 
             ? <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 &&
               <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>
             }
           </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
-            ? <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 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">
                 <iframe scrolling="yes" class="embed-responsive-item" src={post.url}></iframe>
               </div>