-* @dessalines @SleeplessOne1917
+* @dessalines @SleeplessOne1917 @alectrocute
"inferno-server": "^8.1.1",
"isomorphic-cookie": "^1.2.4",
"jwt-decode": "^3.1.2",
- "lemmy-js-client": "0.17.2-rc.24",
+ "lemmy-js-client": "0.18.0-rc.1",
"lodash": "^4.17.21",
"markdown-it": "^13.0.1",
"markdown-it-container": "^3.0.0",
return (
<>
<Provider i18next={i18n}>
- <div id="app">
+ <div id="app" className="lemmy-site">
{siteView && (
<Theme defaultTheme={siteView.local_site.default_theme} />
)}
render() {
return (
- <nav className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
+ <footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
<div className="navbar-collapse">
<ul className="navbar-nav ml-auto">
{this.props.site?.version !== VERSION && (
</li>
</ul>
</div>
- </nav>
+ </footer>
);
}
}
const siteView = this.props.siteRes?.site_view;
const person = UserService.Instance.myUserInfo?.local_user_view.person;
return (
- <nav className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg">
+ <nav
+ className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
+ id="navbar"
+ >
<NavLink
+ id="navTitle"
to="/"
title={siteView?.site.description ?? siteView?.site.name}
className="d-flex align-items-center navbar-brand mr-md-3"
</NavLink>
{person && (
<ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
- <li className="nav-item">
+ <li id="navMessages" className="nav-item nav-item-icon">
<NavLink
to="/inbox"
- className="p-1 nav-link border-0"
+ className="p-1 nav-link border-0 nav-messages"
title={i18n.t("unread_messages", {
count: Number(this.state.unreadApplicationCountRes.state),
formattedCount: numToSI(this.unreadInboxCount),
</NavLink>
</li>
{this.moderatesSomething && (
- <li className="nav-item">
+ <li className="nav-item nav-item-icon">
<NavLink
to="/reports"
className="p-1 nav-link border-0"
</li>
)}
{amAdmin() && (
- <li className="nav-item">
+ <li className="nav-item nav-item-icon">
<NavLink
to="/registration_applications"
className="p-1 nav-link border-0"
id="navbarDropdown"
ref={this.mobileMenuRef}
>
- <ul className="mr-auto navbar-nav">
+ <ul id="navbarLinks" className="mr-auto navbar-nav">
<li className="nav-item">
<NavLink
to="/communities"
</a>
</li>
</ul>
- <ul className="navbar-nav">
- <li className="nav-item">
+ <ul id="navbarIcons" className="navbar-nav">
+ <li id="navSearch" className="nav-item">
<NavLink
to="/search"
className="nav-link"
</NavLink>
</li>
{amAdmin() && (
- <li className="nav-item">
+ <li id="navAdmin" className="nav-item">
<NavLink
to="/admin"
className="nav-link"
)}
{person ? (
<>
- <li className="nav-item">
+ <li id="navMessages" className="nav-item">
<NavLink
className="nav-link"
to="/inbox"
</NavLink>
</li>
{this.moderatesSomething && (
- <li className="nav-item">
+ <li id="navModeration" className="nav-item">
<NavLink
className="nav-link"
to="/reports"
</li>
)}
{amAdmin() && (
- <li className="nav-item">
+ <li id="navApplications" className="nav-item">
<NavLink
to="/registration_applications"
className="nav-link"
</li>
)}
{person && (
- <div className="dropdown">
+ <div id="dropdownUser" className="dropdown">
<button
className="btn dropdown-toggle"
role="button"
onReplyCancel?(): void;
allLanguages: Language[];
siteLanguages: number[];
+ containerClass?: string;
onUpsertComment(form: EditComment | CreateComment): void;
}
: undefined;
return (
- <div className="mb-3">
+ <div className={["mb-3", this.props.containerClass].join(" ")}>
{UserService.Instance.myUserInfo ? (
<MarkdownTextArea
initialContent={initialContent}
return (
<li className="comment" role="comment">
- <div
+ <article
id={`comment-${cv.comment.id}`}
className={classNames(`details comment-node py-2`, {
"border-top border-light": !this.props.noBorder,
focus
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
+ containerClass="comment-comment-container"
onUpsertComment={this.props.onEditComment}
/>
)}
</button>
{!this.state.showAdvanced ? (
<button
- className="btn btn-link btn-animate text-muted"
+ className="btn btn-link btn-animate text-muted btn-more"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t("more")}
aria-label={i18n.t("more")}
</div>
)}
</div>
- </div>
+ </article>
{showMoreChildren && (
<div
className={classNames("details ml-1 comment-node py-2", {
focus
allLanguages={this.props.allLanguages}
siteLanguages={this.props.siteLanguages}
+ containerClass="comment-comment-container"
onUpsertComment={this.props.onCreateComment}
/>
)}
interface BadgesProps {
counts: CommunityAggregates | SiteAggregates;
- online: number;
community_view?: CommunityView;
}
return "subscribers" in counts;
};
-export const Badges = ({ counts, community_view, online }: BadgesProps) => {
+export const Badges = ({ counts, community_view }: BadgesProps) => {
return (
<ul className="my-1 list-inline">
- <li className="list-inline-item badge badge-secondary">
- {i18n.t("number_online", {
- count: online,
- formattedCount: numToSI(online),
- })}
- </li>
<li
className="list-inline-item badge badge-secondary pointer"
data-tippy-content={i18n.t("active_users_in_the_last_day", {
<li className="list-inline-item">
<Link
className="badge badge-primary"
- to={`/modlog/${community_view ?? community_view?.community.id}`}
+ to={`/modlog/${!!community_view ?? community_view?.community.id}`}
>
{i18n.t("modlog")}
</Link>
MarkdownTextAreaProps,
MarkdownTextAreaState
> {
- private id = `comment-textarea-${randomStr()}`;
- private formId = `comment-form-${randomStr()}`;
+ private id = `markdown-textarea-${randomStr()}`;
+ private formId = `markdown-form-${randomStr()}`;
+
private tribute: any;
state: MarkdownTextAreaState = {
community_view={res.community_view}
moderators={res.moderators}
admins={site_res.admins}
- online={res.online}
enableNsfw={enableNsfw(site_res)}
editable
allLanguages={site_res.all_languages}
allLanguages: Language[];
siteLanguages: number[];
communityLanguages?: number[];
- online: number;
enableNsfw?: boolean;
showIcon?: boolean;
editable?: boolean;
const myUSerInfo = UserService.Instance.myUserInfo;
const { name, actor_id } = this.props.community_view.community;
return (
- <div>
- <div className="card border-secondary mb-3">
- <div className="card-body">
- {this.communityTitle()}
- {this.props.editable && this.adminButtons()}
- {myUSerInfo && this.subscribe()}
- {this.canPost && this.createPost()}
- {myUSerInfo && this.blockCommunity()}
- {!myUSerInfo && (
- <div className="alert alert-info" role="alert">
- <T
- i18nKey="community_not_logged_in_alert"
- interpolation={{
- community: name,
- instance: hostname(actor_id),
- }}
- >
- #<code className="user-select-all">#</code>#
- </T>
- </div>
- )}
- </div>
- </div>
- <div className="card border-secondary mb-3">
- <div className="card-body">
- {this.description()}
- <Badges
- online={this.props.online}
- community_view={this.props.community_view}
- counts={this.props.community_view.counts}
- />
- {this.mods()}
- </div>
+ <aside className="mb-3">
+ <div id="sidebarContainer">
+ <section id="sidebarMain" className="card border-secondary mb-3">
+ <div className="card-body">
+ {this.communityTitle()}
+ {this.props.editable && this.adminButtons()}
+ {myUSerInfo && this.subscribe()}
+ {this.canPost && this.createPost()}
+ {myUSerInfo && this.blockCommunity()}
+ {!myUSerInfo && (
+ <div className="alert alert-info" role="alert">
+ <T
+ i18nKey="community_not_logged_in_alert"
+ interpolation={{
+ community: name,
+ instance: hostname(actor_id),
+ }}
+ >
+ #<code className="user-select-all">#</code>#
+ </T>
+ </div>
+ )}
+ </div>
+ </section>
+ <section id="sidebarInfo" className="card border-secondary mb-3">
+ <div className="card-body">
+ {this.description()}
+ <Badges
+ community_view={this.props.community_view}
+ counts={this.props.community_view.counts}
+ />
+ {this.mods()}
+ </div>
+ </section>
</div>
- </div>
+ </aside>
);
}
siteRes: {
site_view: { counts, site },
admins,
- online,
},
showSubscribedMobile,
showTrendingMobile,
site={site}
admins={admins}
counts={counts}
- online={online}
showLocal={showLocal(this.isoData)}
/>
)}
siteRes: {
site_view: { counts, site },
admins,
- online,
},
} = this.state;
return (
- <div>
- <div>
- <div className="card border-secondary mb-3">
- <div className="card-body">
- {this.trendingCommunities()}
- {canCreateCommunity(this.state.siteRes) && (
- <LinkButton
- path="/create_community"
- translationKey="create_a_community"
- />
- )}
+ <div id="sidebarContainer">
+ <section id="sidebarMain" className="card border-secondary mb-3">
+ <div className="card-body">
+ {this.trendingCommunities()}
+ {canCreateCommunity(this.state.siteRes) && (
<LinkButton
- path="/communities"
- translationKey="explore_communities"
+ path="/create_community"
+ translationKey="create_a_community"
/>
- </div>
+ )}
+ <LinkButton
+ path="/communities"
+ translationKey="explore_communities"
+ />
</div>
- <SiteSidebar
- site={site}
- admins={admins}
- counts={counts}
- online={online}
- showLocal={showLocal(this.isoData)}
- />
- {this.hasFollows && (
- <div className="card border-secondary mb-3">
- <div className="card-body">{this.subscribedCommunities}</div>
- </div>
- )}
- </div>
+ </section>
+ <SiteSidebar
+ site={site}
+ admins={admins}
+ counts={counts}
+ showLocal={showLocal(this.isoData)}
+ />
+ {this.hasFollows && (
+ <section
+ id="sidebarSubscribed"
+ className="card border-secondary mb-3"
+ >
+ <div className="card-body">{this.subscribedCommunities}</div>
+ </section>
+ )}
</div>
);
}
toast(i18n.t("enter_two_factor_code"), "info");
}
- i.setState({ loginRes: { state: "empty" } });
+ i.setState({ loginRes: { state: "failed", msg: loginRes.msg } });
break;
}
slur_filter_regex: ls.slur_filter_regex,
actor_name_max_length: ls.actor_name_max_length,
federation_enabled: ls.federation_enabled,
- federation_debug: ls.federation_debug,
federation_worker_count: ls.federation_worker_count,
captcha_enabled: ls.captcha_enabled,
captcha_difficulty: ls.captcha_difficulty,
showLocal: boolean;
counts?: SiteAggregates;
admins?: PersonView[];
- online?: number;
}
interface SiteSidebarState {
render() {
return (
- <div className="card border-secondary mb-3">
+ <section id="sidebarInfo" className="card border-secondary mb-3">
<div className="card-body">
<div>
<div className="mb-2">{this.siteName()}</div>
)}
</div>
</div>
- </div>
+ </section>
);
}
<div>
{site.description && <h6>{site.description}</h6>}
{site.sidebar && this.siteSidebar(site.sidebar)}
- {this.props.counts && (
- <Badges online={this.props.online ?? 1} counts={this.props.counts} />
- )}
+ {this.props.counts && <Badges counts={this.props.counts} />}
{this.props.admins && this.admins(this.props.admins)}
</div>
);
</h5>
) : (
<div className="row">
- <div className="col-12 col-lg-6 offset-lg-3 mb-4">
+ <div
+ id="createPostForm"
+ className="col-12 col-lg-6 offset-lg-3 mb-4"
+ >
<h5>{i18n.t("create_post")}</h5>
<PostForm
onCreate={this.handlePostCreate}
body() {
const body = this.postView.post.body;
return body ? (
- <div className="col-12 card my-2 p-2">
+ <article id="postContent" className="col-12 card my-2 p-2">
{this.state.viewSource ? (
<pre>{body}</pre>
) : (
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(body)} />
)}
- </div>
+ </article>
) : (
<></>
);
</button>
{showScores() ? (
<div
- className={`unselectable pointer font-weight-bold text-muted px-1`}
+ className={`unselectable pointer font-weight-bold text-muted px-1 post-score`}
data-tippy-content={this.pointsTippy}
>
{numToSI(this.postView.counts.score)}
<>
{/* The mobile view*/}
<div className="d-block d-sm-none">
- <div className="row">
+ <article className="row post-container">
<div className="col-12">
{this.createdLine()}
{this.duplicatesLine()}
{this.removeAndBanDialogs()}
</div>
- </div>
+ </article>
</div>
{/* The larger view*/}
<div className="d-none d-sm-block">
- <div className="row">
+ <article className="row post-container">
{!this.props.viewOnly && this.voteBar()}
- <div className="col-sm-2 pr-0">
+ <div className="col-sm-2 pr-0 post-media">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12 col-sm-9">
</div>
</div>
</div>
- </div>
+ </article>
</div>
</>
);
disabled={res.post_view.post.locked}
allLanguages={this.state.siteRes.all_languages}
siteLanguages={this.state.siteRes.discussion_languages}
+ containerClass="post-comment-container"
onUpsertComment={this.handleCreateComment}
finished={this.state.finished.get(0)}
/>
const res = this.state.postRes;
if (res.state === "success") {
return (
- <div className="mb-3">
- <Sidebar
- community_view={res.data.community_view}
- moderators={res.data.moderators}
- admins={this.state.siteRes.admins}
- online={res.data.online}
- enableNsfw={enableNsfw(this.state.siteRes)}
- showIcon
- allLanguages={this.state.siteRes.all_languages}
- siteLanguages={this.state.siteRes.discussion_languages}
- onDeleteCommunity={this.handleDeleteCommunityClick}
- onLeaveModTeam={this.handleAddModToCommunity}
- onFollowCommunity={this.handleFollow}
- onRemoveCommunity={this.handleModRemoveCommunity}
- onPurgeCommunity={this.handlePurgeCommunity}
- onBlockCommunity={this.handleBlockCommunity}
- onEditCommunity={this.handleEditCommunity}
- />
- </div>
+ <Sidebar
+ community_view={res.data.community_view}
+ moderators={res.data.moderators}
+ admins={this.state.siteRes.admins}
+ enableNsfw={enableNsfw(this.state.siteRes)}
+ showIcon
+ allLanguages={this.state.siteRes.all_languages}
+ siteLanguages={this.state.siteRes.discussion_languages}
+ onDeleteCommunity={this.handleDeleteCommunityClick}
+ onLeaveModTeam={this.handleAddModToCommunity}
+ onFollowCommunity={this.handleFollow}
+ onRemoveCommunity={this.handleModRemoveCommunity}
+ onPurgeCommunity={this.handlePurgeCommunity}
+ onBlockCommunity={this.handleBlockCommunity}
+ onEditCommunity={this.handleEditCommunity}
+ />
);
}
}
resolved "https://registry.yarnpkg.com/leac/-/leac-0.6.0.tgz#dcf136e382e666bd2475f44a1096061b70dc0912"
integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==
-lemmy-js-client@0.17.2-rc.24:
- version "0.17.2-rc.24"
- resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.2-rc.24.tgz#3b09233a6d89286e559be2e840d81c0c549562ad"
- integrity sha512-aSHz7UTcwnwnNd9poY8tEXP7RA9ieZm9MAfSljcbCNU5ds9CASXYNodmraUVJiqCmT4HWnj7IeVmBC9r7nTHnw==
+lemmy-js-client@0.18.0-rc.1:
+ version "0.18.0-rc.1"
+ resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.18.0-rc.1.tgz#fd0c88810572d90413696011ebaed19e3b8162d8"
+ integrity sha512-lQe443Nr5UCSoY+IxmT7mBe0IRF6EAZ/4PJSRoPSL+U8A+egMMBPbuxnisHzLsC+eDOWRUIgOqZlwlaRnbmuig==
dependencies:
cross-fetch "^3.1.5"
form-data "^4.0.0"