-webkit-box-orient: vertical;
}
-.emoji-picker {
+#emoji-picker {
width: 100%;
}
const { errorPageData } = this.isoData;
return (
- <div className="container-lg text-center">
+ <div className="error-page container-lg text-center">
<h1>
{errorPageData
? i18n.t("error_page_title")
render() {
return (
- <footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
+ <footer className="app-footer container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
<div className="navbar-collapse">
<ul className="navbar-nav ms-auto">
{this.props.site?.version !== VERSION && (
: undefined;
return (
- <div className={["mb-3", this.props.containerClass].join(" ")}>
+ <div
+ className={["comment-form", "mb-3", this.props.containerClass].join(
+ " "
+ )}
+ >
{UserService.Instance.myUserInfo ? (
<MarkdownTextArea
initialContent={initialContent}
};
return (
- <div>
+ <div className="comment-report">
<CommentNode
node={node}
viewType={CommentViewType.Flat}
export const Badges = ({ counts, communityId }: BadgesProps) => {
return (
- <ul className="my-1 list-inline">
+ <ul className="badges my-1 list-inline">
<li
className="list-inline-item badge text-bg-secondary pointer"
data-tippy-content={i18n.t("active_users_in_the_last_day", {
const icon = this.props.icon;
return (
(banner || icon) && (
- <div className="position-relative mb-2">
+ <div className="banner-icon-header position-relative mb-2">
{banner && <PictrsImage src={banner} banner alt="" />}
{icon && (
<PictrsImage
name={this.id}
value={this.state.sort}
onChange={linkEvent(this, this.handleSortChange)}
- className="form-select d-inline-block w-auto me-2 mb-2"
+ className="sort-select form-select d-inline-block w-auto me-2 mb-2"
aria-label={i18n.t("sort_type")}
>
<option disabled aria-hidden="true">
<option value={"Old"}>{i18n.t("old")}</option>
</select>
<a
- className="text-muted"
+ className="sort-select-help text-muted"
href={sortingHelpUrl}
rel={relTags}
title={i18n.t("sorting_help")}
render() {
return (
- <div className="btn-group btn-group-toggle flex-wrap">
+ <div className="data-type-select btn-group btn-group-toggle flex-wrap">
<label
className={`pointer btn btn-outline-secondary
${this.state.type_ == DataType.Post && "active"}
}
render() {
return (
- <span>
+ <span className="emoji-picker">
<button
className="btn btn-sm text-muted"
data-tippy-content={i18n.t("emoji")}
render() {
return (
- <div className="mt-2 alert alert-danger" role="alert">
+ <div className="purge-warning mt-2 alert alert-danger" role="alert">
<Icon icon="alert-triangle" classes="icon-inline me-2" />
{i18n.t("purge_warning")}
</div>
render() {
return (
- <form className="d-inline">
+ <form className="image-upload-form d-inline">
<label
htmlFor={this.id}
className="pointer text-muted small font-weight-bold"
return this.props.iconVersion ? (
this.selectBtn
) : (
- <div>
+ <div className="language-select">
{this.props.multiple && this.props.showLanguageWarning && (
<div className="alert alert-warning" role="alert">
{i18n.t("undetermined_language_warning")}
render() {
return (
- <div className="btn-group btn-group-toggle flex-wrap">
+ <div className="listing-type-select btn-group btn-group-toggle flex-wrap">
{this.props.showSubscribed && (
<label
title={i18n.t("subscribed_description")}
// message={i18n.t("block_leaving")}
// />
return (
- <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
+ <form
+ className="markdown-textarea"
+ id={this.formId}
+ onSubmit={linkEvent(this, this.handleSubmit)}
+ >
<NavigationPrompt
when={
!this.props.hideNavigationWarnings &&
return (
<span
data-tippy-content={this.createdAndModifiedTimes()}
- className="font-italics pointer unselectable"
+ className="moment-time font-italics pointer unselectable"
>
<Icon icon="edit-2" classes="icon-inline me-1" />
{moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
const published = this.props.published;
return (
<span
- className="pointer unselectable"
+ className="moment-time pointer unselectable"
data-tippy-content={this.format(published)}
>
{moment.utc(published).fromNow(!this.props.showAgo)}
}
render() {
return (
- <div className="my-2">
+ <div className="paginator my-2">
<button
className="btn btn-secondary me-2"
disabled={this.props.page == 1}
render() {
return (
- <picture className="d-inline-block overflow-hidden">
+ <picture className="pictrs-image d-inline-block overflow-hidden">
<source srcSet={this.src("webp")} type="image/webp" />
<source srcSet={this.props.src} />
<source srcSet={this.src("jpg")} type="image/jpeg" />
const accepted = a.creator_local_user.accepted_application;
return (
- <div>
+ <div className="registration-application">
<div>
{i18n.t("applicant")}: <PersonListing person={a.creator} />
</div>
const { searchText, selectedIndex, loadingEllipses } = this.state;
return (
- <div className="dropdown">
+ <div className="searchable-select dropdown">
<button
id={id}
type="button"
name={this.id}
value={this.state.sort}
onChange={linkEvent(this, this.handleSortChange)}
- className="form-select d-inline-block w-auto me-2"
+ className="sort-select form-select d-inline-block w-auto me-2"
aria-label={i18n.t("sort_type")}
>
<option disabled aria-hidden="true">
<option value={"TopAll"}>{i18n.t("top_all")}</option>
</select>
<a
- className="text-muted"
+ className="sort-select-icon text-muted"
href={sortingHelpUrl}
rel={relTags}
title={i18n.t("sorting_help")}
render() {
return (
- <div className="container-lg">
+ <div className="communities container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
+ <form
+ className="community-form"
+ onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
+ >
<NavigationPrompt
when={
!this.props.loading &&
return !this.props.realLink ? (
<Link
title={apubName}
- className={`${this.props.muted ? "text-muted" : ""}`}
+ className={`community-link ${this.props.muted ? "text-muted" : ""}`}
to={link}
>
{this.avatarAndName(displayName)}
) : (
<a
title={apubName}
- className={`${this.props.muted ? "text-muted" : ""}`}
+ className={`community-link ${this.props.muted ? "text-muted" : ""}`}
href={link}
rel={relTags}
>
}
render() {
- return <div className="container-lg">{this.renderCommunity()}</div>;
+ return (
+ <div className="community container-lg">{this.renderCommunity()}</div>
+ );
}
sidebar(res: GetCommunityResponse) {
render() {
return (
- <div className="container-lg">
+ <div className="create-community container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <div>
+ <div className="community-sidebar">
{!this.state.showEdit ? (
this.sidebar()
) : (
: undefined;
return (
- <div className="container-lg">
+ <div className="admin-settings container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <div className="col-12">
+ <div className="home-emojis-form col-12">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
} = this.state;
return (
- <div className="container-lg">
+ <div className="home container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <div className="container-lg">
+ <div className="home-instances container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
const legal = this.state.siteRes.site_view.local_site.legal_information;
return (
- <div className="container-lg">
+ <div className="legal container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <div className="container-lg">
+ <div className="login container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <form onSubmit={linkEvent(this, submitRateLimitForm)}>
+ <form
+ className="rate-limit-form"
+ onSubmit={linkEvent(this, submitRateLimitForm)}
+ >
<h5>{i18n.t("rate_limit_header")}</h5>
<Tabs
tabs={rateLimitTypes.map(rateLimitType => ({
render() {
return (
- <div className="container-lg">
+ <div className="home-setup container-lg">
<Helmet title={this.documentTitle} />
<div className="row">
<div className="col-12 offset-lg-3 col-lg-6">
render() {
return (
- <div className="container-lg">
+ <div className="home-signup container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
return (
- <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
+ <form
+ className="site-form"
+ onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
+ >
<NavigationPrompt
when={
!this.props.loading &&
render() {
return (
- <div className="accordion">
+ <div className="site-sidebar accordion">
<section id="sidebarInfo" className="card border-secondary mb-3">
<header
className="card-header d-flex align-items-center"
render() {
return (
- <div className="col-12">
+ <div className="tagline-form col-12">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
const { actionType, modId, userId } = getModlogQueryParams();
return (
- <div className="container-lg">
+ <div className="modlog container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
<div
- className={`mx-2 d-inline-block unselectable pointer`}
+ className={`cake-day mx-2 d-inline-block unselectable pointer`}
data-tippy-content={this.cakeDayTippy()}
>
<Icon icon="cake" classes="icon-inline" />
const auth = myAuth();
const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
return (
- <div className="container-lg">
+ <div className="inbox container-lg">
<div className="row">
<div className="col-12">
<HtmlTags
render() {
return (
- <div className="container-lg">
+ <div className="password-change container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <div>
+ <div className="person-details">
{this.viewSelector(this.props.view)}
<Paginator page={this.props.page} onChange={this.handlePageChange} />
{!this.props.realLink ? (
<Link
title={apubName}
- className={classNames("d-inline-flex align-items-baseline", {
- "text-muted": this.props.muted,
- "text-info": !this.props.muted,
- })}
+ className={classNames(
+ "person-listing d-inline-flex align-items-baseline",
+ {
+ "text-muted": this.props.muted,
+ "text-info": !this.props.muted,
+ }
+ )}
to={link}
>
{this.avatarAndName(displayName)}
) : (
<a
title={apubName}
- className={`d-inline-flex align-items-baseline ${
+ className={`person-listing d-inline-flex align-items-baseline ${
this.props.muted ? "text-muted" : "text-info"
}`}
href={link}
}
render() {
- return <div className="container-lg">{this.renderPersonRes()}</div>;
+ return (
+ <div className="person-profile container-lg">
+ {this.renderPersonRes()}
+ </div>
+ );
}
get viewRadios() {
}
render() {
- return <div className="container-lg">{this.renderApps()}</div>;
+ return (
+ <div className="registration-applications container-lg">
+ {this.renderApps()}
+ </div>
+ );
}
unreadOrAllRadios() {
render() {
return (
- <div className="container-lg">
+ <div className="person-reports container-lg">
<div className="row">
<div className="col-12">
<HtmlTags
render() {
return (
- <div className="container-lg">
+ <div className="person-settings container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <div className="container-lg">
+ <div className="verfy-email container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
| undefined;
return (
- <div className="container-lg">
+ <div className="create-post container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
return (
<>
{!this.state.expanded && post.embed_title && post.url && (
- <div className="card border-secondary mt-3 mb-2">
+ <div className="post-metadata-card card border-secondary mt-3 mb-2">
<div className="row">
<div className="col-12">
<div className="card-body">
</div>
)}
{this.state.expanded && post.embed_video_url && (
- <iframe src={post.embed_video_url}></iframe>
+ <iframe
+ className="post-metadata-iframe"
+ src={post.embed_video_url}
+ ></iframe>
)}
</>
);
// !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
// <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
return (
- <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
+ <form
+ className="post-form"
+ onSubmit={linkEvent(this, this.handlePostSubmit)}
+ >
<NavigationPrompt
when={
!!(
render() {
return (
- <div>
+ <div className="post-listings">
{this.posts.length > 0 ? (
this.posts.map((post_view, idx) => (
<>
};
return (
- <div>
+ <div className="post-report">
<PostListing
post_view={pv}
showCommunity={true}
}
render() {
- return <div className="container-lg">{this.renderPostRes()}</div>;
+ return <div className="post container-lg">{this.renderPostRes()}</div>;
}
sortRadios() {
render() {
return (
- <div className="container-lg">
+ <div className="create-private-message container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
render() {
return (
- <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
+ <form
+ className="private-message-form"
+ onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
+ >
<NavigationPrompt
when={
!this.state.loading && !!this.state.content && !this.state.submitted
);
return (
- <div>
+ <div className="private-message-report">
<div>
{i18n.t("creator")}:{" "}
<PersonListing person={r.private_message_creator} />
: message_view.creator;
return (
- <div className="border-top border-light">
+ <div className="private-message border-top border-light">
<div>
<ul className="list-inline mb-0 text-muted small">
{/* TODO refactor this */}
const { type, page } = getSearchQueryParams();
return (
- <div className="container-lg">
+ <div className="search container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}