LemmyNet/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-11-26 22:31:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding a link overlay. Fixes #549

Browse source
This commit is contained in:
Dessalines 2020-02-21 11:26:42 -05:00
parent 883c8decde
commit 2dec9b5b10
2 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ui/assets/css/main.css vendored
View file

@ -187,3 +187,13 @@ hr {
color: var(--white); color: var(--white);
border: unset; 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;
}

36
ui/src/components/post-listing.tsx vendored
View file

@ -162,18 +162,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)} )}
</div> </div>
{this.hasImage() && !this.state.imageExpanded && ( {this.hasImage() && !this.state.imageExpanded && (
<span <div class="mx-2 mt-1 float-left position-relative">
title={i18n.t('expand_here')} <span
class="pointer" title={i18n.t('expand_here')}
onClick={linkEvent(this, this.handleImageExpandClick)} class="pointer"
> onClick={linkEvent(this, this.handleImageExpandClick)}
<img >
className={`mx-2 mt-1 float-left img-fluid thumbnail rounded ${(post.nsfw || <img
post.community_nsfw) && className={`img-fluid thumbnail rounded ${(post.nsfw ||
'img-blur'}`} post.community_nsfw) &&
src={imageThumbnailer(this.getImage())} 'img-blur'}`}
/> src={imageThumbnailer(this.getImage())}
</span> />
</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) && ( {this.state.url && isVideo(this.state.url) && (
<video <video