fix: Fix alignment of preview mini-overlay buttons on thumbs
This commit is contained in:
parent
773176084c
commit
ee84634a73
1 changed files with 13 additions and 7 deletions
|
@ -49,7 +49,7 @@ import {
|
||||||
PurgeType,
|
PurgeType,
|
||||||
VoteContentType,
|
VoteContentType,
|
||||||
} from "../../interfaces";
|
} from "../../interfaces";
|
||||||
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
|
import { mdToHtml, mdToHtmlInline } from "../../markdown";
|
||||||
import { I18NextService, UserService } from "../../services";
|
import { I18NextService, UserService } from "../../services";
|
||||||
import { setupTippy } from "../../tippy";
|
import { setupTippy } from "../../tippy";
|
||||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
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) {
|
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 (
|
||||||
|
@ -348,7 +351,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) {
|
||||||
|
|
Loading…
Reference in a new issue