mirror of
https://github.com/LemmyNet/lemmy.git
synced 2024-09-10 00:18:49 -06:00
Adding a link overlay. Fixes #549
This commit is contained in:
parent
883c8decde
commit
2dec9b5b10
10
ui/assets/css/main.css
vendored
10
ui/assets/css/main.css
vendored
@ -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
36
ui/src/components/post-listing.tsx
vendored
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user