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

fix: Fix alignment of preview mini-overlay buttons on thumbs

Browse source
This commit is contained in:
Jay Sitter 2023-06-26 21:05:50 -04:00
parent 773176084c
commit ee84634a73
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -49,7 +49,7 @@ import {
PurgeType,
VoteContentType,
} from "../../interfaces";
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
import { mdToHtml, mdToHtmlInline } from "../../markdown";
import { I18NextService, UserService } from "../../services";
import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
@ -328,16 +328,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
if (!this.props.hideImage && url && isImage(url) && this.imageSrc) {
return (
<a
href={this.imageSrc}
className="text-body d-inline-block position-relative mb-2"
<button
type="button"
className="d-inline-block position-relative mb-2 p-0 border-0"
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
aria-label={I18NextService.i18n.t("expand_here")}
>
{this.imgThumb(this.imageSrc)}
<Icon icon="image" classes="mini-overlay" />
</a>
<Icon
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) {
return (
@ -348,7 +351,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
title={url}
>
{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>
);
} else if (url) {