Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages 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, 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) {