mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-22 12:21:13 +00:00
Merge branch 'main' into breakout-role-utils
This commit is contained in:
Alec Armbruster
GitHub
commit
b8fd516f02
60 changed files with 35129 additions and 24675 deletions
10
package.json
10
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "lemmy-ui",
|
||||
"version": "0.18.0-rc.2",
|
||||
"version": "0.18.0-beta.9",
|
||||
"description": "An isomorphic UI for lemmy",
|
||||
"repository": "https://github.com/LemmyNet/lemmy-ui",
|
||||
"license": "AGPL-3.0",
|
||||
|
|
@ -12,11 +12,14 @@
|
|||
"build:prod": "webpack --mode=production",
|
||||
"clean": "yarn run rimraf dist",
|
||||
"dev": "yarn start",
|
||||
"lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
|
||||
"lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"",
|
||||
"prepare": "husky install",
|
||||
"start": "yarn build:dev --watch",
|
||||
"themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
|
||||
"themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes"
|
||||
"themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
|
||||
"translations:generate": "node generate_translations.js",
|
||||
"translations:init": "git submodule init && yarn translations:update",
|
||||
"translations:update": "git submodule update --remote --recursive"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js}": [
|
||||
|
|
@ -103,7 +106,6 @@
|
|||
"@types/toastify-js": "^1.11.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.5",
|
||||
"@typescript-eslint/parser": "^5.59.5",
|
||||
"bootstrap-v4": "npm:bootstrap@^4.6.2",
|
||||
"eslint": "^8.40.0",
|
||||
"eslint-plugin-inferno": "^7.32.2",
|
||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
.form-select {
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
|
|
@ -266,6 +266,14 @@ hr {
|
|||
-ms-transform: scale(1.2);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Fix this in markup rather than this overly specific selector:
|
||||
* https://getbootstrap.com/docs/5.3/components/buttons/#block-buttons
|
||||
*/
|
||||
.btn.d-block + .btn.d-block {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mini-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,4 @@ $primary: $blue;
|
|||
$secondary: #444;
|
||||
$light: $gray-800;
|
||||
|
||||
$theme-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"light": $light,
|
||||
);
|
||||
|
||||
$link-color: $red;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "./variables";
|
||||
|
||||
// Colors
|
||||
$white: #fff;
|
||||
$gray-200: #ebebeb;
|
||||
|
|
@ -8,48 +10,21 @@ $gray-700: #444;
|
|||
$gray-800: #303030;
|
||||
$gray-900: #222;
|
||||
|
||||
// Writing these maps is necessary for Bootstrap theming:
|
||||
// https://getbootstrap.com/docs/4.6/getting-started/introduction/
|
||||
$grays: (
|
||||
"gray-200": $gray-200,
|
||||
"gray-600": $gray-600,
|
||||
"gray-700": $gray-700,
|
||||
"gray-800": $gray-800,
|
||||
"gray-900": $gray-900,
|
||||
);
|
||||
|
||||
$blue: #375a7f;
|
||||
$red: #e74c3c;
|
||||
$yellow: #f39c12;
|
||||
$green: #00bc8c;
|
||||
$cyan: #3498db;
|
||||
|
||||
// Writing these maps is necessary for Bootstrap theming:
|
||||
// https://getbootstrap.com/docs/4.6/getting-started/introduction/
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"red": $red,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"cyan": $cyan,
|
||||
);
|
||||
|
||||
$primary: $green;
|
||||
$secondary: $gray-700;
|
||||
$success: $green;
|
||||
$dark: $gray-300;
|
||||
|
||||
// Writing these maps is necessary for Bootstrap theming:
|
||||
// https://getbootstrap.com/docs/4.6/getting-started/introduction/
|
||||
$theme-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"dark": $dark,
|
||||
);
|
||||
|
||||
$body-color: $gray-300;
|
||||
$body-bg: $gray-900;
|
||||
$link-color: $success;
|
||||
$border-color: rgba($body-color, 0.25);
|
||||
$mark-bg: #333;
|
||||
$text-muted: $gray-600;
|
||||
$yiq-contrasted-threshold: 175;
|
||||
|
|
@ -94,7 +69,6 @@ $input-group-addon-bg: $gray-700;
|
|||
|
||||
$hr-border-color: rgba($body-color, 0.25);
|
||||
|
||||
$table-accent-bg: $gray-800;
|
||||
$table-border-color: $gray-700;
|
||||
|
||||
$custom-file-color: $gray-500;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,3 @@
|
|||
|
||||
$secondary: #c80000;
|
||||
$danger: darken($primary, 24%);
|
||||
|
||||
$theme-colors: (
|
||||
"secondary": $secondary,
|
||||
"danger": $danger,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,58 +1,30 @@
|
|||
@import "./variables";
|
||||
|
||||
// Colors
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #222;
|
||||
|
||||
// Writing these maps is necessary for Bootstrap theming:
|
||||
// https://getbootstrap.com/docs/4.6/getting-started/introduction/
|
||||
$grays: (
|
||||
"gray-200": $gray-200,
|
||||
"gray-600": $gray-600,
|
||||
"gray-700": $gray-700,
|
||||
"gray-800": $gray-800,
|
||||
"gray-900": $gray-900,
|
||||
);
|
||||
|
||||
$blue: #007bff;
|
||||
$indigo: #6610f2;
|
||||
$red: #d8486a;
|
||||
$orange: #f1641e;
|
||||
$green: #00c853;
|
||||
$green: #00a846;
|
||||
$cyan: #02bdc2;
|
||||
|
||||
// Writing these maps is necessary for Bootstrap theming:
|
||||
// https://getbootstrap.com/docs/4.6/getting-started/introduction/
|
||||
$colors: (
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"cyan": $cyan,
|
||||
"green": $green,
|
||||
);
|
||||
|
||||
$primary: $orange;
|
||||
$secondary: $green;
|
||||
$success: $indigo;
|
||||
$info: $blue;
|
||||
$danger: darken($primary, 25%);
|
||||
|
||||
// Writing these maps is necessary for Bootstrap theming:
|
||||
// https://getbootstrap.com/docs/4.6/getting-started/introduction/
|
||||
$theme-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"danger": $danger,
|
||||
);
|
||||
|
||||
$body-color: $gray-700;
|
||||
$body-bg: #fff;
|
||||
$link-color: $primary;
|
||||
$border-color: $gray-700;
|
||||
$border-color: rgba($body-color, 0.25);
|
||||
$mark-bg: rgb(255, 252, 239);
|
||||
$headings-color: $gray-700;
|
||||
|
||||
|
|
|
|||
6
src/assets/css/themes/_variables.scss
Normal file
6
src/assets/css/themes/_variables.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
$link-decoration: none;
|
||||
$min-contrast-ratio: 3;
|
||||
|
||||
$container-max-widths: (
|
||||
lg: 1140px,
|
||||
);
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,2 +1,2 @@
|
|||
@import "variables.darkly-red";
|
||||
@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,2 +1,2 @@
|
|||
@import "variables.darkly";
|
||||
@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,2 +1,2 @@
|
|||
@import "variables.litely-red";
|
||||
@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,2 +1,2 @@
|
|||
@import "variables.litely";
|
||||
@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
|
||||
@import "../../../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class Footer extends Component<FooterProps, any> {
|
|||
return (
|
||||
<footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
|
||||
<div className="navbar-collapse">
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<ul className="navbar-nav ms-auto">
|
||||
{this.props.site?.version !== VERSION && (
|
||||
<li className="nav-item">
|
||||
<span className="nav-link">UI: {VERSION}</span>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
id="navTitle"
|
||||
to="/"
|
||||
title={siteView?.site.description ?? siteView?.site.name}
|
||||
className="d-flex align-items-center navbar-brand mr-md-3"
|
||||
className="d-flex align-items-center navbar-brand me-md-3"
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
{siteView?.site.icon && showAvatars() && (
|
||||
|
|
@ -102,7 +102,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
{siteView?.site.name}
|
||||
</NavLink>
|
||||
{person && (
|
||||
<ul className="navbar-nav d-flex flex-row ml-auto d-md-none">
|
||||
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
|
||||
<li id="navMessages" className="nav-item nav-item-icon">
|
||||
<NavLink
|
||||
to="/inbox"
|
||||
|
|
@ -115,7 +115,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
>
|
||||
<Icon icon="bell" />
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -134,7 +134,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
>
|
||||
<Icon icon="shield" />
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -154,7 +154,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
>
|
||||
<Icon icon="clipboard" />
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -181,7 +181,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
id="navbarDropdown"
|
||||
ref={this.mobileMenuRef}
|
||||
>
|
||||
<ul id="navbarLinks" className="mr-auto navbar-nav">
|
||||
<ul id="navbarLinks" className="me-auto navbar-nav">
|
||||
<li className="nav-item">
|
||||
<NavLink
|
||||
to="/communities"
|
||||
|
|
@ -228,7 +228,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
href={donateLemmyUrl}
|
||||
>
|
||||
<Icon icon="heart" classes="small" />
|
||||
<span className="d-inline ml-1 d-md-none ml-md-0">
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("support_lemmy")}
|
||||
</span>
|
||||
</a>
|
||||
|
|
@ -243,7 +243,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<span className="d-inline ml-1 d-md-none ml-md-0">
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("search")}
|
||||
</span>
|
||||
</NavLink>
|
||||
|
|
@ -257,7 +257,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
<span className="d-inline ml-1 d-md-none ml-md-0">
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("admin_settings")}
|
||||
</span>
|
||||
</NavLink>
|
||||
|
|
@ -276,14 +276,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
<span className="badge badge-light d-inline ml-1 d-md-none ml-md-0">
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
formattedCount: numToSI(this.unreadInboxCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadInboxCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadInboxCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -301,14 +301,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
<span className="badge badge-light d-inline ml-1 d-md-none ml-md-0">
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
formattedCount: numToSI(this.unreadReportCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadReportCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadReportCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -327,14 +327,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
<span className="badge badge-light d-inline ml-1 d-md-none ml-md-0">
|
||||
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("unread_registration_applications", {
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
})}
|
||||
</span>
|
||||
{this.unreadApplicationCount > 0 && (
|
||||
<span className="mx-1 badge badge-light">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{numToSI(this.unreadApplicationCount)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -365,7 +365,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
title={i18n.t("profile")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="user" classes="mr-1" />
|
||||
<Icon icon="user" classes="me-1" />
|
||||
{i18n.t("profile")}
|
||||
</NavLink>
|
||||
</li>
|
||||
|
|
@ -376,7 +376,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
title={i18n.t("settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" classes="mr-1" />
|
||||
<Icon icon="settings" classes="me-1" />
|
||||
{i18n.t("settings")}
|
||||
</NavLink>
|
||||
</li>
|
||||
|
|
@ -388,7 +388,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
className="dropdown-item btn btn-link px-2"
|
||||
onClick={linkEvent(this, handleLogOut)}
|
||||
>
|
||||
<Icon icon="log-out" classes="mr-1" />
|
||||
<Icon icon="log-out" classes="me-1" />
|
||||
{i18n.t("logout")}
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
|
|||
/>
|
||||
) : (
|
||||
<div className="alert alert-warning" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
<T i18nKey="must_login" class="d-inline">
|
||||
#
|
||||
<Link className="alert-link" to="/login">
|
||||
|
|
|
|||
|
|
@ -293,12 +293,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
>
|
||||
<div
|
||||
className={classNames({
|
||||
"ml-2": !this.props.noIndent,
|
||||
"ms-2": !this.props.noIndent,
|
||||
})}
|
||||
>
|
||||
<div className="d-flex flex-wrap align-items-center text-muted small">
|
||||
<button
|
||||
className="btn btn-sm text-muted mr-2"
|
||||
className="btn btn-sm text-muted me-2"
|
||||
onClick={linkEvent(this, this.handleCommentCollapse)}
|
||||
aria-label={this.expandText}
|
||||
data-tippy-content={this.expandText}
|
||||
|
|
@ -308,29 +308,29 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
classes="icon-inline"
|
||||
/>
|
||||
</button>
|
||||
<span className="mr-2">
|
||||
<span className="me-2">
|
||||
<PersonListing person={cv.creator} />
|
||||
</span>
|
||||
{cv.comment.distinguished && (
|
||||
<Icon icon="shield" inline classes={`text-danger mr-2`} />
|
||||
<Icon icon="shield" inline classes={`text-danger me-2`} />
|
||||
)}
|
||||
{this.isPostCreator && (
|
||||
<div className="badge badge-light d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("creator")}
|
||||
</div>
|
||||
)}
|
||||
{isMod_ && (
|
||||
<div className="badge d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("mod")}
|
||||
</div>
|
||||
)}
|
||||
{isAdmin_ && (
|
||||
<div className="badge d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("admin")}
|
||||
</div>
|
||||
)}
|
||||
{cv.creator.bot_account && (
|
||||
<div className="badge d-none d-sm-inline mr-2">
|
||||
<div className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{i18n.t("bot_account").toLowerCase()}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -339,14 +339,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<span className="mx-1">{i18n.t("to")}</span>
|
||||
<CommunityLink community={cv.community} />
|
||||
<span className="mx-2">•</span>
|
||||
<Link className="mr-2" to={`/post/${cv.post.id}`}>
|
||||
<Link className="me-2" to={`/post/${cv.post.id}`}>
|
||||
{cv.post.name}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{this.linkBtn(true)}
|
||||
{cv.comment.language_id !== 0 && (
|
||||
<span className="badge d-none d-sm-inline mr-2">
|
||||
<span className="badge text-bg-light d-none d-sm-inline me-2">
|
||||
{
|
||||
this.props.allLanguages.find(
|
||||
lang => lang.id === cv.comment.language_id
|
||||
|
|
@ -355,7 +355,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</span>
|
||||
)}
|
||||
{/* This is an expanding spacer for mobile */}
|
||||
<div className="mr-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
|
||||
<div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
|
||||
{showScores() && (
|
||||
<>
|
||||
<a
|
||||
|
|
@ -367,7 +367,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<Spinner />
|
||||
) : (
|
||||
<span
|
||||
className="mr-1 font-weight-bold"
|
||||
className="me-1 font-weight-bold"
|
||||
aria-label={i18n.t("number_of_points", {
|
||||
count: Number(this.commentView.counts.score),
|
||||
formattedCount: numToSI(
|
||||
|
|
@ -379,7 +379,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</span>
|
||||
)}
|
||||
</a>
|
||||
<span className="mr-1">•</span>
|
||||
<span className="me-1">•</span>
|
||||
</>
|
||||
)}
|
||||
<span>
|
||||
|
|
@ -470,7 +470,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{showScores() &&
|
||||
this.commentView.counts.upvotes !==
|
||||
this.commentView.counts.score && (
|
||||
<span className="ml-1">
|
||||
<span className="ms-1">
|
||||
{numToSI(this.commentView.counts.upvotes)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -497,7 +497,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{showScores() &&
|
||||
this.commentView.counts.upvotes !==
|
||||
this.commentView.counts.score && (
|
||||
<span className="ml-1">
|
||||
<span className="ms-1">
|
||||
{numToSI(this.commentView.counts.downvotes)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -950,7 +950,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</article>
|
||||
{showMoreChildren && (
|
||||
<div
|
||||
className={classNames("details ml-1 comment-node py-2", {
|
||||
className={classNames("details ms-1 comment-node py-2", {
|
||||
"border-top border-light": !this.props.noBorder,
|
||||
})}
|
||||
style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
|
||||
|
|
@ -982,7 +982,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
onSubmit={linkEvent(this, this.handleRemoveComment)}
|
||||
>
|
||||
<label
|
||||
className="sr-only"
|
||||
className="visually-hidden"
|
||||
htmlFor={`mod-remove-reason-${cv.comment.id}`}
|
||||
>
|
||||
{i18n.t("reason")}
|
||||
|
|
@ -990,7 +990,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<input
|
||||
type="text"
|
||||
id={`mod-remove-reason-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.removeReason}
|
||||
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
|
||||
|
|
@ -1010,7 +1010,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
onSubmit={linkEvent(this, this.handleReportComment)}
|
||||
>
|
||||
<label
|
||||
className="sr-only"
|
||||
className="visually-hidden"
|
||||
htmlFor={`report-reason-${cv.comment.id}`}
|
||||
>
|
||||
{i18n.t("reason")}
|
||||
|
|
@ -1019,7 +1019,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
type="text"
|
||||
required
|
||||
id={`report-reason-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.reportReason}
|
||||
onInput={linkEvent(this, this.handleReportReasonChange)}
|
||||
|
|
@ -1035,7 +1035,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
)}
|
||||
{this.state.showBanDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
<label
|
||||
className="col-form-label"
|
||||
htmlFor={`mod-ban-reason-${cv.comment.id}`}
|
||||
|
|
@ -1045,7 +1045,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<input
|
||||
type="text"
|
||||
id={`mod-ban-reason-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.banReason}
|
||||
onInput={linkEvent(this, this.handleModBanReasonChange)}
|
||||
|
|
@ -1059,12 +1059,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
<input
|
||||
type="number"
|
||||
id={`mod-ban-expires-${cv.comment.id}`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("number_of_days")}
|
||||
value={this.state.banExpireDays}
|
||||
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -1084,11 +1084,11 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</div>
|
||||
</div>
|
||||
{/* TODO hold off on expires until later */}
|
||||
{/* <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.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
|
|
@ -1109,7 +1109,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
{this.state.showPurgeDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handlePurgeBothSubmit)}>
|
||||
<PurgeWarning />
|
||||
<label className="sr-only" htmlFor="purge-reason">
|
||||
<label className="visually-hidden" htmlFor="purge-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -1120,7 +1120,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
value={this.state.purgeReason}
|
||||
onInput={linkEvent(this, this.handlePurgeReasonChange)}
|
||||
/>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
{this.state.purgeLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
|
|||
return (
|
||||
<ul className="my-1 list-inline">
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
className="list-inline-item badge text-bg-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),
|
||||
|
|
@ -41,7 +41,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
|
|||
/ {i18n.t("day")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
className="list-inline-item badge text-bg-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),
|
||||
|
|
@ -54,7 +54,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
|
|||
/ {i18n.t("week")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
className="list-inline-item badge text-bg-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),
|
||||
|
|
@ -67,7 +67,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
|
|||
/ {i18n.t("month")}
|
||||
</li>
|
||||
<li
|
||||
className="list-inline-item badge badge-secondary pointer"
|
||||
className="list-inline-item badge text-bg-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),
|
||||
|
|
@ -81,13 +81,13 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
|
|||
</li>
|
||||
{isSiteAggregates(counts) && (
|
||||
<>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_users", {
|
||||
count: Number(counts.users),
|
||||
formattedCount: numToSI(counts.users),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_communities", {
|
||||
count: Number(counts.communities),
|
||||
formattedCount: numToSI(counts.communities),
|
||||
|
|
@ -96,20 +96,20 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
|
|||
</>
|
||||
)}
|
||||
{isCommunityAggregates(counts) && (
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_subscribers", {
|
||||
count: Number(counts.subscribers),
|
||||
formattedCount: numToSI(counts.subscribers),
|
||||
})}
|
||||
</li>
|
||||
)}
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_posts", {
|
||||
count: Number(counts.posts),
|
||||
formattedCount: numToSI(counts.posts),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<li className="list-inline-item badge text-bg-secondary">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(counts.comments),
|
||||
formattedCount: numToSI(counts.comments),
|
||||
|
|
@ -117,7 +117,7 @@ export const Badges = ({ counts, communityId }: BadgesProps) => {
|
|||
</li>
|
||||
<li className="list-inline-item">
|
||||
<Link
|
||||
className="badge badge-primary"
|
||||
className="badge text-bg-primary"
|
||||
to={`/modlog${communityId ? `/${communityId}` : ""}`}
|
||||
>
|
||||
{i18n.t("modlog")}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export class CommentSortSelect extends Component<
|
|||
name={this.id}
|
||||
value={this.state.sort}
|
||||
onChange={linkEvent(this, this.handleSortChange)}
|
||||
className="custom-select w-auto mr-2 mb-2"
|
||||
className="form-select d-inline-block w-auto me-2 mb-2"
|
||||
aria-label={i18n.t("sort_type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class DataTypeSelect extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||
<div className="btn-group btn-group-toggle flex-wrap">
|
||||
<label
|
||||
className={`pointer btn btn-outline-secondary
|
||||
${this.state.type_ == DataType.Post && "active"}
|
||||
|
|
@ -39,6 +39,7 @@ export class DataTypeSelect extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={DataType.Post}
|
||||
checked={this.state.type_ == DataType.Post}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
@ -52,6 +53,7 @@ export class DataTypeSelect extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={DataType.Comment}
|
||||
checked={this.state.type_ == DataType.Comment}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class Icon extends Component<IconProps, any> {
|
|||
<use
|
||||
xlinkHref={`/static/assets/symbols.svg#icon-${this.props.icon}`}
|
||||
></use>
|
||||
<div className="sr-only">
|
||||
<div className="visually-hidden">
|
||||
<title>{this.props.icon}</title>
|
||||
</div>
|
||||
</svg>
|
||||
|
|
@ -60,7 +60,7 @@ export class PurgeWarning extends Component<any, any> {
|
|||
render() {
|
||||
return (
|
||||
<div className="mt-2 alert alert-danger" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
{i18n.t("purge_warning")}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
{i18n.t("undetermined_language_warning")}
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className={classNames(
|
||||
"col-form-label",
|
||||
|
|
@ -73,14 +73,12 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
>
|
||||
{this.selectBtn}
|
||||
{this.props.multiple && (
|
||||
<div className="input-group-append">
|
||||
<button
|
||||
className="input-group-text"
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={linkEvent(this, this.handleDeselectAll)}
|
||||
>
|
||||
<Icon icon="x" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,8 +98,8 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
|
||||
return (
|
||||
<select
|
||||
className={classNames("lang-select-action custom-select w-auto", {
|
||||
"form-control": !this.props.iconVersion,
|
||||
className={classNames("form-select w-auto", {
|
||||
"d-inline-block": !this.props.iconVersion,
|
||||
})}
|
||||
id={this.id}
|
||||
onChange={linkEvent(this, this.handleLanguageChange)}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export class ListingTypeSelect extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||
<div className="btn-group btn-group-toggle flex-wrap">
|
||||
{this.props.showSubscribed && (
|
||||
<label
|
||||
title={i18n.t("subscribed_description")}
|
||||
|
|
@ -51,6 +51,7 @@ export class ListingTypeSelect extends Component<
|
|||
<input
|
||||
id={`${this.id}-subscribed`}
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Subscribed"}
|
||||
checked={this.state.type_ == "Subscribed"}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
@ -69,6 +70,7 @@ export class ListingTypeSelect extends Component<
|
|||
<input
|
||||
id={`${this.id}-local`}
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Local"}
|
||||
checked={this.state.type_ == "Local"}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
@ -86,6 +88,7 @@ export class ListingTypeSelect extends Component<
|
|||
<input
|
||||
id={`${this.id}-all`}
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"All"}
|
||||
checked={this.state.type_ == "All"}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
|
|
|
|||
|
|
@ -144,10 +144,10 @@ export class MarkdownTextArea extends Component<
|
|||
!this.state.submitted
|
||||
}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="rounded bg-light border border-light">
|
||||
<div className="d-flex flex-wrap border-bottom border-light">
|
||||
<div className="rounded bg-light border">
|
||||
<div className="d-flex flex-wrap border-bottom">
|
||||
{this.getFormatButton("bold", this.handleInsertBold)}
|
||||
{this.getFormatButton("italic", this.handleInsertItalic)}
|
||||
{this.getFormatButton("link", this.handleInsertLink)}
|
||||
|
|
@ -248,7 +248,7 @@ export class MarkdownTextArea extends Component<
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
<label className="sr-only" htmlFor={this.id}>
|
||||
<label className="visually-hidden" htmlFor={this.id}>
|
||||
{i18n.t("body")}
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -274,7 +274,7 @@ export class MarkdownTextArea extends Component<
|
|||
{this.props.buttonTitle && (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-secondary ml-2"
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
disabled={this.isDisabled}
|
||||
>
|
||||
{this.state.loading ? (
|
||||
|
|
@ -287,7 +287,7 @@ export class MarkdownTextArea extends Component<
|
|||
{this.props.replyType && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary ml-2"
|
||||
className="btn btn-sm btn-secondary ms-2"
|
||||
onClick={linkEvent(this, this.handleReplyCancel)}
|
||||
>
|
||||
{i18n.t("cancel")}
|
||||
|
|
@ -295,7 +295,7 @@ export class MarkdownTextArea extends Component<
|
|||
)}
|
||||
{this.state.content && (
|
||||
<button
|
||||
className={`btn btn-sm btn-secondary ml-2 ${
|
||||
className={`btn btn-sm btn-secondary ms-2 ${
|
||||
this.state.previewMode && "active"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
|||
data-tippy-content={this.createdAndModifiedTimes()}
|
||||
className="font-italics pointer unselectable"
|
||||
>
|
||||
<Icon icon="edit-2" classes="icon-inline mr-1" />
|
||||
<Icon icon="edit-2" classes="icon-inline me-1" />
|
||||
{moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export class Paginator extends Component<PaginatorProps, any> {
|
|||
return (
|
||||
<div className="my-2">
|
||||
<button
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.page == 1}
|
||||
onClick={linkEvent(this, this.handlePrev)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
|
|||
"img-expanded slight-radius":
|
||||
!this.props.thumbnail && !this.props.icon,
|
||||
"img-blur": this.props.thumbnail && this.props.nsfw,
|
||||
"rounded-circle img-cover img-icon mr-2": this.props.icon,
|
||||
"ml-2 mb-0 rounded-circle img-cover avatar-overlay":
|
||||
"rounded-circle img-cover img-icon me-2": this.props.icon,
|
||||
"ms-2 mb-0 rounded-circle img-cover avatar-overlay":
|
||||
this.props.iconOverlay,
|
||||
"avatar-pushup": this.props.pushup,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export class RegistrationApplication extends Component<
|
|||
)}
|
||||
|
||||
{this.state.denyExpanded && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
{i18n.t("deny_reason")}
|
||||
</label>
|
||||
|
|
@ -113,7 +113,7 @@ export class RegistrationApplication extends Component<
|
|||
)}
|
||||
{(!ra.admin_id || (ra.admin_id && !accepted)) && (
|
||||
<button
|
||||
className="btn btn-secondary mr-2 my-2"
|
||||
className="btn btn-secondary me-2 my-2"
|
||||
onClick={linkEvent(this, this.handleApprove)}
|
||||
aria-label={i18n.t("approve")}
|
||||
>
|
||||
|
|
@ -122,7 +122,7 @@ export class RegistrationApplication extends Component<
|
|||
)}
|
||||
{(!ra.admin_id || (ra.admin_id && accepted)) && (
|
||||
<button
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
onClick={linkEvent(this, this.handleDeny)}
|
||||
aria-label={i18n.t("deny")}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export class SearchableSelect extends Component<
|
|||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
className="custom-select text-start"
|
||||
className="form-select d-inline-block text-start"
|
||||
aria-haspopup="listbox"
|
||||
data-bs-toggle="dropdown"
|
||||
onClick={linkEvent(this, focusSearch)}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
|
|||
name={this.id}
|
||||
value={this.state.sort}
|
||||
onChange={linkEvent(this, this.handleSortChange)}
|
||||
className="custom-select w-auto mr-2 mb-2"
|
||||
className="form-select d-inline-block w-auto me-2"
|
||||
aria-label={i18n.t("sort_type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
|
|||
|
|
@ -112,9 +112,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="float-md-right">{this.searchForm()}</div>
|
||||
</div>
|
||||
<div className="col-md-6">{this.searchForm()}</div>
|
||||
</div>
|
||||
|
||||
<div className="table-responsive">
|
||||
|
|
@ -222,25 +220,29 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
searchForm() {
|
||||
return (
|
||||
<form
|
||||
className="form-inline"
|
||||
className="row justify-content-end"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
id="communities-search"
|
||||
className="form-control mr-2 mb-2"
|
||||
className="form-control me-2 mb-2"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${i18n.t("search")}...`}
|
||||
onInput={linkEvent(this, this.handleSearchChange)}
|
||||
required
|
||||
minLength={3}
|
||||
/>
|
||||
<label className="sr-only" htmlFor="communities-search">
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<label className="visually-hidden" htmlFor="communities-search">
|
||||
{i18n.t("search")}
|
||||
</label>
|
||||
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
||||
<button type="submit" className="btn btn-secondary mb-2">
|
||||
<span>{i18n.t("search")}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,14 +98,14 @@ export class CommunityForm extends Component<
|
|||
}
|
||||
/>
|
||||
{!this.props.community_view && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-sm-2 col-form-label"
|
||||
htmlFor="community-name"
|
||||
>
|
||||
{i18n.t("name")}
|
||||
<span
|
||||
className="position-absolute pointer unselectable ml-2 text-muted"
|
||||
className="position-absolute pointer unselectable ms-2 text-muted"
|
||||
data-tippy-content={i18n.t("name_explain")}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
|
|
@ -126,14 +126,14 @@ export class CommunityForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-sm-2 col-form-label"
|
||||
htmlFor="community-title"
|
||||
>
|
||||
{i18n.t("display_name")}
|
||||
<span
|
||||
className="position-absolute pointer unselectable ml-2 text-muted"
|
||||
className="position-absolute pointer unselectable ms-2 text-muted"
|
||||
data-tippy-content={i18n.t("display_name_explain")}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
|
|
@ -152,8 +152,10 @@ export class CommunityForm extends Component<
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-12 col-sm-2">{i18n.t("icon")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-sm-2 col-form-label">
|
||||
{i18n.t("icon")}
|
||||
</label>
|
||||
<div className="col-12 col-sm-10">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_icon")}
|
||||
|
|
@ -164,8 +166,10 @@ export class CommunityForm extends Component<
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-12 col-sm-2">{i18n.t("banner")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-sm-2 col-form-label">
|
||||
{i18n.t("banner")}
|
||||
</label>
|
||||
<div className="col-12 col-sm-10">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_banner")}
|
||||
|
|
@ -175,7 +179,7 @@ export class CommunityForm extends Component<
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-sm-2 col-form-label" htmlFor={this.id}>
|
||||
{i18n.t("sidebar")}
|
||||
</label>
|
||||
|
|
@ -192,7 +196,7 @@ export class CommunityForm extends Component<
|
|||
</div>
|
||||
|
||||
{this.props.enableNsfw && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-sm-2 pt-0">
|
||||
{i18n.t("nsfw")}
|
||||
</legend>
|
||||
|
|
@ -209,7 +213,7 @@ export class CommunityForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-6 pt-0">
|
||||
{i18n.t("only_mods_can_post_in_community")}
|
||||
</legend>
|
||||
|
|
@ -236,11 +240,11 @@ export class CommunityForm extends Component<
|
|||
multiple={true}
|
||||
onChange={this.handleDiscussionLanguageChange}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
|
|||
|
|
@ -327,7 +327,7 @@ export class Community extends Component<
|
|||
{this.communityInfo(res)}
|
||||
<div className="d-block d-md-none">
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 mr-3"
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
>
|
||||
{i18n.t("sidebar")}{" "}
|
||||
|
|
@ -510,13 +510,13 @@ export class Community extends Component<
|
|||
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<span className="mr-3">
|
||||
<span className="me-3">
|
||||
<DataTypeSelect
|
||||
type_={dataType}
|
||||
onChange={this.handleDataTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="mr-2">
|
||||
<span className="me-2">
|
||||
<SortSelect sort={sort} onChange={this.handleSortChange} />
|
||||
</span>
|
||||
{communityRss && (
|
||||
|
|
|
|||
|
|
@ -172,19 +172,19 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
{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")}
|
||||
</>
|
||||
)}
|
||||
|
|
@ -192,7 +192,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
)}
|
||||
{subscribed === "Pending" && (
|
||||
<button
|
||||
className="btn btn-warning mr-2"
|
||||
className="btn btn-warning me-2"
|
||||
onClick={linkEvent(this, this.handleUnfollowCommunity)}
|
||||
>
|
||||
{this.state.followCommunityLoading ? (
|
||||
|
|
@ -203,17 +203,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
</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>
|
||||
)}
|
||||
|
|
@ -246,7 +246,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
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}`}
|
||||
|
|
@ -259,10 +259,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
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 ? (
|
||||
|
|
@ -272,7 +272,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -280,16 +280,16 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -422,25 +422,25 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
</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 />
|
||||
|
|
@ -453,23 +453,23 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
)}
|
||||
{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 />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
|||
</table>
|
||||
<br />
|
||||
<button
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary me-2"
|
||||
onClick={linkEvent(this, this.handleAddEmojiClick)}
|
||||
>
|
||||
{i18n.t("add_custom_emoji")}
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ const MobileButton = ({
|
|||
onClick: MouseEventHandler<HTMLButtonElement>;
|
||||
}) => (
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 mr-3"
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={onClick}
|
||||
>
|
||||
{i18n.t(textKey)}{" "}
|
||||
|
|
@ -209,7 +209,7 @@ const LinkButton = ({
|
|||
path: string;
|
||||
translationKey: NoOptionI18nKeys;
|
||||
}) => (
|
||||
<Link className="btn btn-secondary btn-block" to={path}>
|
||||
<Link className="btn btn-secondary d-block" to={path}>
|
||||
{i18n.t(translationKey)}
|
||||
</Link>
|
||||
);
|
||||
|
|
@ -734,25 +734,25 @@ export class Home extends Component<any, HomeState> {
|
|||
const { listingType, dataType, sort } = getHomeQueryParams();
|
||||
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<span className="mr-3">
|
||||
<div className="row align-items-center mb-3 g-3">
|
||||
<div className="col-auto">
|
||||
<DataTypeSelect
|
||||
type_={dataType}
|
||||
onChange={this.handleDataTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="mr-3">
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<ListingTypeSelect
|
||||
type_={listingType}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
showSubscribed
|
||||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="mr-2">
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<SortSelect sort={sort} onChange={this.handleSortChange} />
|
||||
</span>
|
||||
{getRss(listingType)}
|
||||
</div>
|
||||
<div className="col-auto ps-0">{getRss(listingType)}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export class Login extends Component<any, State> {
|
|||
<div>
|
||||
<form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
|
||||
<h5>{i18n.t("login")}</h5>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="login-email-or-username"
|
||||
|
|
@ -87,7 +87,7 @@ export class Login extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="login-password">
|
||||
{i18n.t("password")}
|
||||
</label>
|
||||
|
|
@ -117,7 +117,7 @@ export class Login extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
{this.state.showTotp && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-6 col-form-label"
|
||||
htmlFor="login-totp-token"
|
||||
|
|
@ -138,7 +138,7 @@ export class Login extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.loginRes.state == "loading" ? (
|
||||
|
|
|
|||
|
|
@ -51,30 +51,30 @@ function RateLimits({
|
|||
rateLimitValue,
|
||||
}: RateLimitsProps) {
|
||||
return (
|
||||
<div className="form-group row">
|
||||
<label className="col-12 col-form-label" htmlFor="rate-limit">
|
||||
{i18n.t("rate_limit")}
|
||||
</label>
|
||||
<div className="mb-3 row">
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
|
||||
<input
|
||||
type="number"
|
||||
id="rate-limit"
|
||||
className="form-control col-12"
|
||||
className="form-control"
|
||||
min={0}
|
||||
value={rateLimitValue}
|
||||
onInput={handleRateLimit}
|
||||
/>
|
||||
<label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
|
||||
{i18n.t("per_second")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="rate-limit-per-second">{i18n.t("per_second")}</label>
|
||||
<input
|
||||
type="number"
|
||||
id="rate-limit-per-second"
|
||||
className="form-control col-12"
|
||||
className="form-control"
|
||||
min={0}
|
||||
value={rateLimitPerSecondValue}
|
||||
onInput={handleRateLimitPerSecond}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -157,11 +157,10 @@ export default class RateLimitsForm extends Component<
|
|||
),
|
||||
}))}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="col-12">
|
||||
<div className="col-12 mb-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
@ -171,7 +170,6 @@ export default class RateLimitsForm extends Component<
|
|||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export class Setup extends Component<any, State> {
|
|||
return (
|
||||
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
|
||||
<h5>{i18n.t("setup_admin")}</h5>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="username">
|
||||
{i18n.t("username")}
|
||||
</label>
|
||||
|
|
@ -103,7 +103,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="email">
|
||||
{i18n.t("email")}
|
||||
</label>
|
||||
|
|
@ -120,7 +120,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="password">
|
||||
{i18n.t("password")}
|
||||
</label>
|
||||
|
|
@ -138,7 +138,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="verify-password">
|
||||
{i18n.t("verify_password")}
|
||||
</label>
|
||||
|
|
@ -156,7 +156,7 @@ export class Setup extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.registerRes.state == "loading" ? (
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ export class Signup extends Component<any, State> {
|
|||
<h5>{this.titleName(siteView)}</h5>
|
||||
|
||||
{this.isLemmyMl && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="mt-2 mb-0 alert alert-warning" role="alert">
|
||||
<T i18nKey="lemmy_ml_registration_message">
|
||||
#<a href={joinLemmyUrl}>#</a>
|
||||
|
|
@ -157,7 +157,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="register-username"
|
||||
|
|
@ -180,7 +180,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="register-email">
|
||||
{i18n.t("email")}
|
||||
</label>
|
||||
|
|
@ -204,14 +204,14 @@ export class Signup extends Component<any, State> {
|
|||
this.state.form.email &&
|
||||
!validEmail(this.state.form.email) && (
|
||||
<div className="mt-2 mb-0 alert alert-warning" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
{i18n.t("no_password_reset")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="register-password"
|
||||
|
|
@ -238,7 +238,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="register-verify-password"
|
||||
|
|
@ -261,10 +261,10 @@ export class Signup extends Component<any, State> {
|
|||
|
||||
{siteView.local_site.registration_mode == "RequireApplication" && (
|
||||
<>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="offset-sm-2 col-sm-10">
|
||||
<div className="mt-2 alert alert-warning" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline mr-2" />
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
{i18n.t("fill_out_application")}
|
||||
</div>
|
||||
{siteView.local_site.application_question && (
|
||||
|
|
@ -278,7 +278,7 @@ export class Signup extends Component<any, State> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-2 col-form-label"
|
||||
htmlFor="application_answer"
|
||||
|
|
@ -298,7 +298,7 @@ export class Signup extends Component<any, State> {
|
|||
</>
|
||||
)}
|
||||
{this.renderCaptcha()}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -324,7 +324,7 @@ export class Signup extends Component<any, State> {
|
|||
value={this.state.form.honeypot}
|
||||
onInput={linkEvent(this, this.handleHoneyPotChange)}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.registerRes.state == "loading" ? (
|
||||
|
|
@ -346,9 +346,9 @@ export class Signup extends Component<any, State> {
|
|||
case "success": {
|
||||
const res = this.state.captchaRes.data;
|
||||
return (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2" htmlFor="register-captcha">
|
||||
<span className="mr-2">{i18n.t("enter_code")}</span>
|
||||
<span className="me-2">{i18n.t("enter_code")}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
|
|
@ -391,7 +391,7 @@ export class Signup extends Component<any, State> {
|
|||
/>
|
||||
{captchaRes.wav && (
|
||||
<button
|
||||
className="rounded-bottom btn btn-sm btn-secondary btn-block"
|
||||
className="rounded-bottom btn btn-sm btn-secondary d-block"
|
||||
style="border-top-right-radius: 0; border-top-left-radius: 0;"
|
||||
title={i18n.t("play_captcha_audio")}
|
||||
onClick={linkEvent(this, this.handleCaptchaPlay)}
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
? capitalizeFirstLetter(i18n.t("edit"))
|
||||
: capitalizeFirstLetter(i18n.t("setup"))
|
||||
} ${i18n.t("your_site")}`}</h5>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label" htmlFor="create-site-name">
|
||||
{i18n.t("name")}
|
||||
</label>
|
||||
|
|
@ -156,8 +156,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="mr-2">{i18n.t("icon")}</label>
|
||||
<div className="input-group mb-3">
|
||||
<label className="me-2 col-form-label">{i18n.t("icon")}</label>
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_icon")}
|
||||
imageSrc={this.state.siteForm.icon}
|
||||
|
|
@ -166,8 +166,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
rounded
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="mr-2">{i18n.t("banner")}</label>
|
||||
<div className="input-group mb-3">
|
||||
<label className="me-2 col-form-label">{i18n.t("banner")}</label>
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_banner")}
|
||||
imageSrc={this.state.siteForm.banner}
|
||||
|
|
@ -175,7 +175,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
onRemove={this.handleBannerRemove}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label" htmlFor="site-desc">
|
||||
{i18n.t("description")}
|
||||
</label>
|
||||
|
|
@ -190,7 +190,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
|
||||
<div className="col-12">
|
||||
<MarkdownTextArea
|
||||
|
|
@ -202,7 +202,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label">
|
||||
{i18n.t("legal_information")}
|
||||
</label>
|
||||
|
|
@ -216,7 +216,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -235,7 +235,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -254,10 +254,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-check-label mr-2"
|
||||
className="form-check-label me-2"
|
||||
htmlFor="create-site-registration-mode"
|
||||
>
|
||||
{i18n.t("registration_mode")}
|
||||
|
|
@ -266,7 +266,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
id="create-site-registration-mode"
|
||||
value={this.state.siteForm.registration_mode}
|
||||
onChange={linkEvent(this, this.handleSiteRegistrationModeChange)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option value={"RequireApplication"}>
|
||||
{i18n.t("require_registration_application")}
|
||||
|
|
@ -277,7 +277,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.state.siteForm.registration_mode == "RequireApplication" && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-12 col-form-label">
|
||||
{i18n.t("application_questionnaire")}
|
||||
</label>
|
||||
|
|
@ -292,7 +292,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -314,7 +314,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -336,7 +336,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -358,7 +358,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -377,10 +377,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-check-label mr-2"
|
||||
className="form-check-label me-2"
|
||||
htmlFor="create-site-default-theme"
|
||||
>
|
||||
{i18n.t("theme")}
|
||||
|
|
@ -389,7 +389,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
id="create-site-default-theme"
|
||||
value={this.state.siteForm.default_theme}
|
||||
onChange={linkEvent(this, this.handleSiteDefaultTheme)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option value="browser">{i18n.t("browser_default")}</option>
|
||||
{this.props.themeList?.map(theme => (
|
||||
|
|
@ -401,8 +401,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.props.showLocal && (
|
||||
<form className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("listing_type")}</label>
|
||||
<form className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("listing_type")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<ListingTypeSelect
|
||||
type_={this.state.siteForm.default_post_listing_type ?? "Local"}
|
||||
|
|
@ -413,7 +415,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</form>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -432,7 +434,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -451,7 +453,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-form-label"
|
||||
htmlFor="create-site-slur-filter-regex"
|
||||
|
|
@ -478,7 +480,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
onChange={this.handleDiscussionLanguageChange}
|
||||
showAll
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-form-label"
|
||||
htmlFor="create-site-actor-name"
|
||||
|
|
@ -496,7 +498,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -517,11 +519,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
{this.state.siteForm.federation_enabled && (
|
||||
<>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
{this.federatedInstanceSelect("allowed_instances")}
|
||||
{this.federatedInstanceSelect("blocked_instances")}
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -540,7 +542,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-12 col-form-label"
|
||||
htmlFor="create-site-federation-worker-count"
|
||||
|
|
@ -563,7 +565,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input
|
||||
|
|
@ -583,10 +585,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.state.siteForm.captcha_enabled && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<label
|
||||
className="form-check-label mr-2"
|
||||
className="form-check-label me-2"
|
||||
htmlFor="create-site-captcha-difficulty"
|
||||
>
|
||||
{i18n.t("captcha_difficulty")}
|
||||
|
|
@ -595,7 +597,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
id="create-site-captcha-difficulty"
|
||||
value={this.state.siteForm.captcha_difficulty}
|
||||
onChange={linkEvent(this, this.handleSiteCaptchaDifficulty)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option value="easy">{i18n.t("easy")}</option>
|
||||
<option value="medium">{i18n.t("medium")}</option>
|
||||
|
|
@ -604,11 +606,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
@ -646,7 +648,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm bg-success ml-2"
|
||||
className="btn btn-sm bg-success ms-2"
|
||||
onClick={linkEvent(key, this.handleAddInstance)}
|
||||
style={"width: 2rem; height: 2rem;"}
|
||||
tabIndex={
|
||||
|
|
|
|||
|
|
@ -89,10 +89,10 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
|||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary me-2"
|
||||
onClick={linkEvent(this, this.handleAddTaglineClick)}
|
||||
>
|
||||
{i18n.t("add_tagline")}
|
||||
|
|
@ -100,11 +100,11 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
onClick={linkEvent(this, this.handleSaveClick)}
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
|
|
|
|||
|
|
@ -581,8 +581,8 @@ const Filter = ({
|
|||
options: Choice[];
|
||||
loading: boolean;
|
||||
}) => (
|
||||
<div className="col-sm-6 form-group">
|
||||
<label className="col-form-label" htmlFor={`filter-${filterType}`}>
|
||||
<div className="col-sm-6 mb-3">
|
||||
<label className="mb-2" htmlFor={`filter-${filterType}`}>
|
||||
{i18n.t(`filter_by_${filterType}` as NoOptionI18nKeys)}
|
||||
</label>
|
||||
<SearchableSelect
|
||||
|
|
@ -753,7 +753,7 @@ export class Modlog extends Component<
|
|||
<Icon
|
||||
icon="alert-triangle"
|
||||
inline
|
||||
classes="mr-sm-2 mx-auto d-sm-inline d-block"
|
||||
classes="me-sm-2 mx-auto d-sm-inline d-block"
|
||||
/>
|
||||
<T i18nKey="modlog_content_warning" class="d-inline">
|
||||
#<strong>#</strong>#
|
||||
|
|
@ -770,11 +770,12 @@ export class Modlog extends Component<
|
|||
<span>{i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
)}
|
||||
<div className="form-row">
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="custom-select col-sm-6"
|
||||
className="form-select"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -785,11 +786,15 @@ export class Modlog extends Component<
|
|||
<option value={"ModLockPost"}>Locking Posts</option>
|
||||
<option value={"ModFeaturePost"}>Featuring Posts</option>
|
||||
<option value={"ModRemoveComment"}>Removing Comments</option>
|
||||
<option value={"ModRemoveCommunity"}>Removing Communities</option>
|
||||
<option value={"ModRemoveCommunity"}>
|
||||
Removing Communities
|
||||
</option>
|
||||
<option value={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>Adding Mod to Community</option>
|
||||
<option value={"ModAddCommunity"}>
|
||||
Adding Mod to Community
|
||||
</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
|
|
@ -797,7 +802,8 @@ export class Modlog extends Component<
|
|||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-row mb-2">
|
||||
</div>
|
||||
<div className="row mb-2">
|
||||
<Filter
|
||||
filterType="user"
|
||||
onChange={this.handleUserChange}
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
{inboxRss && (
|
||||
<small>
|
||||
<a href={inboxRss} title="RSS" rel={relTags}>
|
||||
<Icon icon="rss" classes="ml-2 text-muted small" />
|
||||
<Icon icon="rss" classes="ms-2 text-muted small" />
|
||||
</a>
|
||||
<link
|
||||
rel="alternate"
|
||||
|
|
@ -292,6 +292,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.Unread}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.Unread}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -305,6 +306,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.All}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.All}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -325,6 +327,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.All}
|
||||
checked={this.state.messageType == MessageType.All}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -338,6 +341,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.Replies}
|
||||
checked={this.state.messageType == MessageType.Replies}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -351,6 +355,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.Mentions}
|
||||
checked={this.state.messageType == MessageType.Mentions}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -364,6 +369,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.Messages}
|
||||
checked={this.state.messageType == MessageType.Messages}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -377,8 +383,8 @@ export class Inbox extends Component<any, InboxState> {
|
|||
selects() {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="mr-3">{this.messageTypeRadios()}</span>
|
||||
<span className="me-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="me-3">{this.messageTypeRadios()}</span>
|
||||
<CommentSortSelect
|
||||
sort={this.state.sort}
|
||||
onChange={this.handleSortChange}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
passwordChangeForm() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handlePasswordChangeSubmit)}>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="new-password">
|
||||
{i18n.t("new_password")}
|
||||
</label>
|
||||
|
|
@ -74,7 +74,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="verify-password">
|
||||
{i18n.t("verify_password")}
|
||||
</label>
|
||||
|
|
@ -90,7 +90,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button type="submit" className="btn btn-secondary">
|
||||
{this.state.passwordChangeRes.state == "loading" ? (
|
||||
|
|
@ -140,7 +140,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
UserService.Instance.myUserInfo = site.data.my_user;
|
||||
}
|
||||
|
||||
this.props.history.replace("/");
|
||||
i.props.history.replace("/");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -412,6 +412,7 @@ export class Profile extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={view}
|
||||
checked={active}
|
||||
onChange={linkEvent(this, this.handleViewChange)}
|
||||
|
|
@ -429,7 +430,7 @@ export class Profile extends Component<
|
|||
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.viewRadios}</span>
|
||||
<span className="me-3">{this.viewRadios}</span>
|
||||
<SortSelect
|
||||
sort={sort}
|
||||
onChange={this.handleSortChange}
|
||||
|
|
@ -478,22 +479,22 @@ export class Profile extends Component<
|
|||
/>
|
||||
</li>
|
||||
{isBanned(pv.person) && (
|
||||
<li className="list-inline-item badge badge-danger">
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{i18n.t("banned")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.deleted && (
|
||||
<li className="list-inline-item badge badge-danger">
|
||||
<li className="list-inline-item badge text-bg-danger">
|
||||
{i18n.t("deleted")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.admin && (
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("admin")}
|
||||
</li>
|
||||
)}
|
||||
{pv.person.bot_account && (
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("bot_account").toLowerCase()}
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -504,7 +505,7 @@ export class Profile extends Component<
|
|||
{!this.amCurrentUser && UserService.Instance.myUserInfo && (
|
||||
<>
|
||||
<a
|
||||
className={`d-flex align-self-start btn btn-secondary mr-2 ${
|
||||
className={`d-flex align-self-start btn btn-secondary me-2 ${
|
||||
!pv.person.matrix_user_id && "invisible"
|
||||
}`}
|
||||
rel={relTags}
|
||||
|
|
@ -514,7 +515,7 @@ export class Profile extends Component<
|
|||
</a>
|
||||
<Link
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
to={`/create_private_message/${pv.person.id}`}
|
||||
>
|
||||
|
|
@ -523,7 +524,7 @@ export class Profile extends Component<
|
|||
{personBlocked ? (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(
|
||||
pv.person.id,
|
||||
|
|
@ -535,7 +536,7 @@ export class Profile extends Component<
|
|||
) : (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(
|
||||
pv.person.id,
|
||||
|
|
@ -554,7 +555,7 @@ export class Profile extends Component<
|
|||
(!isBanned(pv.person) ? (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(this, this.handleModBanShow)}
|
||||
aria-label={i18n.t("ban")}
|
||||
|
|
@ -564,7 +565,7 @@ export class Profile extends Component<
|
|||
) : (
|
||||
<button
|
||||
className={
|
||||
"d-flex align-self-start btn btn-secondary mr-2"
|
||||
"d-flex align-self-start btn btn-secondary me-2"
|
||||
}
|
||||
onClick={linkEvent(this, this.handleModBanSubmit)}
|
||||
aria-label={i18n.t("unban")}
|
||||
|
|
@ -583,13 +584,13 @@ export class Profile extends Component<
|
|||
)}
|
||||
<div>
|
||||
<ul className="list-inline mb-2">
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("number_of_posts", {
|
||||
count: Number(pv.counts.post_count),
|
||||
formattedCount: numToSI(pv.counts.post_count),
|
||||
})}
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge text-bg-light">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(pv.counts.comment_count),
|
||||
formattedCount: numToSI(pv.counts.comment_count),
|
||||
|
|
@ -607,7 +608,7 @@ export class Profile extends Component<
|
|||
</div>
|
||||
<div className="d-flex align-items-center text-muted mb-2">
|
||||
<Icon icon="cake" />
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
{i18n.t("cake_day_title")}{" "}
|
||||
{moment
|
||||
.utc(pv.person.published)
|
||||
|
|
@ -633,14 +634,14 @@ export class Profile extends Component<
|
|||
return (
|
||||
showBanDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleModBanSubmit)}>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
<label className="col-form-label" htmlFor="profile-ban-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="profile-ban-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.banReason}
|
||||
onInput={linkEvent(this, this.handleModBanReasonChange)}
|
||||
|
|
@ -651,12 +652,12 @@ export class Profile extends Component<
|
|||
<input
|
||||
type="number"
|
||||
id={`mod-ban-expires`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("number_of_days")}
|
||||
value={this.state.banExpireDays}
|
||||
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -676,14 +677,14 @@ export class Profile extends Component<
|
|||
</div>
|
||||
</div>
|
||||
{/* TODO hold off on expires until later */}
|
||||
{/* <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.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
aria-label={i18n.t("cancel")}
|
||||
onClick={linkEvent(this, this.handleModBanSubmitCancel)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -130,6 +130,7 @@ export class RegistrationApplications extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.Unread}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.Unread}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -143,6 +144,7 @@ export class RegistrationApplications extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.All}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.All}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -156,7 +158,7 @@ export class RegistrationApplications extends Component<
|
|||
selects() {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="me-3">{this.unreadOrAllRadios()}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.Unread}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.Unread}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -206,6 +207,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={UnreadOrAll.All}
|
||||
checked={this.state.unreadOrAll == UnreadOrAll.All}
|
||||
onChange={linkEvent(this, this.handleUnreadOrAllChange)}
|
||||
|
|
@ -226,6 +228,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.All}
|
||||
checked={this.state.messageType == MessageType.All}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -239,6 +242,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.CommentReport}
|
||||
checked={this.state.messageType == MessageType.CommentReport}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -252,6 +256,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.PostReport}
|
||||
checked={this.state.messageType == MessageType.PostReport}
|
||||
onChange={linkEvent(this, this.handleMessageTypeChange)}
|
||||
|
|
@ -269,6 +274,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={MessageType.PrivateMessageReport}
|
||||
checked={
|
||||
this.state.messageType == MessageType.PrivateMessageReport
|
||||
|
|
@ -285,8 +291,8 @@ export class Reports extends Component<any, ReportsState> {
|
|||
selects() {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<span className="mr-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="mr-3">{this.messageTypeRadios()}</span>
|
||||
<span className="me-3">{this.unreadOrAllRadios()}</span>
|
||||
<span className="me-3">{this.messageTypeRadios()}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ const Filter = ({
|
|||
onChange: (choice: Choice) => void;
|
||||
loading: boolean;
|
||||
}) => (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-md-4 col-form-label"
|
||||
htmlFor={`block-${filterType}-filter`}
|
||||
|
|
@ -304,7 +304,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
<>
|
||||
<h5>{i18n.t("change_password")}</h5>
|
||||
<form onSubmit={linkEvent(this, this.handleChangePasswordSubmit)}>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-5 col-form-label" htmlFor="user-password">
|
||||
{i18n.t("new_password")}
|
||||
</label>
|
||||
|
|
@ -320,7 +320,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-5 col-form-label"
|
||||
htmlFor="user-verify-password"
|
||||
|
|
@ -339,7 +339,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label
|
||||
className="col-sm-5 col-form-label"
|
||||
htmlFor="user-old-password"
|
||||
|
|
@ -358,8 +358,11 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
||||
<div className="input-group mb-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn d-block btn-secondary me-4 w-100"
|
||||
>
|
||||
{this.state.changePasswordRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
@ -467,11 +470,11 @@ export class Settings extends Component<any, SettingsState> {
|
|||
<>
|
||||
<h5>{i18n.t("settings")}</h5>
|
||||
<form onSubmit={linkEvent(this, this.handleSaveSettingsSubmit)}>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-5 col-form-label" htmlFor="display-name">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="display-name">
|
||||
{i18n.t("display_name")}
|
||||
</label>
|
||||
<div className="col-sm-7">
|
||||
<div className="col-sm-9">
|
||||
<input
|
||||
id="display-name"
|
||||
type="text"
|
||||
|
|
@ -484,7 +487,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="user-bio">
|
||||
{i18n.t("bio")}
|
||||
</label>
|
||||
|
|
@ -499,7 +502,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="user-email">
|
||||
{i18n.t("email")}
|
||||
</label>
|
||||
|
|
@ -515,13 +518,13 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-5 col-form-label" htmlFor="matrix-user-id">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="matrix-user-id">
|
||||
<a href={elementUrl} rel={relTags}>
|
||||
{i18n.t("matrix_user_id")}
|
||||
</a>
|
||||
</label>
|
||||
<div className="col-sm-7">
|
||||
<div className="col-sm-9">
|
||||
<input
|
||||
id="matrix-user-id"
|
||||
type="text"
|
||||
|
|
@ -533,8 +536,10 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("avatar")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("avatar")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_avatar")}
|
||||
|
|
@ -545,8 +550,10 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("banner")}</label>
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("banner")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<ImageUploadForm
|
||||
uploadTitle={i18n.t("upload_banner")}
|
||||
|
|
@ -556,8 +563,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3" htmlFor="user-language">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 form-label" htmlFor="user-language">
|
||||
{i18n.t("interface_language")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
|
|
@ -565,7 +572,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
id="user-language"
|
||||
value={this.state.saveUserSettingsForm.interface_language}
|
||||
onChange={linkEvent(this, this.handleInterfaceLangChange)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{i18n.t("interface_language")}
|
||||
|
|
@ -593,8 +600,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
showSite
|
||||
onChange={this.handleDiscussionLanguageChange}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<label className="col-sm-3" htmlFor="user-theme">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label" htmlFor="user-theme">
|
||||
{i18n.t("theme")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
|
|
@ -602,7 +609,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
id="user-theme"
|
||||
value={this.state.saveUserSettingsForm.theme}
|
||||
onChange={linkEvent(this, this.handleThemeChange)}
|
||||
className="custom-select w-auto"
|
||||
className="form-select d-inline-block w-auto"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{i18n.t("theme")}
|
||||
|
|
@ -616,8 +623,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<form className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("type")}</label>
|
||||
<form className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">{i18n.t("type")}</label>
|
||||
<div className="col-sm-9">
|
||||
<ListingTypeSelect
|
||||
type_={
|
||||
|
|
@ -630,8 +637,10 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</form>
|
||||
<form className="form-group row">
|
||||
<label className="col-sm-3">{i18n.t("sort_type")}</label>
|
||||
<form className="mb-3 row">
|
||||
<label className="col-sm-3 col-form-label">
|
||||
{i18n.t("sort_type")}
|
||||
</label>
|
||||
<div className="col-sm-9">
|
||||
<SortSelect
|
||||
sort={
|
||||
|
|
@ -641,7 +650,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</form>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -655,7 +664,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -669,7 +678,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -683,7 +692,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -697,7 +706,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -714,7 +723,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -731,7 +740,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -748,7 +757,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -772,8 +781,8 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</div>
|
||||
</div>
|
||||
{this.totpSection()}
|
||||
<div className="form-group">
|
||||
<button type="submit" className="btn btn-block btn-secondary mr-4">
|
||||
<div className="input-group mb-3">
|
||||
<button type="submit" className="btn d-block btn-secondary me-4">
|
||||
{this.state.saveRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
@ -782,9 +791,9 @@ export class Settings extends Component<any, SettingsState> {
|
|||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<button
|
||||
className="btn btn-block btn-danger"
|
||||
className="btn d-block btn-danger"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
this.handleDeleteAccountShowConfirmToggle
|
||||
|
|
@ -809,7 +818,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
className="form-control my-2"
|
||||
/>
|
||||
<button
|
||||
className="btn btn-danger mr-4"
|
||||
className="btn btn-danger me-4"
|
||||
disabled={!this.state.deleteAccountForm.password}
|
||||
onClick={linkEvent(this, this.handleDeleteAccount)}
|
||||
>
|
||||
|
|
@ -843,7 +852,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
return (
|
||||
<>
|
||||
{!totpUrl && (
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -866,7 +875,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
{i18n.t("two_factor_link")}
|
||||
</a>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
|
|||
|
|
@ -41,14 +41,14 @@ export class MetadataCard extends Component<
|
|||
{post.embed_title}
|
||||
</a>
|
||||
</h5>
|
||||
<span className="d-inline-block ml-2 mb-2 small text-muted">
|
||||
<span className="d-inline-block ms-2 mb-2 small text-muted">
|
||||
<a
|
||||
className="text-muted font-italic"
|
||||
href={post.url}
|
||||
rel={relTags}
|
||||
>
|
||||
{new URL(post.url).hostname}
|
||||
<Icon icon="external-link" classes="ml-1" />
|
||||
<Icon icon="external-link" classes="ms-1" />
|
||||
</a>
|
||||
</span>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
) && !this.state.submitted
|
||||
}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-url">
|
||||
{i18n.t("url")}
|
||||
</label>
|
||||
|
|
@ -241,7 +241,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
<div>
|
||||
<a
|
||||
href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
|
||||
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
rel={relTags}
|
||||
>
|
||||
archive.org {i18n.t("archive_link")}
|
||||
|
|
@ -250,7 +250,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
|
||||
url
|
||||
)}`}
|
||||
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
rel={relTags}
|
||||
>
|
||||
ghostarchive.org {i18n.t("archive_link")}
|
||||
|
|
@ -259,7 +259,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
|
||||
url
|
||||
)}`}
|
||||
className="mr-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
|
||||
rel={relTags}
|
||||
>
|
||||
archive.today {i18n.t("archive_link")}
|
||||
|
|
@ -277,7 +277,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
aria-label={i18n.t("delete")}
|
||||
data-tippy-content={i18n.t("delete")}
|
||||
>
|
||||
<Icon icon="x" classes="icon-inline mr-1" />
|
||||
<Icon icon="x" classes="icon-inline me-1" />
|
||||
{capitalizeFirstLetter(i18n.t("delete"))}
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -316,7 +316,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-title">
|
||||
{i18n.t("title")}
|
||||
</label>
|
||||
|
|
@ -342,7 +342,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">{i18n.t("body")}</label>
|
||||
<div className="col-sm-10">
|
||||
<MarkdownTextArea
|
||||
|
|
@ -355,7 +355,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</div>
|
||||
</div>
|
||||
{!this.props.post_view && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label" htmlFor="post-community">
|
||||
{i18n.t("community")}
|
||||
</label>
|
||||
|
|
@ -378,7 +378,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
</div>
|
||||
)}
|
||||
{this.props.enableNsfw && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<legend className="col-form-label col-sm-2 pt-0">
|
||||
{i18n.t("nsfw")}
|
||||
</legend>
|
||||
|
|
@ -412,12 +412,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
value={this.state.form.honeypot}
|
||||
onInput={linkEvent(this, this.handleHoneyPotChange)}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<button
|
||||
disabled={!this.state.form.community_id || this.state.loading}
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
>
|
||||
{this.state.loading ? (
|
||||
<Spinner />
|
||||
|
|
|
|||
|
|
@ -374,13 +374,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<PersonListing person={post_view.creator} />
|
||||
|
||||
{this.creatorIsMod_ && (
|
||||
<span className="mx-1 badge">{i18n.t("mod")}</span>
|
||||
<span className="mx-1 badge text-bg-light">{i18n.t("mod")}</span>
|
||||
)}
|
||||
{this.creatorIsAdmin_ && (
|
||||
<span className="mx-1 badge">{i18n.t("admin")}</span>
|
||||
<span className="mx-1 badge text-bg-light">{i18n.t("admin")}</span>
|
||||
)}
|
||||
{post_view.creator.bot_account && (
|
||||
<span className="mx-1 badge">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{i18n.t("bot_account").toLowerCase()}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -392,7 +392,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
</li>
|
||||
{post_view.post.language_id !== 0 && (
|
||||
<span className="mx-1 badge">
|
||||
<span className="mx-1 badge text-bg-light">
|
||||
{
|
||||
this.props.allLanguages.find(
|
||||
lang => lang.id === post_view.post.language_id
|
||||
|
|
@ -415,7 +415,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
voteBar() {
|
||||
return (
|
||||
<div className={`vote-bar col-1 pr-0 small text-center`}>
|
||||
<div className={`vote-bar col-1 pe-0 small text-center`}>
|
||||
<button
|
||||
className={`btn-animate btn btn-link p-0 ${
|
||||
this.postView.my_vote == 1 ? "text-info" : "text-muted"
|
||||
|
|
@ -433,7 +433,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
{showScores() ? (
|
||||
<div
|
||||
className={`unselectable pointer font-weight-bold text-muted px-1 post-score`}
|
||||
className={`unselectable pointer text-muted px-1 post-score`}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
>
|
||||
{numToSI(this.postView.counts.score)}
|
||||
|
|
@ -509,7 +509,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{(url && isImage(url)) ||
|
||||
(post.thumbnail_url && (
|
||||
<button
|
||||
className="btn btn-link text-monospace text-muted small d-inline-block"
|
||||
className="btn btn-sm text-monospace text-muted d-inline-block"
|
||||
data-tippy-content={i18n.t("expand_here")}
|
||||
onClick={linkEvent(this, this.handleImageExpandClick)}
|
||||
>
|
||||
|
|
@ -522,13 +522,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
))}
|
||||
{post.removed && (
|
||||
<small className="ml-2 badge text-bg-secondary">
|
||||
<small className="ms-2 badge text-bg-secondary">
|
||||
{i18n.t("removed")}
|
||||
</small>
|
||||
)}
|
||||
{post.deleted && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("deleted")}
|
||||
>
|
||||
<Icon icon="trash" classes="icon-inline text-danger" />
|
||||
|
|
@ -536,7 +536,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{post.locked && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("locked")}
|
||||
>
|
||||
<Icon icon="lock" classes="icon-inline text-danger" />
|
||||
|
|
@ -544,7 +544,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{post.featured_community && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured_in_community")}
|
||||
aria-label={i18n.t("featured_in_community")}
|
||||
>
|
||||
|
|
@ -553,7 +553,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{post.featured_local && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured_in_local")}
|
||||
aria-label={i18n.t("featured_in_local")}
|
||||
>
|
||||
|
|
@ -561,7 +561,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</small>
|
||||
)}
|
||||
{post.nsfw && (
|
||||
<small className="ml-2 badge text-bg-danger">
|
||||
<small className="ms-2 badge text-bg-danger">
|
||||
{i18n.t("nsfw")}
|
||||
</small>
|
||||
)}
|
||||
|
|
@ -596,9 +596,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
return dupes && dupes.length > 0 ? (
|
||||
<ul className="list-inline mb-1 small text-muted">
|
||||
<>
|
||||
<li className="list-inline-item mr-2">{i18n.t("cross_posted_to")}</li>
|
||||
<li className="list-inline-item me-2">{i18n.t("cross_posted_to")}</li>
|
||||
{dupes.map(pv => (
|
||||
<li key={pv.post.id} className="list-inline-item mr-2">
|
||||
<li key={pv.post.id} className="list-inline-item me-2">
|
||||
<Link to={`/post/${pv.post.id}`}>
|
||||
{pv.community.local
|
||||
? pv.community.name
|
||||
|
|
@ -617,11 +617,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post = this.postView.post;
|
||||
|
||||
return (
|
||||
<div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold">
|
||||
<div className="d-flex align-items-center justify-content-start flex-wrap text-muted">
|
||||
{this.commentsButton}
|
||||
{canShare() && (
|
||||
<button
|
||||
className="btn btn-sm btn-link"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleShare)}
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -630,7 +630,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{!post.local && (
|
||||
<a
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
title={i18n.t("link")}
|
||||
href={post.ap_id}
|
||||
>
|
||||
|
|
@ -651,14 +651,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
data-tippy-content={body && mdNoImages.render(body)}
|
||||
data-tippy-allowHtml={true}
|
||||
onClick={linkEvent(this, this.handleShowBody)}
|
||||
>
|
||||
<Icon
|
||||
icon="book-open"
|
||||
classes={classNames("icon-inline mr-1", {
|
||||
classes={classNames("icon-inline me-1", {
|
||||
"text-success": this.state.showBody,
|
||||
})}
|
||||
/>
|
||||
|
|
@ -688,7 +688,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
<div className="dropdown">
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
|
||||
className="btn btn-sm btn-animate text-muted py-0 dropdown-toggle"
|
||||
onClick={linkEvent(this, this.handleShowAdvanced)}
|
||||
data-tippy-content={i18n.t("more")}
|
||||
data-bs-toggle="dropdown"
|
||||
|
|
@ -736,15 +736,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post_view = this.postView;
|
||||
return (
|
||||
<Link
|
||||
className="btn btn-link text-muted pl-0 text-muted"
|
||||
className="btn btn-link text-muted ps-0 text-muted"
|
||||
title={i18n.t("number_of_comments", {
|
||||
count: Number(post_view.counts.comments),
|
||||
formattedCount: Number(post_view.counts.comments),
|
||||
})}
|
||||
to={`/post/${post_view.post.id}?scrollToComments=true`}
|
||||
>
|
||||
<Icon icon="message-square" classes="mr-1" inline />
|
||||
<span className="mr-2">
|
||||
<Icon icon="message-square" classes="me-1" inline />
|
||||
<span className="me-2">
|
||||
{i18n.t("number_of_comments", {
|
||||
count: Number(post_view.counts.comments),
|
||||
formattedCount: numToSI(post_view.counts.comments),
|
||||
|
|
@ -789,7 +789,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
<Icon icon="arrow-up1" classes="icon-inline small" />
|
||||
{showScores() && (
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
{numToSI(this.postView.counts.upvotes)}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -798,7 +798,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
className={`ml-2 btn-animate btn py-0 px-1 ${
|
||||
className={`ms-2 btn-animate btn py-0 px-1 ${
|
||||
this.postView.my_vote === -1 ? "text-danger" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handleDownvote)}
|
||||
|
|
@ -813,7 +813,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<Icon icon="arrow-down1" classes="icon-inline small" />
|
||||
{showScores() && (
|
||||
<span
|
||||
className={classNames("ml-2", {
|
||||
className={classNames("ms-2", {
|
||||
invisible: this.postView.counts.downvotes === 0,
|
||||
})}
|
||||
>
|
||||
|
|
@ -834,7 +834,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const label = saved ? i18n.t("unsave") : i18n.t("save");
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleSavePostClick)}
|
||||
data-tippy-content={label}
|
||||
aria-label={label}
|
||||
|
|
@ -855,7 +855,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get crossPostButton() {
|
||||
return (
|
||||
<Link
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
to={{
|
||||
/* Empty string properties are required to satisfy type*/
|
||||
pathname: "/create_post",
|
||||
|
|
@ -880,7 +880,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
onClick={linkEvent(this, this.handleShowReportDialog)}
|
||||
aria-label={i18n.t("show_report_dialog")}
|
||||
>
|
||||
<Icon classes="mr-1" icon="flag" inline />
|
||||
<Icon classes="me-1" icon="flag" inline />
|
||||
{i18n.t("create_report")}
|
||||
</button>
|
||||
);
|
||||
|
|
@ -896,7 +896,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{this.state.blockLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon classes="mr-1" icon="slash" inline />
|
||||
<Icon classes="me-1" icon="slash" inline />
|
||||
)}
|
||||
{i18n.t("block_user")}
|
||||
</button>
|
||||
|
|
@ -910,7 +910,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
onClick={linkEvent(this, this.handleEditClick)}
|
||||
aria-label={i18n.t("edit")}
|
||||
>
|
||||
<Icon classes="mr-1" icon="edit" inline />
|
||||
<Icon classes="me-1" icon="edit" inline />
|
||||
{i18n.t("edit")}
|
||||
</button>
|
||||
);
|
||||
|
|
@ -931,7 +931,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
<Icon
|
||||
icon="trash"
|
||||
classes={classNames("mr-1", { "text-danger": deleted })}
|
||||
classes={classNames("me-1", { "text-danger": deleted })}
|
||||
inline
|
||||
/>
|
||||
{label}
|
||||
|
|
@ -944,7 +944,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get viewSourceButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleViewSource)}
|
||||
data-tippy-content={i18n.t("view_source")}
|
||||
aria-label={i18n.t("view_source")}
|
||||
|
|
@ -973,7 +973,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
<Icon
|
||||
icon="lock"
|
||||
classes={classNames("mr-1", { "text-danger": locked })}
|
||||
classes={classNames("me-1", { "text-danger": locked })}
|
||||
inline
|
||||
/>
|
||||
{label}
|
||||
|
|
@ -1008,7 +1008,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
<Icon
|
||||
icon="pin"
|
||||
classes={classNames("mr-1", {
|
||||
classes={classNames("me-1", {
|
||||
"text-success": featuredCommunity,
|
||||
})}
|
||||
inline
|
||||
|
|
@ -1032,7 +1032,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<>
|
||||
<Icon
|
||||
icon="pin"
|
||||
classes={classNames("mr-1", {
|
||||
classes={classNames("me-1", {
|
||||
"text-success": featuredLocal,
|
||||
})}
|
||||
inline
|
||||
|
|
@ -1143,13 +1143,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
) : (
|
||||
<>
|
||||
<button
|
||||
className="d-inline-block mr-1 btn btn-link btn-animate text-muted py-0"
|
||||
className="d-inline-block me-1 btn btn-link btn-animate text-muted py-0"
|
||||
aria-label={i18n.t("are_you_sure")}
|
||||
>
|
||||
{i18n.t("are_you_sure")}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0 d-inline-block mr-1"
|
||||
className="btn btn-link btn-animate text-muted py-0 d-inline-block me-1"
|
||||
aria-label={i18n.t("yes")}
|
||||
onClick={linkEvent(this, this.handleTransferCommunity)}
|
||||
>
|
||||
|
|
@ -1248,13 +1248,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleModRemoveSubmit)}
|
||||
>
|
||||
<label className="sr-only" htmlFor="post-listing-remove-reason">
|
||||
<label
|
||||
className="visually-hidden"
|
||||
htmlFor="post-listing-remove-reason"
|
||||
>
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="post-listing-remove-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.removeReason}
|
||||
onInput={linkEvent(this, this.handleModRemoveReasonChange)}
|
||||
|
|
@ -1270,7 +1273,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{this.state.showBanDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
|
||||
<div className="form-group row col-12">
|
||||
<div className="mb-3 row col-12">
|
||||
<label
|
||||
className="col-form-label"
|
||||
htmlFor="post-listing-ban-reason"
|
||||
|
|
@ -1280,7 +1283,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<input
|
||||
type="text"
|
||||
id="post-listing-ban-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
value={this.state.banReason}
|
||||
onInput={linkEvent(this, this.handleModBanReasonChange)}
|
||||
|
|
@ -1291,12 +1294,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<input
|
||||
type="number"
|
||||
id={`mod-ban-expires`}
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("number_of_days")}
|
||||
value={this.state.banExpireDays}
|
||||
onInput={linkEvent(this, this.handleModBanExpireDaysChange)}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -1316,11 +1319,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</div>
|
||||
</div>
|
||||
{/* TODO hold off on expires until later */}
|
||||
{/* <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.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* <input type="date" class="form-control me-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary"
|
||||
|
|
@ -1342,13 +1345,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleReportSubmit)}
|
||||
>
|
||||
<label className="sr-only" htmlFor="post-report-reason">
|
||||
<label className="visually-hidden" htmlFor="post-report-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="post-report-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
required
|
||||
value={this.state.reportReason}
|
||||
|
|
@ -1369,13 +1372,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
onSubmit={linkEvent(this, this.handlePurgeSubmit)}
|
||||
>
|
||||
<PurgeWarning />
|
||||
<label className="sr-only" htmlFor="purge-reason">
|
||||
<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)}
|
||||
|
|
@ -1453,7 +1456,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<div className="d-none d-sm-block">
|
||||
<article className="row post-container">
|
||||
{!this.props.viewOnly && this.voteBar()}
|
||||
<div className="col-sm-2 pr-0 post-media">
|
||||
<div className="col-sm-2 pe-0 post-media">
|
||||
<div className="">{this.thumbnail()}</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-9">
|
||||
|
|
|
|||
|
|
@ -395,7 +395,7 @@ export class Post extends Component<any, PostState> {
|
|||
/>
|
||||
<div className="d-block d-md-none">
|
||||
<button
|
||||
className="btn btn-secondary d-inline-block mb-2 mr-3"
|
||||
className="btn btn-secondary d-inline-block mb-2 me-3"
|
||||
onClick={linkEvent(this, this.handleShowSidebarMobile)}
|
||||
>
|
||||
{i18n.t("sidebar")}{" "}
|
||||
|
|
@ -430,7 +430,7 @@ export class Post extends Component<any, PostState> {
|
|||
sortRadios() {
|
||||
return (
|
||||
<>
|
||||
<div className="btn-group btn-group-toggle flex-wrap mr-3 mb-2">
|
||||
<div className="btn-group btn-group-toggle flex-wrap me-3 mb-2">
|
||||
<label
|
||||
className={`btn btn-outline-secondary pointer ${
|
||||
this.state.commentSort === "Hot" && "active"
|
||||
|
|
@ -439,6 +439,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("hot")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Hot"}
|
||||
checked={this.state.commentSort === "Hot"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -452,6 +453,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("top")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Top"}
|
||||
checked={this.state.commentSort === "Top"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -465,6 +467,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("new")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"New"}
|
||||
checked={this.state.commentSort === "New"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -478,6 +481,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("old")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={"Old"}
|
||||
checked={this.state.commentSort === "Old"}
|
||||
onChange={linkEvent(this, this.handleCommentSortChange)}
|
||||
|
|
@ -493,6 +497,7 @@ export class Post extends Component<any, PostState> {
|
|||
{i18n.t("chat")}
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={CommentViewType.Flat}
|
||||
checked={this.state.commentViewType === CommentViewType.Flat}
|
||||
onChange={linkEvent(this, this.handleCommentViewTypeChange)}
|
||||
|
|
@ -585,14 +590,14 @@ export class Post extends Component<any, PostState> {
|
|||
{!!this.state.commentId && (
|
||||
<>
|
||||
<button
|
||||
className="pl-0 d-block btn btn-link text-muted"
|
||||
className="ps-0 d-block btn btn-link text-muted"
|
||||
onClick={linkEvent(this, this.handleViewPost)}
|
||||
>
|
||||
{i18n.t("view_all_comments")} ➔
|
||||
</button>
|
||||
{showContextButton && (
|
||||
<button
|
||||
className="pl-0 d-block btn btn-link text-muted"
|
||||
className="ps-0 d-block btn btn-link text-muted"
|
||||
onClick={linkEvent(this, this.handleViewContext)}
|
||||
>
|
||||
{i18n.t("show_context")} ➔
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export class PrivateMessageForm extends Component<
|
|||
}
|
||||
/>
|
||||
{!this.props.privateMessageView && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
{capitalizeFirstLetter(i18n.t("to"))}
|
||||
</label>
|
||||
|
|
@ -90,7 +90,7 @@ export class PrivateMessageForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<label className="col-sm-2 col-form-label">
|
||||
{i18n.t("message")}
|
||||
<button
|
||||
|
|
@ -114,7 +114,7 @@ export class PrivateMessageForm extends Component<
|
|||
</div>
|
||||
|
||||
{this.state.showDisclaimer && (
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="offset-sm-2 col-sm-10">
|
||||
<div className="alert alert-danger" role="alert">
|
||||
<T i18nKey="private_message_disclaimer">
|
||||
|
|
@ -131,11 +131,11 @@ export class PrivateMessageForm extends Component<
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group row">
|
||||
<div className="mb-3 row">
|
||||
<div className="offset-sm-2 col-sm-10">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.state.loading}
|
||||
>
|
||||
{this.state.loading ? (
|
||||
|
|
|
|||
|
|
@ -248,13 +248,13 @@ export class PrivateMessage extends Component<
|
|||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleReportSubmit)}
|
||||
>
|
||||
<label className="sr-only" htmlFor="pm-report-reason">
|
||||
<label className="visually-hidden" htmlFor="pm-report-reason">
|
||||
{i18n.t("reason")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="pm-report-reason"
|
||||
className="form-control mr-2"
|
||||
className="form-control me-2"
|
||||
placeholder={i18n.t("reason")}
|
||||
required
|
||||
value={this.state.reportReason}
|
||||
|
|
|
|||
|
|
@ -180,8 +180,8 @@ const Filter = ({
|
|||
loading: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div className="form-group col-sm-6">
|
||||
<label className="col-form-label" htmlFor={`${filterType}-filter`}>
|
||||
<div className="mb-3 col-sm-6">
|
||||
<label className="col-form-label me-2" htmlFor={`${filterType}-filter`}>
|
||||
{capitalizeFirstLetter(i18n.t(filterType))}
|
||||
</label>
|
||||
<SearchableSelect
|
||||
|
|
@ -491,13 +491,11 @@ export class Search extends Component<any, SearchState> {
|
|||
|
||||
get searchForm() {
|
||||
return (
|
||||
<form
|
||||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
<form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control mr-2 mb-2"
|
||||
className="form-control me-2 mb-2 col-sm-8"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${i18n.t("search")}...`}
|
||||
aria-label={i18n.t("search")}
|
||||
|
|
@ -505,13 +503,16 @@ export class Search extends Component<any, SearchState> {
|
|||
required
|
||||
minLength={1}
|
||||
/>
|
||||
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<button type="submit" className="btn btn-secondary mb-2">
|
||||
{this.state.searchRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span>{i18n.t("search")}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
@ -536,7 +537,7 @@ export class Search extends Component<any, SearchState> {
|
|||
<select
|
||||
value={type}
|
||||
onChange={linkEvent(this, this.handleTypeChange)}
|
||||
className="custom-select w-auto mb-2"
|
||||
className="form-select d-inline-block w-auto mb-2"
|
||||
aria-label={i18n.t("type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -548,7 +549,7 @@ export class Search extends Component<any, SearchState> {
|
|||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
<ListingTypeSelect
|
||||
type_={listingType}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
|
|
@ -556,7 +557,7 @@ export class Search extends Component<any, SearchState> {
|
|||
onChange={this.handleListingTypeChange}
|
||||
/>
|
||||
</span>
|
||||
<span className="ml-2">
|
||||
<span className="ms-2">
|
||||
<SortSelect
|
||||
sort={sort}
|
||||
onChange={this.handleSortChange}
|
||||
|
|
@ -564,7 +565,7 @@ export class Search extends Component<any, SearchState> {
|
|||
hideMostComments
|
||||
/>
|
||||
</span>
|
||||
<div className="form-row">
|
||||
<div className="row">
|
||||
{hasCommunities && (
|
||||
<Filter
|
||||
filterType="community"
|
||||
|
|
|
|||
|
|
@ -372,7 +372,7 @@ export function isCakeDay(published: string): boolean {
|
|||
|
||||
export function toast(text: string, background: ThemeColor = "success") {
|
||||
if (isBrowser()) {
|
||||
const backgroundColor = `var(--${background})`;
|
||||
const backgroundColor = `var(--bs-${background})`;
|
||||
Toastify({
|
||||
text: text,
|
||||
backgroundColor: backgroundColor,
|
||||
|
|
@ -393,7 +393,7 @@ export function pictrsDeleteToast(filename: string, deleteUrl: string) {
|
|||
filename,
|
||||
});
|
||||
|
||||
const backgroundColor = `var(--light)`;
|
||||
const backgroundColor = `var(--bs-light)`;
|
||||
|
||||
const toast = Toastify({
|
||||
text: clickToDeleteText,
|
||||
|
|
|
|||
|
|
@ -2487,11 +2487,6 @@ bonjour-service@^1.0.11:
|
|||
fast-deep-equal "^3.1.3"
|
||||
multicast-dns "^7.2.5"
|
||||
|
||||
"bootstrap-v4@npm:bootstrap@^4.6.2":
|
||||
version "4.6.2"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
|
||||
integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
|
||||
|
||||
bootstrap@^5.2.3:
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.0.tgz#0718a7cc29040ee8dbf1bd652b896f3436a87c29"
|
||||
|
|
|
|||
Loading…
Reference in a new issue