-ms-filter: blur(10px);
}
-.img-cover {
- object-fit: cover;
-}
-
.img-expanded {
max-height: 90vh;
}
}
.avatar-overlay {
- width: 20%;
- height: 20%;
+ width: 20vw;
+ height: 20vw;
max-width: 120px;
max-height: 120px;
+ min-width: 80px;
+ min-height: 80px;
}
.avatar-pushup {
import { randomStr } from "@utils/helpers";
+import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import { HttpService, I18NextService, UserService } from "../../services";
import { toast } from "../../toast";
render() {
return (
<form className="image-upload-form d-inline">
- <label htmlFor={this.id} className="pointer text-muted small fw-bold">
- {this.props.imageSrc ? (
- <span className="d-inline-block position-relative">
- {/* 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" : ""
- }`}
- />
- <button
- className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
- type="button"
- onClick={linkEvent(this, this.handleRemoveImage)}
- aria-label={I18NextService.i18n.t("remove")}
- >
- <Icon icon="x" classes="mini-overlay" />
- </button>
- </span>
- ) : (
- <span className="btn btn-secondary">{this.props.uploadTitle}</span>
- )}
- </label>
+ {this.props.imageSrc && (
+ <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={classNames({
+ "rounded-circle object-fit-cover": this.props.rounded,
+ "img-fluid": !this.props.rounded,
+ })}
+ />
+ <button
+ className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
+ type="button"
+ onClick={linkEvent(this, this.handleRemoveImage)}
+ aria-label={I18NextService.i18n.t("remove")}
+ >
+ <Icon icon="x" classes="mini-overlay" />
+ </button>
+ </span>
+ )}
<input
id={this.id}
type="file"
accept="image/*,video/*"
+ className="small form-control"
name={this.id}
- className="d-none"
disabled={!UserService.Instance.myUserInfo}
onChange={linkEvent(this, this.handleImageUpload)}
/>
<form className="btn btn-sm text-muted fw-bold">
<label
htmlFor={`file-upload-${this.id}`}
+ // TODO: Fix this linting violation
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+ tabIndex={0}
className={`mb-0 ${
UserService.Instance.myUserInfo && "pointer"
}`}
className={classNames("overflow-hidden pictrs-image", {
"img-fluid": !this.props.icon && !this.props.iconOverlay,
banner: this.props.banner,
- "thumbnail rounded":
+ "thumbnail rounded object-fit-cover":
this.props.thumbnail && !this.props.icon && !this.props.banner,
"img-expanded slight-radius":
!this.props.thumbnail && !this.props.icon,
"img-blur": this.props.thumbnail && this.props.nsfw,
- "img-cover img-icon me-1": this.props.icon,
- "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
+ "object-fit-cover img-icon me-1": this.props.icon,
+ "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
this.props.iconOverlay,
"avatar-pushup": this.props.pushup,
})}
</div>
)}
<div className="table-responsive">
- <table id="emojis_table" className="table table-sm table-hover">
+ <table
+ id="emojis_table"
+ className="table table-sm table-hover align-middle"
+ >
<thead className="pointer">
<tr>
<th>{I18NextService.i18n.t("column_emoji")}</th>
/>
)}
{cv.image_url.length === 0 && (
- <form>
- <label
- className="btn btn-sm btn-secondary pointer"
- htmlFor={`file-uploader-${index}`}
- data-tippy-content={I18NextService.i18n.t(
- "upload_image"
- )}
- >
- {capitalizeFirstLetter(
- I18NextService.i18n.t("upload")
+ <label
+ // TODO: Fix this linting violation
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+ tabIndex={0}
+ className="btn btn-sm btn-secondary pointer"
+ htmlFor={`file-uploader-${index}`}
+ data-tippy-content={I18NextService.i18n.t(
+ "upload_image"
+ )}
+ >
+ {capitalizeFirstLetter(
+ I18NextService.i18n.t("upload")
+ )}
+ <input
+ name={`file-uploader-${index}`}
+ id={`file-uploader-${index}`}
+ type="file"
+ accept="image/*"
+ className="d-none"
+ onChange={linkEvent(
+ { form: this, index: index },
+ this.handleImageUpload
)}
- <input
- name={`file-uploader-${index}`}
- id={`file-uploader-${index}`}
- type="file"
- accept="image/*"
- className="d-none"
- onChange={linkEvent(
- { form: this, index: index },
- this.handleImageUpload
- )}
- />
- </label>
- </form>
+ />
+ </label>
)}
</td>
<td className="text-right">
/>
</div>
</div>
- <div className="input-group mb-3">
- <label className="me-2 col-form-label">
+ <div className="row mb-3">
+ <label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("icon")}
</label>
- <ImageUploadForm
- uploadTitle={I18NextService.i18n.t("upload_icon")}
- imageSrc={this.state.siteForm.icon}
- onUpload={this.handleIconUpload}
- onRemove={this.handleIconRemove}
- rounded
- />
+ <div className="col-sm-10">
+ <ImageUploadForm
+ uploadTitle={I18NextService.i18n.t("upload_icon")}
+ imageSrc={this.state.siteForm.icon}
+ onUpload={this.handleIconUpload}
+ onRemove={this.handleIconRemove}
+ rounded
+ />
+ </div>
</div>
- <div className="input-group mb-3">
- <label className="me-2 col-form-label">
+ <div className="row mb-3">
+ <label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("banner")}
</label>
- <ImageUploadForm
- uploadTitle={I18NextService.i18n.t("upload_banner")}
- imageSrc={this.state.siteForm.banner}
- onUpload={this.handleBannerUpload}
- onRemove={this.handleBannerRemove}
- />
+ <div className="col-sm-10">
+ <ImageUploadForm
+ uploadTitle={I18NextService.i18n.t("upload_banner")}
+ imageSrc={this.state.siteForm.banner}
+ onUpload={this.handleBannerUpload}
+ onRemove={this.handleBannerRemove}
+ />
+ </div>
</div>
<div className="mb-3 row">
<label className="col-12 col-form-label" htmlFor="site-desc">
<input
type="url"
id="post-url"
- className="form-control"
+ className="form-control mb-3"
value={url}
onInput={linkEvent(this, handlePostUrlChange)}
onPaste={linkEvent(this, handleImageUploadPaste)}
/>
{this.renderSuggestedTitleCopy()}
- <form>
- <label
- htmlFor="file-upload"
- className={`${
- UserService.Instance.myUserInfo && "pointer"
- } d-inline-block float-right text-muted fw-bold`}
- data-tippy-content={I18NextService.i18n.t("upload_image")}
- >
- <Icon icon="image" classes="icon-inline" />
- </label>
- <input
- id="file-upload"
- type="file"
- accept="image/*,video/*"
- name="file"
- className="d-none"
- disabled={!UserService.Instance.myUserInfo}
- onChange={linkEvent(this, handleImageUpload)}
- />
- </form>
{url && validURL(url) && (
<div>
<a
</a>
</div>
)}
+ </div>
+ </div>
+
+ <div className="mb-3 row">
+ <label htmlFor="file-upload" className={"col-sm-2 col-form-label"}>
+ {capitalizeFirstLetter(I18NextService.i18n.t("image"))}
+ <Icon icon="image" classes="icon-inline ms-1" />
+ </label>
+ <div className="col-sm-10">
+ <input
+ id="file-upload"
+ type="file"
+ accept="image/*,video/*"
+ name="file"
+ className="small col-sm-10 form-control"
+ disabled={!UserService.Instance.myUserInfo}
+ onChange={linkEvent(this, handleImageUpload)}
+ />
{this.state.imageLoading && <Spinner />}
{url && isImage(url) && (
- <img src={url} className="img-fluid" alt="" />
+ <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)}
- 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">
- {I18NextService.i18n.t("cross_posts")}
- </div>
- <PostListings
- showCommunity
- posts={this.props.crossPosts}
- enableDownvotes={this.props.enableDownvotes}
- enableNsfw={this.props.enableNsfw}
- allLanguages={this.props.allLanguages}
- siteLanguages={this.props.siteLanguages}
- viewOnly
- // All of these are unused, since its view only
- onPostEdit={() => {}}
- onPostVote={() => {}}
- onPostReport={() => {}}
- onBlockPerson={() => {}}
- onLockPost={() => {}}
- onDeletePost={() => {}}
- onRemovePost={() => {}}
- onSavePost={() => {}}
- onFeaturePost={() => {}}
- onPurgePerson={() => {}}
- onPurgePost={() => {}}
- onBanPersonFromCommunity={() => {}}
- onBanPerson={() => {}}
- onAddModToCommunity={() => {}}
- onAddAdmin={() => {}}
- onTransferCommunity={() => {}}
- />
- </>
- )}
</div>
+ {this.props.crossPosts && this.props.crossPosts.length > 0 && (
+ <>
+ <div className="my-1 text-muted small fw-bold">
+ {I18NextService.i18n.t("cross_posts")}
+ </div>
+ <PostListings
+ showCommunity
+ posts={this.props.crossPosts}
+ enableDownvotes={this.props.enableDownvotes}
+ enableNsfw={this.props.enableNsfw}
+ allLanguages={this.props.allLanguages}
+ siteLanguages={this.props.siteLanguages}
+ viewOnly
+ // All of these are unused, since its view only
+ onPostEdit={() => {}}
+ onPostVote={() => {}}
+ onPostReport={() => {}}
+ onBlockPerson={() => {}}
+ onLockPost={() => {}}
+ onDeletePost={() => {}}
+ onRemovePost={() => {}}
+ onSavePost={() => {}}
+ onFeaturePost={() => {}}
+ onPurgePerson={() => {}}
+ onPurgePost={() => {}}
+ onBanPersonFromCommunity={() => {}}
+ onBanPerson={() => {}}
+ onAddModToCommunity={() => {}}
+ onAddAdmin={() => {}}
+ onTransferCommunity={() => {}}
+ />
+ </>
+ )}
</div>
+
<div className="mb-3 row">
<label className="col-sm-2 col-form-label" htmlFor="post-title">
{I18NextService.i18n.t("title")}