hostname,
mdToHtml,
myAuthRequired,
- numToSI,
} from "../../utils";
+import { Badges } from "../common/badges";
import { BannerIconHeader } from "../common/banner-icon-header";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { CommunityForm } from "../community/community-form";
render() {
return (
- <div>
+ <div className="community-sidebar">
{!this.state.showEdit ? (
this.sidebar()
) : (
<section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body">
{this.description()}
- {this.badges()}
+ <Badges
+ communityId={this.props.community_view.community.id}
+ counts={this.props.community_view.counts}
+ />
{this.mods()}
</div>
</section>
{this.props.showIcon && !community.removed && (
<BannerIconHeader icon={community.icon} banner={community.banner} />
)}
- <span className="mr-2">
+ <span className="me-2">
<CommunityLink community={community} hideAvatar />
</span>
{subscribed === "Subscribed" && (
<button
- className="btn btn-secondary btn-sm mr-2"
+ className="btn btn-secondary btn-sm me-2"
onClick={linkEvent(this, this.handleUnfollowCommunity)}
>
{this.state.followCommunityLoading ? (
<Spinner />
) : (
<>
- <Icon icon="check" classes="icon-inline text-success mr-1" />
+ <Icon icon="check" classes="icon-inline text-success me-1" />
{i18n.t("joined")}
</>
)}
)}
{subscribed === "Pending" && (
<button
- className="btn btn-warning mr-2"
+ className="btn btn-warning me-2"
onClick={linkEvent(this, this.handleUnfollowCommunity)}
>
{this.state.followCommunityLoading ? (
</button>
)}
{community.removed && (
- <small className="mr-2 text-muted font-italic">
+ <small className="me-2 text-muted font-italic">
{i18n.t("removed")}
</small>
)}
{community.deleted && (
- <small className="mr-2 text-muted font-italic">
+ <small className="me-2 text-muted font-italic">
{i18n.t("deleted")}
</small>
)}
{community.nsfw && (
- <small className="mr-2 text-muted font-italic">
+ <small className="me-2 text-muted font-italic">
{i18n.t("nsfw")}
</small>
)}
);
}
- badges() {
- const community_view = this.props.community_view;
- const counts = community_view.counts;
- return (
- <ul className="my-1 list-inline">
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_day", {
- count: Number(counts.users_active_day),
- formattedCount: numToSI(counts.users_active_day),
- })}
- >
- {i18n.t("number_of_users", {
- count: Number(counts.users_active_day),
- formattedCount: numToSI(counts.users_active_day),
- })}{" "}
- / {i18n.t("day")}
- </li>
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_week", {
- count: Number(counts.users_active_week),
- formattedCount: numToSI(counts.users_active_week),
- })}
- >
- {i18n.t("number_of_users", {
- count: Number(counts.users_active_week),
- formattedCount: numToSI(counts.users_active_week),
- })}{" "}
- / {i18n.t("week")}
- </li>
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_month", {
- count: Number(counts.users_active_month),
- formattedCount: numToSI(counts.users_active_month),
- })}
- >
- {i18n.t("number_of_users", {
- count: Number(counts.users_active_month),
- formattedCount: numToSI(counts.users_active_month),
- })}{" "}
- / {i18n.t("month")}
- </li>
- <li
- className="list-inline-item badge badge-secondary pointer"
- data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
- count: Number(counts.users_active_half_year),
- formattedCount: numToSI(counts.users_active_half_year),
- })}
- >
- {i18n.t("number_of_users", {
- count: Number(counts.users_active_half_year),
- formattedCount: numToSI(counts.users_active_half_year),
- })}{" "}
- / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
- </li>
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_of_subscribers", {
- count: Number(counts.subscribers),
- formattedCount: numToSI(counts.subscribers),
- })}
- </li>
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_of_posts", {
- count: Number(counts.posts),
- formattedCount: numToSI(counts.posts),
- })}
- </li>
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_of_comments", {
- count: Number(counts.comments),
- formattedCount: numToSI(counts.comments),
- })}
- </li>
- <li className="list-inline-item">
- <Link
- className="badge badge-primary"
- to={`/modlog/${this.props.community_view.community.id}`}
- >
- {i18n.t("modlog")}
- </Link>
- </li>
- </ul>
- );
- }
-
mods() {
return (
<ul className="list-inline small">
const cv = this.props.community_view;
return (
<Link
- className={`btn btn-secondary btn-block mb-2 ${
+ className={`btn btn-secondary d-block mb-2 w-100 ${
cv.community.deleted || cv.community.removed ? "no-click" : ""
}`}
to={`/create_post?communityId=${cv.community.id}`}
subscribe() {
const community_view = this.props.community_view;
return (
- <div className="mb-2">
+ <>
{community_view.subscribed == "NotSubscribed" && (
<button
- className="btn btn-secondary btn-block"
+ className="btn btn-secondary d-block mb-2 w-100"
onClick={linkEvent(this, this.handleFollowCommunity)}
>
{this.state.followCommunityLoading ? (
)}
</button>
)}
- </div>
+ </>
);
}
const { subscribed, blocked } = this.props.community_view;
return (
- <div className="mb-2">
+ <>
{subscribed == "NotSubscribed" && (
<button
- className="btn btn-danger btn-block"
+ className="btn btn-danger d-block mb-2 w-100"
onClick={linkEvent(this, this.handleBlockCommunity)}
>
{i18n.t(blocked ? "unblock_community" : "block_community")}
</button>
)}
- </div>
+ </>
);
}
</ul>
{this.state.showRemoveDialog && (
<form onSubmit={linkEvent(this, this.handleRemoveCommunity)}>
- <div className="form-group">
+ <div className="input-group mb-3">
<label className="col-form-label" htmlFor="remove-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="remove-reason"
- className="form-control mr-2"
+ className="form-control me-2"
placeholder={i18n.t("optional")}
value={this.state.removeReason}
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
/>
</div>
{/* TODO hold off on expires for now */}
- {/* <div class="form-group row"> */}
+ {/* <div class="mb-3 row"> */}
{/* <label class="col-form-label">Expires</label> */}
- {/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
+ {/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
{/* </div> */}
- <div className="form-group">
+ <div className="input-group mb-3">
<button type="submit" className="btn btn-secondary">
{this.state.removeCommunityLoading ? (
<Spinner />
)}
{this.state.showPurgeDialog && (
<form onSubmit={linkEvent(this, this.handlePurgeCommunity)}>
- <div className="form-group">
+ <div className="input-group mb-3">
<PurgeWarning />
</div>
- <div className="form-group">
- <label className="sr-only" htmlFor="purge-reason">
+ <div className="input-group mb-3">
+ <label className="visually-hidden" htmlFor="purge-reason">
{i18n.t("reason")}
</label>
<input
type="text"
id="purge-reason"
- className="form-control mr-2"
+ className="form-control me-2"
placeholder={i18n.t("reason")}
value={this.state.purgeReason}
onInput={linkEvent(this, this.handlePurgeReasonChange)}
/>
</div>
- <div className="form-group">
+ <div className="input-group mb-3">
{this.state.purgeCommunityLoading ? (
<Spinner />
) : (
projects / lemmy-ui.git / blobdiff