From: Jay Sitter <jay@jaysitter.com>
Date: Sun, 2 Jul 2023 20:08:55 +0000 (-0400)
Subject: fix: Add some spacing between upload field and image; fix circle image aspect ratio
X-Git-Url: http://these/git/ui/assets/static/%7BcanonicalUrl%7D?a=commitdiff_plain;h=3c6505b9fd647d5fc96227f8b6161c2d84fe7267;p=lemmy-ui.git

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

diff --git a/src/shared/components/common/image-upload-form.tsx b/src/shared/components/common/image-upload-form.tsx
index 74f170b..44a934e 100644
--- a/src/shared/components/common/image-upload-form.tsx
+++ b/src/shared/components/common/image-upload-form.tsx
@@ -1,4 +1,5 @@
 import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { HttpService, I18NextService, UserService } from "../../services";
 import { toast } from "../../toast";
@@ -34,16 +35,17 @@ export class ImageUploadForm extends Component<
     return (
       <form className="image-upload-form d-inline">
         {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 */}
             <img
               alt=""
               src={this.props.imageSrc}
               height={this.props.rounded ? 60 : ""}
               width={this.props.rounded ? 60 : ""}
-              className={`img-fluid ${
-                this.props.rounded ? "rounded-circle" : ""
-              }`}
+              className={classNames("img-fluid", {
+                "rounded-circle ratio ratio-1x1 object-fit-cover":
+                  this.props.rounded,
+              })}
             />
             <button
               className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx
index 9943ee3..8ba423a 100644
--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@@ -402,22 +402,20 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               disabled={!UserService.Instance.myUserInfo}
               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>
-          {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 && (
             <>
               <div className="my-1 text-muted small fw-bold">