</div>
</div>
{post.url && isImage(post.url) &&
- <span class="pointer" onClick={linkEvent(this, this.handleImageExpandClick)}><img class="mx-2 float-left img-fluid thumbnail rounded" src={post.url} /></span>
+ <span title="Expand here" class="pointer" onClick={linkEvent(this, this.handleImageExpandClick)}><img class="mx-2 float-left img-fluid thumbnail rounded" src={post.url} /></span>
}
<div className="ml-4">
- {post.url
- ? <div className="mb-0">
- <h5 className="d-inline"><a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a>
+ <div>
+ <h5 className="mb-0 d-inline"><Link className="text-white" to={`/post/${post.id}`}>{post.name}</Link></h5>
+ {post.url &&
+ <small>
+ <a className="ml-2 text-muted font-italic" href={post.url} target="_blank" title={post.url}>{(new URL(post.url)).hostname}</a>
+ </small>
+ }
{post.removed &&
<small className="ml-2 text-muted font-italic">removed</small>
}
{post.locked &&
<small className="ml-2 text-muted font-italic">locked</small>
}
- </h5>
- <small><a className="ml-2 text-muted font-italic" href={post.url} title={post.url}>{(new URL(post.url)).hostname}</a></small>
- { isImage(post.url) &&
- <>
- { !this.state.imageExpanded
- ? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleImageExpandClick)}>+</span>
- :
- <span>
- <span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleImageExpandClick)}>-</span>
- <div>
- <a href={post.url} target="_blank"><img class="img-fluid" src={post.url} /></a>
- </div>
- </span>
- }
- </>
- }
- </div>
- : <h5 className="mb-0"><Link className="text-white" to={`/post/${post.id}`}>{post.name}</Link>
- {post.removed &&
- <small className="ml-2 text-muted font-italic">removed</small>
- }
- {post.locked &&
- <small className="ml-2 text-muted font-italic">locked</small>
- }
- </h5>
- }
+ { post.url && isImage(post.url) &&
+ <>
+ { !this.state.imageExpanded
+ ? <span class="badge badge-light pointer ml-2 text-muted small" title="Expand here" onClick={linkEvent(this, this.handleImageExpandClick)}>+</span>
+ :
+ <span>
+ <span class="pointer ml-2 badge badge-light text-muted small" onClick={linkEvent(this, this.handleImageExpandClick)}>-</span>
+ <div>
+ <a href={post.url} target="_blank"><img class="img-fluid" src={post.url} /></a>
+ </div>
+ </span>
+ }
+ </>
+ }
+ </div>
</div>
<div className="details ml-4 mb-1">
<ul class="list-inline mb-0 text-muted small">