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

fix: Add some spacing between upload field and image; fix circle image aspect ratio

Browse source
This commit is contained in:
Jay Sitter 2023-07-02 16:08:55 -04:00
parent 0bd0a49730
commit 3c6505b9fd
2 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/shared/components/common/image-upload-form.tsx
View file

@ -1,4 +1,5 @@
import { randomStr } from "@utils/helpers"; import { randomStr } from "@utils/helpers";
import classNames from "classnames";
import { Component, linkEvent } from "inferno"; import { Component, linkEvent } from "inferno";
import { HttpService, I18NextService, UserService } from "../../services"; import { HttpService, I18NextService, UserService } from "../../services";
import { toast } from "../../toast"; import { toast } from "../../toast";
@ -34,16 +35,17 @@ export class ImageUploadForm extends Component<
return ( return (
<form className="image-upload-form d-inline"> <form className="image-upload-form d-inline">
{this.props.imageSrc && ( {this.props.imageSrc && (
<span className="d-inline-block position-relative"> <span className="d-inline-block position-relative mb-2">
{/* TODO: Create "Current Iamge" translation for alt text */} {/* TODO: Create "Current Iamge" translation for alt text */}
<img <img
alt="" alt=""
src={this.props.imageSrc} src={this.props.imageSrc}
height={this.props.rounded ? 60 : ""} height={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""} width={this.props.rounded ? 60 : ""}
className={`img-fluid ${ className={classNames("img-fluid", {
this.props.rounded ? "rounded-circle" : "" "rounded-circle ratio ratio-1x1 object-fit-cover":
}`} this.props.rounded,
})}
/> />
<button <button
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white" className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"

28
src/shared/components/post/post-form.tsx
View file

@ -402,22 +402,20 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
disabled={!UserService.Instance.myUserInfo} disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, handleImageUpload)} onChange={linkEvent(this, handleImageUpload)}
/> />
{this.state.imageLoading && <Spinner />}
{url && isImage(url) && (
<img src={url} className="img-fluid mt-2" alt="" />
)}
{this.state.imageDeleteUrl && (
<button
className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, handleImageDelete)}
>
<Icon icon="x" classes="icon-inline me-1" />
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
</button>
)}
</div> </div>
{this.state.imageLoading && <Spinner />}
{url && isImage(url) && (
<img src={url} className="img-fluid" alt="" />
)}
{this.state.imageDeleteUrl && (
<button
className="btn btn-danger btn-sm mt-2"
onClick={linkEvent(this, handleImageDelete)}
aria-label={I18NextService.i18n.t("delete")}
data-tippy-content={I18NextService.i18n.t("delete")}
>
<Icon icon="x" classes="icon-inline me-1" />
{capitalizeFirstLetter(I18NextService.i18n.t("delete"))}
</button>
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && ( {this.props.crossPosts && this.props.crossPosts.length > 0 && (
<> <>
<div className="my-1 text-muted small fw-bold"> <div className="my-1 text-muted small fw-bold">