diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/assets/css/main.css | 10 | ||||
| -rw-r--r-- | ui/src/components/post-listing.tsx | 36 |
2 files changed, 34 insertions, 12 deletions
diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index e7784877..00020177 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -187,3 +187,13 @@ hr { color: var(--white); border: unset; } + +.link-overlay { + position: absolute; + top: 0; + right: 0; + padding: 2px; + background: rgba(0,0,0,.4); + border-bottom-left-radius: 0.25rem !important; + border-top-right-radius: 0.25rem !important; +} diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index c0ddedc1..b3bde27f 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -162,18 +162,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> { )} </div> {this.hasImage() && !this.state.imageExpanded && ( - <span - title={i18n.t('expand_here')} - class="pointer" - onClick={linkEvent(this, this.handleImageExpandClick)} - > - <img - className={`mx-2 mt-1 float-left img-fluid thumbnail rounded ${(post.nsfw || - post.community_nsfw) && - 'img-blur'}`} - src={imageThumbnailer(this.getImage())} - /> - </span> + <div class="mx-2 mt-1 float-left position-relative"> + <span + title={i18n.t('expand_here')} + class="pointer" + onClick={linkEvent(this, this.handleImageExpandClick)} + > + <img + className={`img-fluid thumbnail rounded ${(post.nsfw || + post.community_nsfw) && + 'img-blur'}`} + src={imageThumbnailer(this.getImage())} + /> + </span> + <a + className="text-body" + href={this.state.url} + target="_blank" + title={this.state.url} + > + <svg class="icon link-overlay"> + <use xlinkHref="#icon-external-link"></use> + </svg> + </a> + </div> )} {this.state.url && isVideo(this.state.url) && ( <video |