LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-01 10:09:56 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1630 from jsit/fix/thumb-action-button-alignment

Browse source 
fix: Fix alignment of preview mini-overlay buttons on thumbs
This commit is contained in:
SleeplessOne1917 2023-06-27 17:18:56 -04:00 committed by GitHub
commit 1c759cc83b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/shared/components/post/post-listing.tsx
View file

@ -331,16 +331,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) { if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
return ( return (
<a <button
href={this.imageSrc} type="button"
className="text-body d-inline-block position-relative mb-2" className="d-inline-block position-relative mb-2 p-0 border-0"
data-tippy-content={I18NextService.i18n.t("expand_here")} data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)} onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")} aria-label={I18NextService.i18n.t("expand_here")}
> >
{this.imgThumb(this.imageSrc)} {this.imgThumb(this.imageSrc)}
<Icon icon="image" classes="mini-overlay" /> <Icon
</a> icon="image"
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
/>
</button>
); );
} else if (!this.props.hideImage && url && thumbnail && this.imageSrc) { } else if (!this.props.hideImage && url && thumbnail && this.imageSrc) {
return ( return (
@ -351,7 +354,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
title={url} title={url}
> >
{this.imgThumb(this.imageSrc)} {this.imgThumb(this.imageSrc)}
<Icon icon="external-link" classes="mini-overlay" /> <Icon
icon="external-link"
classes="d-block text-white position-absolute end-0 top-0 mini-overlay text-opacity-75 text-opacity-100-hover"
/>
</a> </a>
); );
} else if (url) { } else if (url) {