mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-26 14:21:13 +00:00
Merge branch 'main' into main
This commit is contained in:
Ivo Barros
GitHub
commit
a07fc75972
129 changed files with 36824 additions and 27792 deletions
|
|
@ -3,11 +3,12 @@
|
|||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"plugins": ["@typescript-eslint"],
|
||||
"plugins": ["@typescript-eslint", "jsx-a11y"],
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:inferno/recommended"
|
||||
"plugin:inferno/recommended",
|
||||
"plugin:jsx-a11y/recommended"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
|
|
@ -20,6 +21,16 @@
|
|||
"@typescript-eslint/explicit-module-boundary-types": 0,
|
||||
"@typescript-eslint/no-empty-function": 0,
|
||||
"arrow-body-style": 0,
|
||||
"jsx-a11y/alt-text": 1,
|
||||
"jsx-a11y/anchor-is-valid": 1,
|
||||
"jsx-a11y/aria-activedescendant-has-tabindex": 1,
|
||||
"jsx-a11y/aria-role": 1,
|
||||
"jsx-a11y/click-events-have-key-events": 1,
|
||||
"jsx-a11y/iframe-has-title": 1,
|
||||
"jsx-a11y/interactive-supports-focus": 1,
|
||||
"jsx-a11y/no-redundant-roles": 1,
|
||||
"jsx-a11y/no-static-element-interactions": 1,
|
||||
"jsx-a11y/role-has-required-aria-props": 1,
|
||||
"curly": 0,
|
||||
"eol-last": 0,
|
||||
"eqeqeq": 0,
|
||||
|
|
|
|||
2
.github/ISSUE_TEMPLATE/BUG_REPORT.yml
vendored
2
.github/ISSUE_TEMPLATE/BUG_REPORT.yml
vendored
|
|
@ -8,7 +8,7 @@ body:
|
|||
value: |
|
||||
Found a bug? Please fill out the sections below. 👍
|
||||
Thanks for taking the time to fill out this bug report!
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Requirements
|
||||
|
|
|
|||
6
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
vendored
6
.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
vendored
|
|
@ -1,16 +1,16 @@
|
|||
name: "\U0001F680 Feature request"
|
||||
description: Suggest an idea for improving Lemmy
|
||||
description: Suggest an idea for improving Lemmy's UI
|
||||
labels: ["enhancement"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Have a suggestion about Lemmy's UI?
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
|
||||
For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
|
||||
- type: checkboxes
|
||||
attributes:
|
||||
label: Requirements
|
||||
description: Before you create a bug report please do the following.
|
||||
description: Before you create a feature request please do the following.
|
||||
options:
|
||||
- label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
|
||||
required: true
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
src/shared/translations
|
||||
lemmy-translations
|
||||
lemmy-translations
|
||||
src/assets/css/themes/*.css
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit c9a07885f35cf334d3cf167cb57587a8177fc3fb
|
||||
Subproject commit 7fc71d0860bbe5c6d620ec27112350ffe5b9229c
|
||||
12
package.json
12
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "lemmy-ui",
|
||||
"version": "0.18.0-rc.1",
|
||||
"version": "0.18.0-rc.3",
|
||||
"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,9 +106,9 @@
|
|||
"@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",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"husky": "^8.0.3",
|
||||
"import-sort-style-module": "^6.0.0",
|
||||
|
|
@ -118,6 +121,7 @@
|
|||
"sortpack": "^2.3.4",
|
||||
"style-loader": "^3.3.2",
|
||||
"terser": "^5.17.3",
|
||||
"tsconfig-paths-webpack-plugin": "^4.0.1",
|
||||
"typescript": "^5.0.4",
|
||||
"webpack-dev-server": "4.15.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
.upvote:hover {
|
||||
color: var(--info);
|
||||
color: var(--bs-info);
|
||||
}
|
||||
|
||||
.upvote {
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
}
|
||||
|
||||
.downvote:hover {
|
||||
color: var(--danger);
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.downvote {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
.form-select {
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
|
|
@ -84,12 +84,8 @@
|
|||
margin-top: -6.5px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.post-title a:visited {
|
||||
color: var(--gray) !important;
|
||||
color: var(--bs-gray) !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -179,7 +175,7 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid var(--secondary);
|
||||
border-left: 2px solid var(--bs-secondary);
|
||||
margin: 0.5em 5px;
|
||||
padding: 0.1em 5px;
|
||||
}
|
||||
|
|
@ -218,7 +214,7 @@ blockquote {
|
|||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--light);
|
||||
border-top: 1px solid var(--bs-light);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
|
|
@ -270,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;
|
||||
|
|
@ -367,7 +371,7 @@ br.big {
|
|||
margin-top: 2px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
background: var(--light);
|
||||
background: var(--bs-light);
|
||||
}
|
||||
|
||||
.tribute-container li {
|
||||
|
|
@ -376,7 +380,7 @@ br.big {
|
|||
}
|
||||
|
||||
.tribute-container li.highlight {
|
||||
background: var(--primary);
|
||||
background: var(--bs-primary);
|
||||
}
|
||||
|
||||
.tribute-container li span {
|
||||
|
|
@ -411,7 +415,7 @@ br.big {
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.emoji-picker {
|
||||
#emoji-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,108 +1,7 @@
|
|||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #ebebeb;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #888;
|
||||
$gray-700: #444;
|
||||
$gray-800: #303030;
|
||||
$gray-900: #222;
|
||||
$black: #000;
|
||||
$blue: #375a7f;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #e83e8c;
|
||||
$red: #e74c3c;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #f39c12;
|
||||
$green: #00bc8c;
|
||||
$teal: #20c997;
|
||||
$cyan: #3498db;
|
||||
@import "variables.darkly";
|
||||
|
||||
$primary: $blue;
|
||||
$secondary: #444;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$light: $gray-800;
|
||||
$dark: $gray-300;
|
||||
$yiq-contrasted-threshold: 175;
|
||||
$body-bg: $gray-900;
|
||||
$body-color: $gray-300;
|
||||
|
||||
$link-color: $red;
|
||||
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
$font-size-base: 0.9375rem;
|
||||
$h1-font-size: 3rem;
|
||||
$h2-font-size: 2.5rem;
|
||||
$h3-font-size: 2rem;
|
||||
$text-muted: $gray-600;
|
||||
$table-accent-bg: $gray-800;
|
||||
$table-border-color: $gray-700;
|
||||
$input-border-color: $body-bg;
|
||||
$input-group-addon-color: $gray-500;
|
||||
$input-group-addon-bg: $gray-700;
|
||||
$custom-file-color: $gray-500;
|
||||
$custom-file-border-color: $body-bg;
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-border-color: $gray-700;
|
||||
$dropdown-divider-bg: $gray-700;
|
||||
$dropdown-link-color: $white;
|
||||
$dropdown-link-hover-color: $white;
|
||||
$dropdown-link-hover-bg: $primary;
|
||||
$nav-link-padding-x: 2rem;
|
||||
$nav-link-disabled-color: $gray-500;
|
||||
$nav-tabs-border-color: $gray-700;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
|
||||
transparent;
|
||||
$nav-tabs-link-active-color: $white;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color
|
||||
$nav-tabs-border-color transparent;
|
||||
$navbar-padding-y: 1rem;
|
||||
$navbar-dark-color: rgba($white, 0.6);
|
||||
$navbar-dark-hover-color: $white;
|
||||
$navbar-light-color: rgba($white, 0.6);
|
||||
$navbar-light-hover-color: $white;
|
||||
$navbar-light-active-color: $white;
|
||||
$navbar-light-toggler-border-color: rgba($gray-900, 0.1);
|
||||
$pagination-color: $white;
|
||||
$pagination-bg: $success;
|
||||
$pagination-border-width: 0;
|
||||
$pagination-border-color: transparent;
|
||||
$pagination-hover-color: $white;
|
||||
$pagination-hover-bg: lighten($success, 10%);
|
||||
$pagination-hover-border-color: transparent;
|
||||
$pagination-active-bg: $pagination-hover-bg;
|
||||
$pagination-active-border-color: transparent;
|
||||
$pagination-disabled-color: $white;
|
||||
$pagination-disabled-bg: darken($success, 15%);
|
||||
$pagination-disabled-border-color: transparent;
|
||||
$jumbotron-bg: $gray-800;
|
||||
$card-cap-bg: $gray-700;
|
||||
$card-bg: $gray-800;
|
||||
$popover-bg: $gray-800;
|
||||
$popover-header-bg: $gray-700;
|
||||
$toast-background-color: $gray-700;
|
||||
$toast-header-background-color: $gray-800;
|
||||
$modal-content-bg: $gray-800;
|
||||
$modal-content-border-color: $gray-700;
|
||||
$modal-header-border-color: $gray-700;
|
||||
$progress-bg: $gray-700;
|
||||
$list-group-bg: $gray-800;
|
||||
$list-group-border-color: $gray-700;
|
||||
$list-group-hover-bg: $gray-700;
|
||||
$breadcrumb-bg: $gray-700;
|
||||
$close-color: $white;
|
||||
$close-text-shadow: none;
|
||||
$pre-color: inherit;
|
||||
$mark-bg: #333;
|
||||
$custom-select-bg: $secondary;
|
||||
$custom-select-color: $white;
|
||||
$input-bg: $secondary;
|
||||
$input-color: $white;
|
||||
$input-disabled-bg: darken($secondary, 10%);
|
||||
$light: $gray-800;
|
||||
$navbar-light-brand-color: $white;
|
||||
$navbar-light-brand-hover-color: $navbar-light-brand-color;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,34 @@
|
|||
@import "./variables";
|
||||
|
||||
// Colors
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #ebebeb;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #888;
|
||||
$gray-700: #444;
|
||||
$gray-800: #303030;
|
||||
$gray-900: #222;
|
||||
$black: #000;
|
||||
|
||||
$blue: #375a7f;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #e83e8c;
|
||||
$red: #e74c3c;
|
||||
$orange: #fd7e14;
|
||||
$yellow: #f39c12;
|
||||
$green: #00bc8c;
|
||||
$teal: #20c997;
|
||||
$cyan: #3498db;
|
||||
$primary: $blue;
|
||||
|
||||
$primary: $green;
|
||||
$secondary: $gray-700;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$dark: $gray-300;
|
||||
$yiq-contrasted-threshold: 175;
|
||||
$body-bg: $gray-900;
|
||||
|
||||
$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;
|
||||
|
||||
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
|
@ -37,28 +36,10 @@ $font-size-base: 0.9375rem;
|
|||
$h1-font-size: 3rem;
|
||||
$h2-font-size: 2.5rem;
|
||||
$h3-font-size: 2rem;
|
||||
$text-muted: $gray-600;
|
||||
$table-accent-bg: $gray-800;
|
||||
$table-border-color: $gray-700;
|
||||
$input-border-color: $body-bg;
|
||||
$input-group-addon-color: $gray-500;
|
||||
$input-group-addon-bg: $gray-700;
|
||||
$custom-file-color: $gray-500;
|
||||
$custom-file-border-color: $body-bg;
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-border-color: $gray-700;
|
||||
$dropdown-divider-bg: $gray-700;
|
||||
$dropdown-link-color: $white;
|
||||
$dropdown-link-hover-color: $white;
|
||||
$dropdown-link-hover-bg: $primary;
|
||||
$nav-link-padding-x: 2rem;
|
||||
$nav-link-disabled-color: $gray-500;
|
||||
$nav-tabs-border-color: $gray-700;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
|
||||
transparent;
|
||||
$nav-tabs-link-active-color: $white;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color
|
||||
$nav-tabs-border-color transparent;
|
||||
|
||||
$card-cap-bg: $gray-700;
|
||||
$card-bg: $gray-800;
|
||||
|
||||
$navbar-padding-y: 1rem;
|
||||
$navbar-dark-color: rgba($white, 0.6);
|
||||
$navbar-dark-hover-color: $white;
|
||||
|
|
@ -66,6 +47,40 @@ $navbar-light-color: rgba($white, 0.6);
|
|||
$navbar-light-hover-color: $white;
|
||||
$navbar-light-active-color: $white;
|
||||
$navbar-light-toggler-border-color: rgba($gray-900, 0.1);
|
||||
$navbar-light-brand-color: $white;
|
||||
$navbar-light-brand-hover-color: $navbar-light-brand-color;
|
||||
|
||||
$nav-link-padding-x: 2rem;
|
||||
$nav-link-disabled-color: $gray-500;
|
||||
|
||||
$nav-tabs-border-color: $gray-700;
|
||||
$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color
|
||||
transparent;
|
||||
$nav-tabs-link-active-color: $white;
|
||||
$nav-tabs-link-active-border-color: $nav-tabs-border-color
|
||||
$nav-tabs-border-color transparent;
|
||||
|
||||
$input-bg: $gray-700;
|
||||
$input-color: $white;
|
||||
$input-disabled-bg: darken($gray-700, 10%);
|
||||
$input-border-color: $body-bg;
|
||||
$input-group-addon-color: $gray-500;
|
||||
$input-group-addon-bg: $gray-700;
|
||||
|
||||
$hr-border-color: rgba($body-color, 0.25);
|
||||
|
||||
$table-border-color: $gray-700;
|
||||
|
||||
$custom-file-color: $gray-500;
|
||||
$custom-file-border-color: $body-bg;
|
||||
|
||||
$dropdown-bg: $gray-900;
|
||||
$dropdown-border-color: $gray-700;
|
||||
$dropdown-divider-bg: $gray-700;
|
||||
$dropdown-link-color: $white;
|
||||
$dropdown-link-hover-color: $white;
|
||||
$dropdown-link-hover-bg: $primary;
|
||||
|
||||
$pagination-color: $white;
|
||||
$pagination-bg: $success;
|
||||
$pagination-border-width: 0;
|
||||
|
|
@ -78,9 +93,8 @@ $pagination-active-border-color: transparent;
|
|||
$pagination-disabled-color: $white;
|
||||
$pagination-disabled-bg: darken($success, 15%);
|
||||
$pagination-disabled-border-color: transparent;
|
||||
|
||||
$jumbotron-bg: $gray-800;
|
||||
$card-cap-bg: $gray-700;
|
||||
$card-bg: $gray-800;
|
||||
$popover-bg: $gray-800;
|
||||
$popover-header-bg: $gray-700;
|
||||
$toast-background-color: $gray-700;
|
||||
|
|
@ -96,12 +110,6 @@ $breadcrumb-bg: $gray-700;
|
|||
$close-color: $white;
|
||||
$close-text-shadow: none;
|
||||
$pre-color: inherit;
|
||||
$mark-bg: #333;
|
||||
$custom-select-bg: $secondary;
|
||||
$custom-select-bg: $gray-700;
|
||||
$custom-select-color: $white;
|
||||
$input-bg: $secondary;
|
||||
$input-color: $white;
|
||||
$input-disabled-bg: darken($secondary, 10%);
|
||||
$light: $gray-800;
|
||||
$navbar-light-brand-color: $white;
|
||||
$navbar-light-brand-hover-color: $navbar-light-brand-color;
|
||||
|
|
|
|||
|
|
@ -1,47 +1,4 @@
|
|||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
$blue: #007bff;
|
||||
$indigo: #6610f2;
|
||||
$white: #ffffff;
|
||||
$orange: #f1641e;
|
||||
$cyan: #02bdc2;
|
||||
$green: #00c853;
|
||||
$primary: #f1641e;
|
||||
@import "variables.litely";
|
||||
|
||||
$secondary: #c80000;
|
||||
$info: $blue;
|
||||
$body-color: $gray-700;
|
||||
$link-color: $primary;
|
||||
$red: #d8486a;
|
||||
$border-radius: 0.5rem;
|
||||
$border-radius-lg: 0.5rem;
|
||||
$border-radius-sm: 1rem;
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
|
||||
"Segoe UI", "Helvetica", Arial, sans-serif;
|
||||
$headings-color: $gray-700;
|
||||
$input-btn-focus-color: rgba($primary, 0.75);
|
||||
$form-feedback-valid-color: $info;
|
||||
$navbar-light-color: $gray-600;
|
||||
$black: #222222;
|
||||
$navbar-dark-toggler-border-color: rgba($black, 0.1);
|
||||
$navbar-light-active-color: $gray-900;
|
||||
$card-color: $gray-700;
|
||||
$card-cap-color: $gray-700;
|
||||
$info: $blue;
|
||||
$body-bg: #fff;
|
||||
$success: $indigo;
|
||||
$danger: darken($primary, 24%);
|
||||
$navbar-light-hover-color: $gray-900;
|
||||
$card-bg: $gray-100;
|
||||
$border-color: $gray-700;
|
||||
$mark-bg: rgb(255, 252, 239);
|
||||
$font-weight-bold: 600;
|
||||
$rounded-pill: 0.25rem;
|
||||
|
|
|
|||
|
|
@ -1,47 +1,52 @@
|
|||
$white: #fff;
|
||||
@import "./variables";
|
||||
|
||||
// Colors
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
$black: #222;
|
||||
|
||||
$blue: #007bff;
|
||||
$indigo: #6610f2;
|
||||
$white: #ffffff;
|
||||
$red: #d8486a;
|
||||
$orange: #f1641e;
|
||||
$green: #00a846;
|
||||
$cyan: #02bdc2;
|
||||
$green: #00c853;
|
||||
|
||||
$primary: $orange;
|
||||
$secondary: $green;
|
||||
$info: $cyan;
|
||||
$success: $indigo;
|
||||
$info: $blue;
|
||||
$danger: darken($primary, 25%);
|
||||
|
||||
$body-color: $gray-700;
|
||||
$body-bg: #fff;
|
||||
$link-color: $primary;
|
||||
$red: #d8486a;
|
||||
$border-color: rgba($body-color, 0.25);
|
||||
$mark-bg: rgb(255, 252, 239);
|
||||
$headings-color: $gray-700;
|
||||
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
|
||||
"Segoe UI", "Helvetica", Arial, sans-serif;
|
||||
$font-weight-bold: 600;
|
||||
|
||||
$card-color: $gray-700;
|
||||
$card-cap-color: $gray-700;
|
||||
$card-bg: $gray-100;
|
||||
|
||||
$navbar-dark-toggler-border-color: rgba($black, 0.1);
|
||||
$navbar-light-color: $gray-600;
|
||||
$navbar-light-hover-color: $gray-900;
|
||||
$navbar-light-active-color: $gray-900;
|
||||
|
||||
$form-feedback-valid-color: $info;
|
||||
$input-btn-focus-color: rgba($primary, 0.75);
|
||||
|
||||
$border-radius: 0.5rem;
|
||||
$border-radius-lg: 0.5rem;
|
||||
$border-radius-sm: 1rem;
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans",
|
||||
"Segoe UI", "Helvetica", Arial, sans-serif;
|
||||
$headings-color: $gray-700;
|
||||
$input-btn-focus-color: rgba($primary, 0.75);
|
||||
$form-feedback-valid-color: $info;
|
||||
$navbar-light-color: $gray-600;
|
||||
$black: #222222;
|
||||
$navbar-dark-toggler-border-color: rgba($black, 0.1);
|
||||
$navbar-light-active-color: $gray-900;
|
||||
$card-color: $gray-700;
|
||||
$card-cap-color: $gray-700;
|
||||
$info: $blue;
|
||||
$body-bg: #fff;
|
||||
$success: $indigo;
|
||||
$danger: darken($primary, 25%);
|
||||
$navbar-light-hover-color: $gray-900;
|
||||
$card-bg: $gray-100;
|
||||
$border-color: $gray-700;
|
||||
$mark-bg: rgb(255, 252, 239);
|
||||
$font-weight-bold: 600;
|
||||
$rounded-pill: 0.25rem;
|
||||
|
||||
$hr-border-color: rgba($body-color, 0.25);
|
||||
|
|
|
|||
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";
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import { hydrate } from "inferno-hydrate";
|
||||
import { Router } from "inferno-router";
|
||||
import { App } from "../shared/components/app/app";
|
||||
import { HistoryService } from "../shared/services/HistoryService";
|
||||
import { initializeSite } from "../shared/utils";
|
||||
|
||||
import "bootstrap/js/dist/collapse";
|
||||
import "bootstrap/js/dist/dropdown";
|
||||
import { HistoryService } from "../shared/services/HistoryService";
|
||||
|
||||
const site = window.isoData.site_res;
|
||||
initializeSite(site);
|
||||
initializeSite(window.isoData.site_res);
|
||||
|
||||
const wrapper = (
|
||||
<Router history={HistoryService.history}>
|
||||
|
|
@ -17,6 +16,7 @@ const wrapper = (
|
|||
);
|
||||
|
||||
const root = document.getElementById("root");
|
||||
|
||||
if (root) {
|
||||
hydrate(wrapper, root);
|
||||
}
|
||||
|
|
|
|||
116
src/server/handlers/catch-all-handler.tsx
Normal file
116
src/server/handlers/catch-all-handler.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import type { Request, Response } from "express";
|
||||
import { StaticRouter, matchPath } from "inferno-router";
|
||||
import { renderToString } from "inferno-server";
|
||||
import IsomorphicCookie from "isomorphic-cookie";
|
||||
import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
||||
import { App } from "../../shared/components/app/app";
|
||||
import { getHttpBaseInternal } from "../../shared/env";
|
||||
import {
|
||||
InitialFetchRequest,
|
||||
IsoDataOptionalSite,
|
||||
RouteData,
|
||||
} from "../../shared/interfaces";
|
||||
import { routes } from "../../shared/routes";
|
||||
import {
|
||||
FailedRequestState,
|
||||
wrapClient,
|
||||
} from "../../shared/services/HttpService";
|
||||
import { ErrorPageData, initializeSite, isAuthPath } from "../../shared/utils";
|
||||
import { createSsrHtml } from "../utils/create-ssr-html";
|
||||
import { getErrorPageData } from "../utils/get-error-page-data";
|
||||
import { setForwardedHeaders } from "../utils/set-forwarded-headers";
|
||||
|
||||
export default async (req: Request, res: Response) => {
|
||||
try {
|
||||
const activeRoute = routes.find(route => matchPath(req.path, route));
|
||||
let auth: string | undefined = IsomorphicCookie.load("jwt", req);
|
||||
|
||||
const getSiteForm: GetSite = { auth };
|
||||
|
||||
const headers = setForwardedHeaders(req.headers);
|
||||
const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
|
||||
|
||||
const { path, url, query } = req;
|
||||
|
||||
// Get site data first
|
||||
// This bypasses errors, so that the client can hit the error on its own,
|
||||
// in order to remove the jwt on the browser. Necessary for wrong jwts
|
||||
let site: GetSiteResponse | undefined = undefined;
|
||||
let routeData: RouteData = {};
|
||||
let errorPageData: ErrorPageData | undefined = undefined;
|
||||
let try_site = await client.getSite(getSiteForm);
|
||||
if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
|
||||
console.error(
|
||||
"Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
|
||||
);
|
||||
getSiteForm.auth = undefined;
|
||||
auth = undefined;
|
||||
try_site = await client.getSite(getSiteForm);
|
||||
}
|
||||
|
||||
if (!auth && isAuthPath(path)) {
|
||||
return res.redirect("/login");
|
||||
}
|
||||
|
||||
if (try_site.state === "success") {
|
||||
site = try_site.data;
|
||||
initializeSite(site);
|
||||
|
||||
if (path !== "/setup" && !site.site_view.local_site.site_setup) {
|
||||
return res.redirect("/setup");
|
||||
}
|
||||
|
||||
if (site && activeRoute?.fetchInitialData) {
|
||||
const initialFetchReq: InitialFetchRequest = {
|
||||
client,
|
||||
auth,
|
||||
path,
|
||||
query,
|
||||
site,
|
||||
};
|
||||
|
||||
routeData = await activeRoute.fetchInitialData(initialFetchReq);
|
||||
}
|
||||
} else if (try_site.state === "failed") {
|
||||
errorPageData = getErrorPageData(new Error(try_site.msg), site);
|
||||
}
|
||||
|
||||
const error = Object.values(routeData).find(
|
||||
res => res.state === "failed"
|
||||
) as FailedRequestState | undefined;
|
||||
|
||||
// Redirect to the 404 if there's an API error
|
||||
if (error) {
|
||||
console.error(error.msg);
|
||||
if (error.msg === "instance_is_private") {
|
||||
return res.redirect(`/signup`);
|
||||
} else {
|
||||
errorPageData = getErrorPageData(new Error(error.msg), site);
|
||||
}
|
||||
}
|
||||
|
||||
const isoData: IsoDataOptionalSite = {
|
||||
path,
|
||||
site_res: site,
|
||||
routeData,
|
||||
errorPageData,
|
||||
};
|
||||
|
||||
const wrapper = (
|
||||
<StaticRouter location={url} context={isoData}>
|
||||
<App />
|
||||
</StaticRouter>
|
||||
);
|
||||
|
||||
const root = renderToString(wrapper);
|
||||
|
||||
res.send(await createSsrHtml(root, isoData));
|
||||
} catch (err) {
|
||||
// If an error is caught here, the error page couldn't even be rendered
|
||||
console.error(err);
|
||||
res.statusCode = 500;
|
||||
return res.send(
|
||||
process.env.NODE_ENV === "development" ? err.message : "Server error"
|
||||
);
|
||||
}
|
||||
};
|
||||
18
src/server/handlers/robots-handler.ts
Normal file
18
src/server/handlers/robots-handler.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import type { Response } from "express";
|
||||
|
||||
export default async ({ res }: { res: Response }) => {
|
||||
res.setHeader("content-type", "text/plain; charset=utf-8");
|
||||
|
||||
res.send(`User-Agent: *
|
||||
Disallow: /login
|
||||
Disallow: /settings
|
||||
Disallow: /create_community
|
||||
Disallow: /create_post
|
||||
Disallow: /create_private_message
|
||||
Disallow: /inbox
|
||||
Disallow: /setup
|
||||
Disallow: /admin
|
||||
Disallow: /password_change
|
||||
Disallow: /search/
|
||||
`);
|
||||
};
|
||||
14
src/server/handlers/service-worker-handler.ts
Normal file
14
src/server/handlers/service-worker-handler.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import type { Response } from "express";
|
||||
import path from "path";
|
||||
|
||||
export default async ({ res }: { res: Response }) => {
|
||||
res
|
||||
.setHeader("Content-Type", "application/javascript")
|
||||
.sendFile(
|
||||
path.resolve(
|
||||
`./dist/service-worker${
|
||||
process.env.NODE_ENV === "development" ? "-development" : ""
|
||||
}.js`
|
||||
)
|
||||
);
|
||||
};
|
||||
32
src/server/handlers/theme-handler.ts
Normal file
32
src/server/handlers/theme-handler.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import type { Request, Response } from "express";
|
||||
import { existsSync } from "fs";
|
||||
import path from "path";
|
||||
|
||||
const extraThemesFolder =
|
||||
process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
|
||||
|
||||
export default async (req: Request, res: Response) => {
|
||||
res.contentType("text/css");
|
||||
|
||||
const theme = req.params.name;
|
||||
|
||||
if (!theme.endsWith(".css")) {
|
||||
res.statusCode = 400;
|
||||
res.send("Theme must be a css file");
|
||||
}
|
||||
|
||||
const customTheme = path.resolve(`./${extraThemesFolder}/${theme}`);
|
||||
|
||||
if (existsSync(customTheme)) {
|
||||
res.sendFile(customTheme);
|
||||
} else {
|
||||
const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
|
||||
|
||||
// If the theme doesn't exist, just send litely
|
||||
if (existsSync(internalTheme)) {
|
||||
res.sendFile(internalTheme);
|
||||
} else {
|
||||
res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
|
||||
}
|
||||
}
|
||||
};
|
||||
6
src/server/handlers/themes-list-handler.ts
Normal file
6
src/server/handlers/themes-list-handler.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import type { Response } from "express";
|
||||
import { buildThemeList } from "../utils/build-themes-list";
|
||||
|
||||
export default async ({ res }: { res: Response }) => {
|
||||
res.type("json").send(JSON.stringify(await buildThemeList()));
|
||||
};
|
||||
|
|
@ -1,463 +1,38 @@
|
|||
import express from "express";
|
||||
import { existsSync } from "fs";
|
||||
import { readdir, readFile } from "fs/promises";
|
||||
import { IncomingHttpHeaders } from "http";
|
||||
import { Helmet } from "inferno-helmet";
|
||||
import { matchPath, StaticRouter } from "inferno-router";
|
||||
import { renderToString } from "inferno-server";
|
||||
import IsomorphicCookie from "isomorphic-cookie";
|
||||
import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
|
||||
import path from "path";
|
||||
import process from "process";
|
||||
import serialize from "serialize-javascript";
|
||||
import sharp from "sharp";
|
||||
import { App } from "../shared/components/app/app";
|
||||
import { getHttpBaseExternal, getHttpBaseInternal } from "../shared/env";
|
||||
import {
|
||||
ILemmyConfig,
|
||||
InitialFetchRequest,
|
||||
IsoDataOptionalSite,
|
||||
RouteData,
|
||||
} from "../shared/interfaces";
|
||||
import { routes } from "../shared/routes";
|
||||
import { FailedRequestState, wrapClient } from "../shared/services/HttpService";
|
||||
import {
|
||||
ErrorPageData,
|
||||
favIconPngUrl,
|
||||
favIconUrl,
|
||||
initializeSite,
|
||||
isAuthPath,
|
||||
} from "../shared/utils";
|
||||
import CatchAllHandler from "./handlers/catch-all-handler";
|
||||
import RobotsHandler from "./handlers/robots-handler";
|
||||
import ServiceWorkerHandler from "./handlers/service-worker-handler";
|
||||
import ThemeHandler from "./handlers/theme-handler";
|
||||
import ThemesListHandler from "./handlers/themes-list-handler";
|
||||
import setDefaultCsp from "./middleware/set-default-csp";
|
||||
|
||||
const server = express();
|
||||
|
||||
const [hostname, port] = process.env["LEMMY_UI_HOST"]
|
||||
? process.env["LEMMY_UI_HOST"].split(":")
|
||||
: ["0.0.0.0", "1234"];
|
||||
const extraThemesFolder =
|
||||
process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
|
||||
|
||||
if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
|
||||
server.use(function (_req, res, next) {
|
||||
res.setHeader(
|
||||
"Content-Security-Policy",
|
||||
`default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
|
||||
);
|
||||
next();
|
||||
});
|
||||
}
|
||||
const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
|
||||
|
||||
server.use(express.json());
|
||||
server.use(express.urlencoded({ extended: false }));
|
||||
server.use("/static", express.static(path.resolve("./dist")));
|
||||
|
||||
const robotstxt = `User-Agent: *
|
||||
Disallow: /login
|
||||
Disallow: /settings
|
||||
Disallow: /create_community
|
||||
Disallow: /create_post
|
||||
Disallow: /create_private_message
|
||||
Disallow: /inbox
|
||||
Disallow: /setup
|
||||
Disallow: /admin
|
||||
Disallow: /password_change
|
||||
Disallow: /search/
|
||||
`;
|
||||
|
||||
server.get("/service-worker.js", async (_req, res) => {
|
||||
res.setHeader("Content-Type", "application/javascript");
|
||||
res.sendFile(
|
||||
path.resolve(
|
||||
`./dist/service-worker${
|
||||
process.env.NODE_ENV === "development" ? "-development" : ""
|
||||
}.js`
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
server.get("/robots.txt", async (_req, res) => {
|
||||
res.setHeader("content-type", "text/plain; charset=utf-8");
|
||||
res.send(robotstxt);
|
||||
});
|
||||
|
||||
server.get("/css/themes/:name", async (req, res) => {
|
||||
res.contentType("text/css");
|
||||
const theme = req.params.name;
|
||||
if (!theme.endsWith(".css")) {
|
||||
res.statusCode = 400;
|
||||
res.send("Theme must be a css file");
|
||||
}
|
||||
|
||||
const customTheme = path.resolve(`./${extraThemesFolder}/${theme}`);
|
||||
if (existsSync(customTheme)) {
|
||||
res.sendFile(customTheme);
|
||||
} else {
|
||||
const internalTheme = path.resolve(`./dist/assets/css/themes/${theme}`);
|
||||
|
||||
// If the theme doesn't exist, just send litely
|
||||
if (existsSync(internalTheme)) {
|
||||
res.sendFile(internalTheme);
|
||||
} else {
|
||||
res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
async function buildThemeList(): Promise<string[]> {
|
||||
const themes = ["darkly", "darkly-red", "litely", "litely-red"];
|
||||
if (existsSync(extraThemesFolder)) {
|
||||
const dirThemes = await readdir(extraThemesFolder);
|
||||
const cssThemes = dirThemes
|
||||
.filter(d => d.endsWith(".css"))
|
||||
.map(d => d.replace(".css", ""));
|
||||
themes.push(...cssThemes);
|
||||
}
|
||||
return themes;
|
||||
if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
|
||||
server.use(setDefaultCsp);
|
||||
}
|
||||
|
||||
server.get("/css/themelist", async (_req, res) => {
|
||||
res.type("json");
|
||||
res.send(JSON.stringify(await buildThemeList()));
|
||||
});
|
||||
|
||||
// server.use(cookieParser());
|
||||
server.get("/*", async (req, res) => {
|
||||
try {
|
||||
const activeRoute = routes.find(route => matchPath(req.path, route));
|
||||
let auth: string | undefined = IsomorphicCookie.load("jwt", req);
|
||||
|
||||
const getSiteForm: GetSite = { auth };
|
||||
|
||||
const headers = setForwardedHeaders(req.headers);
|
||||
const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers));
|
||||
|
||||
const { path, url, query } = req;
|
||||
|
||||
// Get site data first
|
||||
// This bypasses errors, so that the client can hit the error on its own,
|
||||
// in order to remove the jwt on the browser. Necessary for wrong jwts
|
||||
let site: GetSiteResponse | undefined = undefined;
|
||||
let routeData: RouteData = {};
|
||||
let errorPageData: ErrorPageData | undefined = undefined;
|
||||
let try_site = await client.getSite(getSiteForm);
|
||||
if (try_site.state === "failed" && try_site.msg == "not_logged_in") {
|
||||
console.error(
|
||||
"Incorrect JWT token, skipping auth so frontend can remove jwt cookie"
|
||||
);
|
||||
getSiteForm.auth = undefined;
|
||||
auth = undefined;
|
||||
try_site = await client.getSite(getSiteForm);
|
||||
}
|
||||
|
||||
if (!auth && isAuthPath(path)) {
|
||||
return res.redirect("/login");
|
||||
}
|
||||
|
||||
if (try_site.state === "success") {
|
||||
site = try_site.data;
|
||||
initializeSite(site);
|
||||
|
||||
if (path !== "/setup" && !site.site_view.local_site.site_setup) {
|
||||
return res.redirect("/setup");
|
||||
}
|
||||
|
||||
if (site && activeRoute?.fetchInitialData) {
|
||||
const initialFetchReq: InitialFetchRequest = {
|
||||
client,
|
||||
auth,
|
||||
path,
|
||||
query,
|
||||
site,
|
||||
};
|
||||
|
||||
routeData = await activeRoute.fetchInitialData(initialFetchReq);
|
||||
}
|
||||
} else if (try_site.state === "failed") {
|
||||
errorPageData = getErrorPageData(new Error(try_site.msg), site);
|
||||
}
|
||||
|
||||
const error = Object.values(routeData).find(
|
||||
res => res.state === "failed"
|
||||
) as FailedRequestState | undefined;
|
||||
|
||||
// Redirect to the 404 if there's an API error
|
||||
if (error) {
|
||||
console.error(error.msg);
|
||||
if (error.msg === "instance_is_private") {
|
||||
return res.redirect(`/signup`);
|
||||
} else {
|
||||
errorPageData = getErrorPageData(new Error(error.msg), site);
|
||||
}
|
||||
}
|
||||
|
||||
const isoData: IsoDataOptionalSite = {
|
||||
path,
|
||||
site_res: site,
|
||||
routeData,
|
||||
errorPageData,
|
||||
};
|
||||
|
||||
const wrapper = (
|
||||
<StaticRouter location={url} context={isoData}>
|
||||
<App />
|
||||
</StaticRouter>
|
||||
);
|
||||
|
||||
const root = renderToString(wrapper);
|
||||
|
||||
res.send(await createSsrHtml(root, isoData));
|
||||
} catch (err) {
|
||||
// If an error is caught here, the error page couldn't even be rendered
|
||||
console.error(err);
|
||||
res.statusCode = 500;
|
||||
return res.send(
|
||||
process.env.NODE_ENV === "development" ? err.message : "Server error"
|
||||
);
|
||||
}
|
||||
});
|
||||
server.get("/robots.txt", RobotsHandler);
|
||||
server.get("/service-worker.js", ServiceWorkerHandler);
|
||||
server.get("/css/themes/:name", ThemeHandler);
|
||||
server.get("/css/themelist", ThemesListHandler);
|
||||
server.get("/*", CatchAllHandler);
|
||||
|
||||
server.listen(Number(port), hostname, () => {
|
||||
console.log(`http://${hostname}:${port}`);
|
||||
});
|
||||
|
||||
function setForwardedHeaders(headers: IncomingHttpHeaders): {
|
||||
[key: string]: string;
|
||||
} {
|
||||
const out: { [key: string]: string } = {};
|
||||
if (headers.host) {
|
||||
out.host = headers.host;
|
||||
}
|
||||
const realIp = headers["x-real-ip"];
|
||||
if (realIp) {
|
||||
out["x-real-ip"] = realIp as string;
|
||||
}
|
||||
const forwardedFor = headers["x-forwarded-for"];
|
||||
if (forwardedFor) {
|
||||
out["x-forwarded-for"] = forwardedFor as string;
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
||||
process.on("SIGINT", () => {
|
||||
console.info("Interrupted");
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
const iconSizes = [72, 96, 144, 192, 512];
|
||||
const defaultLogoPathDirectory = path.join(
|
||||
process.cwd(),
|
||||
"dist",
|
||||
"assets",
|
||||
"icons"
|
||||
);
|
||||
|
||||
export async function generateManifestBase64({
|
||||
my_user,
|
||||
site_view: {
|
||||
site,
|
||||
local_site: { community_creation_admin_only },
|
||||
},
|
||||
}: GetSiteResponse) {
|
||||
const url = getHttpBaseExternal();
|
||||
|
||||
const icon = site.icon ? await fetchIconPng(site.icon) : null;
|
||||
|
||||
const manifest = {
|
||||
name: site.name,
|
||||
description: site.description ?? "A link aggregator for the fediverse",
|
||||
start_url: url,
|
||||
scope: url,
|
||||
display: "standalone",
|
||||
id: "/",
|
||||
background_color: "#222222",
|
||||
theme_color: "#222222",
|
||||
icons: await Promise.all(
|
||||
iconSizes.map(async size => {
|
||||
let src = await readFile(
|
||||
path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
|
||||
).then(buf => buf.toString("base64"));
|
||||
|
||||
if (icon) {
|
||||
src = await sharp(icon)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"));
|
||||
}
|
||||
|
||||
return {
|
||||
sizes: `${size}x${size}`,
|
||||
type: "image/png",
|
||||
src: `data:image/png;base64,${src}`,
|
||||
purpose: "any maskable",
|
||||
};
|
||||
})
|
||||
),
|
||||
shortcuts: [
|
||||
{
|
||||
name: "Search",
|
||||
short_name: "Search",
|
||||
description: "Perform a search.",
|
||||
url: "/search",
|
||||
},
|
||||
{
|
||||
name: "Communities",
|
||||
url: "/communities",
|
||||
short_name: "Communities",
|
||||
description: "Browse communities",
|
||||
},
|
||||
]
|
||||
.concat(
|
||||
my_user
|
||||
? [
|
||||
{
|
||||
name: "Create Post",
|
||||
url: "/create_post",
|
||||
short_name: "Create Post",
|
||||
description: "Create a post.",
|
||||
},
|
||||
]
|
||||
: []
|
||||
)
|
||||
.concat(
|
||||
my_user?.local_user_view.person.admin || !community_creation_admin_only
|
||||
? [
|
||||
{
|
||||
name: "Create Community",
|
||||
url: "/create_community",
|
||||
short_name: "Create Community",
|
||||
description: "Create a community",
|
||||
},
|
||||
]
|
||||
: []
|
||||
),
|
||||
related_applications: [
|
||||
{
|
||||
platform: "f-droid",
|
||||
url: "https://f-droid.org/packages/com.jerboa/",
|
||||
id: "com.jerboa",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return Buffer.from(JSON.stringify(manifest)).toString("base64");
|
||||
}
|
||||
|
||||
async function fetchIconPng(iconUrl: string) {
|
||||
return await fetch(iconUrl)
|
||||
.then(res => res.blob())
|
||||
.then(blob => blob.arrayBuffer());
|
||||
}
|
||||
|
||||
function getErrorPageData(error: Error, site?: GetSiteResponse) {
|
||||
const errorPageData: ErrorPageData = {};
|
||||
|
||||
if (site) {
|
||||
errorPageData.error = error.message;
|
||||
}
|
||||
|
||||
const adminMatrixIds = site?.admins
|
||||
.map(({ person: { matrix_user_id } }) => matrix_user_id)
|
||||
.filter(id => id) as string[] | undefined;
|
||||
if (adminMatrixIds && adminMatrixIds.length > 0) {
|
||||
errorPageData.adminMatrixIds = adminMatrixIds;
|
||||
}
|
||||
|
||||
return errorPageData;
|
||||
}
|
||||
|
||||
async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
|
||||
const site = isoData.site_res;
|
||||
const appleTouchIcon = site?.site_view.site.icon
|
||||
? `data:image/png;base64,${sharp(
|
||||
await fetchIconPng(site.site_view.site.icon)
|
||||
)
|
||||
.resize(180, 180)
|
||||
.extend({
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
left: 20,
|
||||
right: 20,
|
||||
background: "#222222",
|
||||
})
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"))}`
|
||||
: favIconPngUrl;
|
||||
|
||||
const erudaStr =
|
||||
process.env["LEMMY_UI_DEBUG"] === "true"
|
||||
? renderToString(
|
||||
<>
|
||||
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
|
||||
<script>eruda.init();</script>
|
||||
</>
|
||||
)
|
||||
: "";
|
||||
|
||||
const helmet = Helmet.renderStatic();
|
||||
|
||||
const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html ${helmet.htmlAttributes.toString()}>
|
||||
<head>
|
||||
<script>window.isoData = ${serialize(isoData)}</script>
|
||||
<script>window.lemmyConfig = ${serialize(config)}</script>
|
||||
|
||||
<!-- A remote debugging utility for mobile -->
|
||||
${erudaStr}
|
||||
|
||||
<!-- Custom injected script -->
|
||||
${customHtmlHeader}
|
||||
|
||||
${helmet.title.toString()}
|
||||
${helmet.meta.toString()}
|
||||
|
||||
<!-- Required meta tags -->
|
||||
<meta name="Description" content="Lemmy">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
|
||||
<link
|
||||
id="favicon"
|
||||
rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
href=${site?.site_view.site.icon ?? favIconUrl}
|
||||
/>
|
||||
|
||||
<!-- Web app manifest -->
|
||||
${
|
||||
site &&
|
||||
`<link
|
||||
rel="manifest"
|
||||
href=${`data:application/manifest+json;base64,${await generateManifestBase64(
|
||||
site
|
||||
)}`}
|
||||
/>`
|
||||
}
|
||||
<link rel="apple-touch-icon" href=${appleTouchIcon} />
|
||||
<link rel="apple-touch-startup-image" href=${appleTouchIcon} />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
|
||||
|
||||
<!-- Current theme and more -->
|
||||
${helmet.link.toString()}
|
||||
|
||||
</head>
|
||||
|
||||
<body ${helmet.bodyAttributes.toString()}>
|
||||
<noscript>
|
||||
<div class="alert alert-danger rounded-0" role="alert">
|
||||
<b>Javascript is disabled. Actions will not work.</b>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div id='root'>${root}</div>
|
||||
<script defer src='/static/js/client.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
10
src/server/middleware/set-default-csp.ts
Normal file
10
src/server/middleware/set-default-csp.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import type { NextFunction, Response } from "express";
|
||||
|
||||
export default function ({ res, next }: { res: Response; next: NextFunction }) {
|
||||
res.setHeader(
|
||||
"Content-Security-Policy",
|
||||
`default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
|
||||
);
|
||||
|
||||
next();
|
||||
}
|
||||
18
src/server/utils/build-themes-list.ts
Normal file
18
src/server/utils/build-themes-list.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { existsSync } from "fs";
|
||||
import { readdir } from "fs/promises";
|
||||
|
||||
const extraThemesFolder =
|
||||
process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
|
||||
|
||||
const themes = ["darkly", "darkly-red", "litely", "litely-red"];
|
||||
|
||||
export async function buildThemeList(): Promise<string[]> {
|
||||
if (existsSync(extraThemesFolder)) {
|
||||
const dirThemes = await readdir(extraThemesFolder);
|
||||
const cssThemes = dirThemes
|
||||
.filter(d => d.endsWith(".css"))
|
||||
.map(d => d.replace(".css", ""));
|
||||
themes.push(...cssThemes);
|
||||
}
|
||||
return themes;
|
||||
}
|
||||
109
src/server/utils/create-ssr-html.tsx
Normal file
109
src/server/utils/create-ssr-html.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import { Helmet } from "inferno-helmet";
|
||||
import { renderToString } from "inferno-server";
|
||||
import serialize from "serialize-javascript";
|
||||
import sharp from "sharp";
|
||||
import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
|
||||
import { favIconPngUrl, favIconUrl } from "../../shared/utils";
|
||||
import { fetchIconPng } from "./fetch-icon-png";
|
||||
import { generateManifestBase64 } from "./generate-manifest-base64";
|
||||
|
||||
const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
|
||||
|
||||
export async function createSsrHtml(
|
||||
root: string,
|
||||
isoData: IsoDataOptionalSite
|
||||
) {
|
||||
const site = isoData.site_res;
|
||||
|
||||
const appleTouchIcon = site?.site_view.site.icon
|
||||
? `data:image/png;base64,${sharp(
|
||||
await fetchIconPng(site.site_view.site.icon)
|
||||
)
|
||||
.resize(180, 180)
|
||||
.extend({
|
||||
bottom: 20,
|
||||
top: 20,
|
||||
left: 20,
|
||||
right: 20,
|
||||
background: "#222222",
|
||||
})
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"))}`
|
||||
: favIconPngUrl;
|
||||
|
||||
const erudaStr =
|
||||
process.env["LEMMY_UI_DEBUG"] === "true"
|
||||
? renderToString(
|
||||
<>
|
||||
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
|
||||
<script>eruda.init();</script>
|
||||
</>
|
||||
)
|
||||
: "";
|
||||
|
||||
const helmet = Helmet.renderStatic();
|
||||
|
||||
const config: ILemmyConfig = { wsHost: process.env.LEMMY_UI_LEMMY_WS_HOST };
|
||||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html ${helmet.htmlAttributes.toString()}>
|
||||
<head>
|
||||
<script>window.isoData = ${serialize(isoData)}</script>
|
||||
<script>window.lemmyConfig = ${serialize(config)}</script>
|
||||
|
||||
<!-- A remote debugging utility for mobile -->
|
||||
${erudaStr}
|
||||
|
||||
<!-- Custom injected script -->
|
||||
${customHtmlHeader}
|
||||
|
||||
${helmet.title.toString()}
|
||||
${helmet.meta.toString()}
|
||||
|
||||
<!-- Required meta tags -->
|
||||
<meta name="Description" content="Lemmy">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
|
||||
<link
|
||||
id="favicon"
|
||||
rel="shortcut icon"
|
||||
type="image/x-icon"
|
||||
href=${site?.site_view.site.icon ?? favIconUrl}
|
||||
/>
|
||||
|
||||
<!-- Web app manifest -->
|
||||
${
|
||||
site &&
|
||||
`<link
|
||||
rel="manifest"
|
||||
href=${`data:application/manifest+json;base64,${await generateManifestBase64(
|
||||
site
|
||||
)}`}
|
||||
/>`
|
||||
}
|
||||
<link rel="apple-touch-icon" href=${appleTouchIcon} />
|
||||
<link rel="apple-touch-startup-image" href=${appleTouchIcon} />
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
|
||||
|
||||
<!-- Current theme and more -->
|
||||
${helmet.link.toString()}
|
||||
|
||||
</head>
|
||||
|
||||
<body ${helmet.bodyAttributes.toString()}>
|
||||
<noscript>
|
||||
<div class="alert alert-danger rounded-0" role="alert">
|
||||
<b>Javascript is disabled. Actions will not work.</b>
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<div id='root'>${root}</div>
|
||||
<script defer src='/static/js/client.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
5
src/server/utils/fetch-icon-png.ts
Normal file
5
src/server/utils/fetch-icon-png.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export async function fetchIconPng(iconUrl: string) {
|
||||
return await fetch(iconUrl)
|
||||
.then(res => res.blob())
|
||||
.then(blob => blob.arrayBuffer());
|
||||
}
|
||||
107
src/server/utils/generate-manifest-base64.ts
Normal file
107
src/server/utils/generate-manifest-base64.ts
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
import { readFile } from "fs/promises";
|
||||
import { GetSiteResponse } from "lemmy-js-client";
|
||||
import path from "path";
|
||||
import sharp from "sharp";
|
||||
import { getHttpBaseExternal } from "../../shared/env";
|
||||
import { fetchIconPng } from "./fetch-icon-png";
|
||||
|
||||
const iconSizes = [72, 96, 144, 192, 512];
|
||||
|
||||
const defaultLogoPathDirectory = path.join(
|
||||
process.cwd(),
|
||||
"dist",
|
||||
"assets",
|
||||
"icons"
|
||||
);
|
||||
|
||||
export async function generateManifestBase64({
|
||||
my_user,
|
||||
site_view: {
|
||||
site,
|
||||
local_site: { community_creation_admin_only },
|
||||
},
|
||||
}: GetSiteResponse) {
|
||||
const url = getHttpBaseExternal();
|
||||
|
||||
const icon = site.icon ? await fetchIconPng(site.icon) : null;
|
||||
|
||||
const manifest = {
|
||||
name: site.name,
|
||||
description: site.description ?? "A link aggregator for the fediverse",
|
||||
start_url: url,
|
||||
scope: url,
|
||||
display: "standalone",
|
||||
id: "/",
|
||||
background_color: "#222222",
|
||||
theme_color: "#222222",
|
||||
icons: await Promise.all(
|
||||
iconSizes.map(async size => {
|
||||
let src = await readFile(
|
||||
path.join(defaultLogoPathDirectory, `icon-${size}x${size}.png`)
|
||||
).then(buf => buf.toString("base64"));
|
||||
|
||||
if (icon) {
|
||||
src = await sharp(icon)
|
||||
.resize(size, size)
|
||||
.png()
|
||||
.toBuffer()
|
||||
.then(buf => buf.toString("base64"));
|
||||
}
|
||||
|
||||
return {
|
||||
sizes: `${size}x${size}`,
|
||||
type: "image/png",
|
||||
src: `data:image/png;base64,${src}`,
|
||||
purpose: "any maskable",
|
||||
};
|
||||
})
|
||||
),
|
||||
shortcuts: [
|
||||
{
|
||||
name: "Search",
|
||||
short_name: "Search",
|
||||
description: "Perform a search.",
|
||||
url: "/search",
|
||||
},
|
||||
{
|
||||
name: "Communities",
|
||||
url: "/communities",
|
||||
short_name: "Communities",
|
||||
description: "Browse communities",
|
||||
},
|
||||
]
|
||||
.concat(
|
||||
my_user
|
||||
? [
|
||||
{
|
||||
name: "Create Post",
|
||||
url: "/create_post",
|
||||
short_name: "Create Post",
|
||||
description: "Create a post.",
|
||||
},
|
||||
]
|
||||
: []
|
||||
)
|
||||
.concat(
|
||||
my_user?.local_user_view.person.admin || !community_creation_admin_only
|
||||
? [
|
||||
{
|
||||
name: "Create Community",
|
||||
url: "/create_community",
|
||||
short_name: "Create Community",
|
||||
description: "Create a community",
|
||||
},
|
||||
]
|
||||
: []
|
||||
),
|
||||
related_applications: [
|
||||
{
|
||||
platform: "f-droid",
|
||||
url: "https://f-droid.org/packages/com.jerboa/",
|
||||
id: "com.jerboa",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return Buffer.from(JSON.stringify(manifest)).toString("base64");
|
||||
}
|
||||
20
src/server/utils/get-error-page-data.ts
Normal file
20
src/server/utils/get-error-page-data.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { GetSiteResponse } from "lemmy-js-client";
|
||||
import { ErrorPageData } from "../../shared/utils";
|
||||
|
||||
export function getErrorPageData(error: Error, site?: GetSiteResponse) {
|
||||
const errorPageData: ErrorPageData = {};
|
||||
|
||||
if (site) {
|
||||
errorPageData.error = error.message;
|
||||
}
|
||||
|
||||
const adminMatrixIds = site?.admins
|
||||
.map(({ person: { matrix_user_id } }) => matrix_user_id)
|
||||
.filter(id => id) as string[] | undefined;
|
||||
|
||||
if (adminMatrixIds && adminMatrixIds.length > 0) {
|
||||
errorPageData.adminMatrixIds = adminMatrixIds;
|
||||
}
|
||||
|
||||
return errorPageData;
|
||||
}
|
||||
25
src/server/utils/set-forwarded-headers.ts
Normal file
25
src/server/utils/set-forwarded-headers.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { IncomingHttpHeaders } from "http";
|
||||
|
||||
export function setForwardedHeaders(headers: IncomingHttpHeaders): {
|
||||
[key: string]: string;
|
||||
} {
|
||||
const out: { [key: string]: string } = {};
|
||||
|
||||
if (headers.host) {
|
||||
out.host = headers.host;
|
||||
}
|
||||
|
||||
const realIp = headers["x-real-ip"];
|
||||
|
||||
if (realIp) {
|
||||
out["x-real-ip"] = realIp as string;
|
||||
}
|
||||
|
||||
const forwardedFor = headers["x-forwarded-for"];
|
||||
|
||||
if (forwardedFor) {
|
||||
out["x-forwarded-for"] = forwardedFor as string;
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ export class ErrorPage extends Component<any, any> {
|
|||
const { errorPageData } = this.isoData;
|
||||
|
||||
return (
|
||||
<div className="container-lg text-center">
|
||||
<div className="error-page container-lg text-center">
|
||||
<h1>
|
||||
{errorPageData
|
||||
? i18n.t("error_page_title")
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@ export class Footer extends Component<FooterProps, any> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<footer className="container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
|
||||
<footer className="app-footer container-lg navbar navbar-expand-md navbar-light navbar-bg p-3">
|
||||
<div className="navbar-collapse">
|
||||
<ul className="navbar-nav ml-auto">
|
||||
<ul className="navbar-nav ms-auto">
|
||||
{this.props.site?.version !== VERSION && (
|
||||
<li className="nav-item">
|
||||
<span className="nav-link">UI: {VERSION}</span>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { poll } from "@utils/helpers";
|
||||
import { amAdmin, canCreateCommunity } from "@utils/roles";
|
||||
import { Component, createRef, linkEvent } from "inferno";
|
||||
import { NavLink } from "inferno-router";
|
||||
import {
|
||||
|
|
@ -10,13 +13,9 @@ import { i18n } from "../../i18next";
|
|||
import { UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
amAdmin,
|
||||
canCreateCommunity,
|
||||
donateLemmyUrl,
|
||||
isBrowser,
|
||||
myAuth,
|
||||
numToSI,
|
||||
poll,
|
||||
showAvatars,
|
||||
toast,
|
||||
updateUnreadCountsInterval,
|
||||
|
|
@ -94,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() && (
|
||||
|
|
@ -103,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"
|
||||
|
|
@ -116,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>
|
||||
)}
|
||||
|
|
@ -135,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>
|
||||
)}
|
||||
|
|
@ -155,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>
|
||||
)}
|
||||
|
|
@ -182,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"
|
||||
|
|
@ -224,11 +223,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
)}
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("support_lemmy")}
|
||||
href={donateLemmyUrl}
|
||||
>
|
||||
<Icon icon="heart" classes="small" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("support_lemmy")}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -236,22 +238,28 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
<li id="navSearch" className="nav-item">
|
||||
<NavLink
|
||||
to="/search"
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("search")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("search")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{amAdmin() && (
|
||||
<li id="navAdmin" className="nav-item">
|
||||
<NavLink
|
||||
to="/admin"
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("admin_settings")}
|
||||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="settings" />
|
||||
<span className="d-inline ms-1 d-md-none ms-md-0">
|
||||
{i18n.t("admin_settings")}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -259,7 +267,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
<>
|
||||
<li id="navMessages" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/inbox"
|
||||
title={i18n.t("unread_messages", {
|
||||
count: Number(this.unreadInboxCount),
|
||||
|
|
@ -268,8 +276,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="bell" />
|
||||
<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>
|
||||
)}
|
||||
|
|
@ -278,7 +292,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
{this.moderatesSomething && (
|
||||
<li id="navModeration" className="nav-item">
|
||||
<NavLink
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
to="/reports"
|
||||
title={i18n.t("unread_reports", {
|
||||
count: Number(this.unreadReportCount),
|
||||
|
|
@ -287,8 +301,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="shield" />
|
||||
<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>
|
||||
)}
|
||||
|
|
@ -299,7 +319,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
<li id="navApplications" className="nav-item">
|
||||
<NavLink
|
||||
to="/registration_applications"
|
||||
className="nav-link"
|
||||
className="nav-link d-inline-flex align-items-center d-md-inline-block"
|
||||
title={i18n.t("unread_registration_applications", {
|
||||
count: Number(this.unreadApplicationCount),
|
||||
formattedCount: numToSI(this.unreadApplicationCount),
|
||||
|
|
@ -307,8 +327,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
|
|||
onMouseUp={linkEvent(this, handleCollapseClick)}
|
||||
>
|
||||
<Icon icon="clipboard" />
|
||||
<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>
|
||||
)}
|
||||
|
|
@ -339,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>
|
||||
|
|
@ -350,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>
|
||||
|
|
@ -362,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>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,11 @@ export class CommentForm extends Component<CommentFormProps, any> {
|
|||
: undefined;
|
||||
|
||||
return (
|
||||
<div className={["mb-3", this.props.containerClass].join(" ")}>
|
||||
<div
|
||||
className={["comment-form", "mb-3", this.props.containerClass].join(
|
||||
" "
|
||||
)}
|
||||
>
|
||||
{UserService.Instance.myUserInfo ? (
|
||||
<MarkdownTextArea
|
||||
initialContent={initialContent}
|
||||
|
|
@ -59,7 +63,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">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
import {
|
||||
amCommunityCreator,
|
||||
canAdmin,
|
||||
canMod,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isMod,
|
||||
} from "@utils/roles";
|
||||
import classNames from "classnames";
|
||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
|
|
@ -40,16 +48,10 @@ import {
|
|||
} from "../../interfaces";
|
||||
import { UserService } from "../../services";
|
||||
import {
|
||||
amCommunityCreator,
|
||||
canAdmin,
|
||||
canMod,
|
||||
colorList,
|
||||
commentTreeMaxDepth,
|
||||
futureDaysToUnixTime,
|
||||
getCommentParentId,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isMod,
|
||||
mdToHtml,
|
||||
mdToHtmlNoImages,
|
||||
myAuth,
|
||||
|
|
@ -291,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}
|
||||
|
|
@ -306,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>
|
||||
)}
|
||||
|
|
@ -337,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
|
||||
|
|
@ -353,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
|
||||
|
|
@ -365,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(
|
||||
|
|
@ -377,7 +379,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</span>
|
||||
)}
|
||||
</a>
|
||||
<span className="mr-1">•</span>
|
||||
<span className="me-1">•</span>
|
||||
</>
|
||||
)}
|
||||
<span>
|
||||
|
|
@ -468,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>
|
||||
)}
|
||||
|
|
@ -495,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>
|
||||
)}
|
||||
|
|
@ -948,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`}
|
||||
|
|
@ -980,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")}
|
||||
|
|
@ -988,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)}
|
||||
|
|
@ -1008,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")}
|
||||
|
|
@ -1017,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)}
|
||||
|
|
@ -1033,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}`}
|
||||
|
|
@ -1043,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)}
|
||||
|
|
@ -1057,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"
|
||||
|
|
@ -1082,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"
|
||||
|
|
@ -1107,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
|
||||
|
|
@ -1118,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 />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export class CommentReport extends Component<
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="comment-report">
|
||||
<CommentNode
|
||||
node={node}
|
||||
viewType={CommentViewType.Flat}
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ const isSiteAggregates = (
|
|||
|
||||
export const Badges = ({ counts, communityId }: BadgesProps) => {
|
||||
return (
|
||||
<ul className="my-1 list-inline">
|
||||
<ul className="badges my-1 list-inline">
|
||||
<li
|
||||
className="list-inline-item badge 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")}
|
||||
|
|
|
|||
|
|
@ -15,17 +15,19 @@ export class BannerIconHeader extends Component<BannerIconHeaderProps, any> {
|
|||
const banner = this.props.banner;
|
||||
const icon = this.props.icon;
|
||||
return (
|
||||
<div className="position-relative mb-2">
|
||||
{banner && <PictrsImage src={banner} banner alt="" />}
|
||||
{icon && (
|
||||
<PictrsImage
|
||||
src={icon}
|
||||
iconOverlay
|
||||
pushup={!!this.props.banner}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
(banner || icon) && (
|
||||
<div className="banner-icon-header position-relative mb-2">
|
||||
{banner && <PictrsImage src={banner} banner alt="" />}
|
||||
{icon && (
|
||||
<PictrsImage
|
||||
src={icon}
|
||||
iconOverlay
|
||||
pushup={!!this.props.banner}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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="sort-select form-select d-inline-block w-auto me-2 mb-2"
|
||||
aria-label={i18n.t("sort_type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -52,7 +52,7 @@ export class CommentSortSelect extends Component<
|
|||
<option value={"Old"}>{i18n.t("old")}</option>
|
||||
</select>
|
||||
<a
|
||||
className="text-muted"
|
||||
className="sort-select-help text-muted"
|
||||
href={sortingHelpUrl}
|
||||
rel={relTags}
|
||||
title={i18n.t("sorting_help")}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class DataTypeSelect extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="btn-group btn-group-toggle flex-wrap mb-2">
|
||||
<div className="data-type-select btn-group btn-group-toggle flex-wrap">
|
||||
<label
|
||||
className={`pointer btn btn-outline-secondary
|
||||
${this.state.type_ == DataType.Post && "active"}
|
||||
|
|
@ -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 EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<span>
|
||||
<span className="emoji-picker">
|
||||
<button
|
||||
className="btn btn-sm text-muted"
|
||||
data-tippy-content={i18n.t("emoji")}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -59,8 +59,8 @@ 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" />
|
||||
<div className="purge-warning mt-2 alert alert-danger" role="alert">
|
||||
<Icon icon="alert-triangle" classes="icon-inline me-2" />
|
||||
{i18n.t("purge_warning")}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export class ImageUploadForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form className="d-inline">
|
||||
<form className="image-upload-form d-inline">
|
||||
<label
|
||||
htmlFor={this.id}
|
||||
className="pointer text-muted small font-weight-bold"
|
||||
|
|
|
|||
|
|
@ -49,13 +49,13 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
return this.props.iconVersion ? (
|
||||
this.selectBtn
|
||||
) : (
|
||||
<div>
|
||||
<div className="language-select">
|
||||
{this.props.multiple && this.props.showLanguageWarning && (
|
||||
<div className="alert alert-warning" role="alert">
|
||||
{i18n.t("undetermined_language_warning")}
|
||||
</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"
|
||||
onClick={linkEvent(this, this.handleDeselectAll)}
|
||||
>
|
||||
<Icon icon="x" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={linkEvent(this, this.handleDeselectAll)}
|
||||
>
|
||||
<Icon icon="x" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,8 +98,8 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
|
||||
return (
|
||||
<select
|
||||
className={classNames("lang-select-action", {
|
||||
"form-control custom-select": !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="listing-type-select 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)}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import autosize from "autosize";
|
||||
import classNames from "classnames";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
|
|
@ -8,7 +9,6 @@ import { HttpService, UserService } from "../../services";
|
|||
import {
|
||||
concurrentImageUpload,
|
||||
customEmojisLookup,
|
||||
isBrowser,
|
||||
markdownFieldCharacterLimit,
|
||||
markdownHelpUrl,
|
||||
maxUploadImages,
|
||||
|
|
@ -136,7 +136,11 @@ export class MarkdownTextArea extends Component<
|
|||
// message={i18n.t("block_leaving")}
|
||||
// />
|
||||
return (
|
||||
<form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
|
||||
<form
|
||||
className="markdown-textarea"
|
||||
id={this.formId}
|
||||
onSubmit={linkEvent(this, this.handleSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.props.hideNavigationWarnings &&
|
||||
|
|
@ -144,10 +148,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)}
|
||||
|
|
@ -210,7 +214,7 @@ export class MarkdownTextArea extends Component<
|
|||
<textarea
|
||||
id={this.id}
|
||||
className={classNames(
|
||||
"form-control border-0 rounded-bottom",
|
||||
"form-control border-0 rounded-top-0 rounded-bottom",
|
||||
{
|
||||
"d-none": this.state.previewMode,
|
||||
}
|
||||
|
|
@ -248,7 +252,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 +278,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 +291,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 +299,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)}
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
|||
return (
|
||||
<span
|
||||
data-tippy-content={this.createdAndModifiedTimes()}
|
||||
className="font-italics pointer unselectable"
|
||||
className="moment-time font-italics pointer unselectable"
|
||||
>
|
||||
<Icon icon="edit-2" classes="icon-inline mr-1" />
|
||||
<Icon icon="edit-2" classes="icon-inline me-1" />
|
||||
{moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -46,7 +46,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
|||
const published = this.props.published;
|
||||
return (
|
||||
<span
|
||||
className="pointer unselectable"
|
||||
className="moment-time pointer unselectable"
|
||||
data-tippy-content={this.format(published)}
|
||||
>
|
||||
{moment.utc(published).fromNow(!this.props.showAgo)}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ export class Paginator extends Component<PaginatorProps, any> {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<div className="my-2">
|
||||
<div className="paginator 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)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<picture className="d-inline-block overflow-hidden">
|
||||
<picture className="pictrs-image d-inline-block overflow-hidden">
|
||||
<source srcSet={this.src("webp")} type="image/webp" />
|
||||
<source srcSet={this.props.src} />
|
||||
<source srcSet={this.src("jpg")} type="image/jpeg" />
|
||||
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export class RegistrationApplication extends Component<
|
|||
const accepted = a.creator_local_user.accepted_application;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="registration-application">
|
||||
<div>
|
||||
{i18n.t("applicant")}: <PersonListing person={a.creator} />
|
||||
</div>
|
||||
|
|
@ -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")}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -102,11 +102,11 @@ export class SearchableSelect extends Component<
|
|||
const { searchText, selectedIndex, loadingEllipses } = this.state;
|
||||
|
||||
return (
|
||||
<div className="dropdown">
|
||||
<div className="searchable-select dropdown">
|
||||
<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="sort-select form-select d-inline-block w-auto me-2"
|
||||
aria-label={i18n.t("sort_type")}
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
|
|
@ -76,7 +76,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
|
|||
<option value={"TopAll"}>{i18n.t("top_all")}</option>
|
||||
</select>
|
||||
<a
|
||||
className="text-muted"
|
||||
className="sort-select-icon text-muted"
|
||||
href={sortingHelpUrl}
|
||||
rel={relTags}
|
||||
title={i18n.t("sorting_help")}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
CommunityResponse,
|
||||
|
|
@ -11,12 +13,9 @@ import { InitialFetchRequest } from "../../interfaces";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
editCommunity,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
numToSI,
|
||||
|
|
@ -113,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">
|
||||
|
|
@ -210,7 +207,7 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="communities container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -223,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)}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="communities-search"
|
||||
className="form-control mr-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">
|
||||
{i18n.t("search")}
|
||||
</label>
|
||||
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
||||
<span>{i18n.t("search")}</span>
|
||||
</button>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
id="communities-search"
|
||||
className="form-control me-2 mb-2"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${i18n.t("search")}...`}
|
||||
onInput={linkEvent(this, this.handleSearchChange)}
|
||||
required
|
||||
minLength={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-auto">
|
||||
<label className="visually-hidden" htmlFor="communities-search">
|
||||
{i18n.t("search")}
|
||||
</label>
|
||||
<button type="submit" className="btn btn-secondary mb-2">
|
||||
<span>{i18n.t("search")}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,7 +85,10 @@ export class CommunityForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
|
||||
<form
|
||||
className="community-form"
|
||||
onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.props.loading &&
|
||||
|
|
@ -98,14 +101,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 +129,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 +155,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 +169,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 +182,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 +199,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 +216,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 +243,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 ? (
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
|
|||
return !this.props.realLink ? (
|
||||
<Link
|
||||
title={apubName}
|
||||
className={`${this.props.muted ? "text-muted" : ""}`}
|
||||
className={`community-link ${this.props.muted ? "text-muted" : ""}`}
|
||||
to={link}
|
||||
>
|
||||
{this.avatarAndName(displayName)}
|
||||
|
|
@ -45,7 +45,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
|
|||
) : (
|
||||
<a
|
||||
title={apubName}
|
||||
className={`${this.props.muted ? "text-muted" : ""}`}
|
||||
className={`community-link ${this.props.muted ? "text-muted" : ""}`}
|
||||
href={link}
|
||||
rel={relTags}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||
import {
|
||||
|
|
@ -62,7 +64,6 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
commentsToFlatNodes,
|
||||
communityRSSUrl,
|
||||
|
|
@ -75,8 +76,6 @@ import {
|
|||
getCommentParentId,
|
||||
getDataTypeString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
myAuth,
|
||||
postToCommentSortType,
|
||||
relTags,
|
||||
|
|
@ -328,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")}{" "}
|
||||
|
|
@ -358,7 +357,9 @@ export class Community extends Component<
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderCommunity()}</div>;
|
||||
return (
|
||||
<div className="community container-lg">{this.renderCommunity()}</div>
|
||||
);
|
||||
}
|
||||
|
||||
sidebar(res: GetCommunityResponse) {
|
||||
|
|
@ -511,13 +512,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 && (
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="create-community container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { amAdmin, amMod, amTopMod } from "@utils/roles";
|
||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
import { Link } from "inferno-router";
|
||||
|
|
@ -16,15 +17,7 @@ import {
|
|||
} from "lemmy-js-client";
|
||||
import { i18n } from "../../i18next";
|
||||
import { UserService } from "../../services";
|
||||
import {
|
||||
amAdmin,
|
||||
amMod,
|
||||
amTopMod,
|
||||
getUnixTime,
|
||||
hostname,
|
||||
mdToHtml,
|
||||
myAuthRequired,
|
||||
} from "../../utils";
|
||||
import { getUnixTime, hostname, mdToHtml, myAuthRequired } from "../../utils";
|
||||
import { Badges } from "../common/badges";
|
||||
import { BannerIconHeader } from "../common/banner-icon-header";
|
||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||
|
|
@ -109,7 +102,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="community-sidebar">
|
||||
{!this.state.showEdit ? (
|
||||
this.sidebar()
|
||||
) : (
|
||||
|
|
@ -179,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")}
|
||||
</>
|
||||
)}
|
||||
|
|
@ -199,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 ? (
|
||||
|
|
@ -210,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>
|
||||
)}
|
||||
|
|
@ -253,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}`}
|
||||
|
|
@ -266,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 ? (
|
||||
|
|
@ -279,7 +272,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -287,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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -429,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 />
|
||||
|
|
@ -460,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 />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
|
|||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="admin-settings container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-12">
|
||||
<div className="home-emojis-form col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -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")}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import { canCreateCommunity } from "@utils/roles";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent, MouseEventHandler } from "inferno";
|
||||
import { Component, MouseEventHandler, linkEvent } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
import { Link } from "inferno-router";
|
||||
import {
|
||||
|
|
@ -57,7 +60,7 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
canCreateCommunity,
|
||||
RouteDataResponse,
|
||||
commentsToFlatNodes,
|
||||
editComment,
|
||||
editPost,
|
||||
|
|
@ -68,16 +71,12 @@ import {
|
|||
getCommentParentId,
|
||||
getDataTypeString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
getRandomFromList,
|
||||
mdToHtml,
|
||||
myAuth,
|
||||
postToCommentSortType,
|
||||
QueryParams,
|
||||
relTags,
|
||||
restoreScrollPosition,
|
||||
RouteDataResponse,
|
||||
saveScrollPosition,
|
||||
setIsoData,
|
||||
setupTippy,
|
||||
|
|
@ -195,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)}{" "}
|
||||
|
|
@ -210,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>
|
||||
);
|
||||
|
|
@ -375,7 +374,7 @@ export class Home extends Component<any, HomeState> {
|
|||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -443,16 +442,17 @@ export class Home extends Component<any, HomeState> {
|
|||
admins={admins}
|
||||
counts={counts}
|
||||
showLocal={showLocal(this.isoData)}
|
||||
isMobile={true}
|
||||
/>
|
||||
)}
|
||||
{showTrendingMobile && (
|
||||
<div className="col-12 card border-secondary mb-3">
|
||||
<div className="card-body">{this.trendingCommunities(true)}</div>
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.trendingCommunities()}
|
||||
</div>
|
||||
)}
|
||||
{showSubscribedMobile && (
|
||||
<div className="col-12 card border-secondary mb-3">
|
||||
<div className="card-body">{this.subscribedCommunities}</div>
|
||||
<div className="card border-secondary mb-3">
|
||||
{this.subscribedCommunities(true)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -471,19 +471,7 @@ export class Home extends Component<any, HomeState> {
|
|||
return (
|
||||
<div id="sidebarContainer">
|
||||
<section id="sidebarMain" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
{this.trendingCommunities()}
|
||||
{canCreateCommunity(this.state.siteRes) && (
|
||||
<LinkButton
|
||||
path="/create_community"
|
||||
translationKey="create_a_community"
|
||||
/>
|
||||
)}
|
||||
<LinkButton
|
||||
path="/communities"
|
||||
translationKey="explore_communities"
|
||||
/>
|
||||
</div>
|
||||
{this.trendingCommunities()}
|
||||
</section>
|
||||
<SiteSidebar
|
||||
site={site}
|
||||
|
|
@ -492,18 +480,20 @@ export class Home extends Component<any, HomeState> {
|
|||
showLocal={showLocal(this.isoData)}
|
||||
/>
|
||||
{this.hasFollows && (
|
||||
<section
|
||||
id="sidebarSubscribed"
|
||||
className="card border-secondary mb-3"
|
||||
>
|
||||
<div className="card-body">{this.subscribedCommunities}</div>
|
||||
</section>
|
||||
<div className="accordion">
|
||||
<section
|
||||
id="sidebarSubscribed"
|
||||
className="card border-secondary mb-3"
|
||||
>
|
||||
{this.subscribedCommunities(false)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
trendingCommunities(isMobile = false) {
|
||||
trendingCommunities() {
|
||||
switch (this.state.trendingCommunitiesRes?.state) {
|
||||
case "loading":
|
||||
return (
|
||||
|
|
@ -514,68 +504,103 @@ export class Home extends Component<any, HomeState> {
|
|||
case "success": {
|
||||
const trending = this.state.trendingCommunitiesRes.data.communities;
|
||||
return (
|
||||
<div className={!isMobile ? "mb-2" : ""}>
|
||||
<h5>
|
||||
<T i18nKey="trending_communities">
|
||||
#
|
||||
<Link className="text-body" to="/communities">
|
||||
<>
|
||||
<header className="card-header d-flex align-items-center">
|
||||
<h5 className="mb-0">
|
||||
<T i18nKey="trending_communities">
|
||||
#
|
||||
</Link>
|
||||
</T>
|
||||
</h5>
|
||||
<ul className="list-inline mb-0">
|
||||
{trending.map(cv => (
|
||||
<li
|
||||
key={cv.community.id}
|
||||
className="list-inline-item d-inline-block"
|
||||
>
|
||||
<CommunityLink community={cv.community} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Link className="text-body" to="/communities">
|
||||
#
|
||||
</Link>
|
||||
</T>
|
||||
</h5>
|
||||
</header>
|
||||
<div className="card-body">
|
||||
{trending.length > 0 && (
|
||||
<ul className="list-inline">
|
||||
{trending.map(cv => (
|
||||
<li key={cv.community.id} className="list-inline-item">
|
||||
<CommunityLink community={cv.community} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{canCreateCommunity(this.state.siteRes) && (
|
||||
<LinkButton
|
||||
path="/create_community"
|
||||
translationKey="create_a_community"
|
||||
/>
|
||||
)}
|
||||
<LinkButton
|
||||
path="/communities"
|
||||
translationKey="explore_communities"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get subscribedCommunities() {
|
||||
subscribedCommunities(isMobile = false) {
|
||||
const { subscribedCollapsed } = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h5>
|
||||
<T class="d-inline" i18nKey="subscribed_to_communities">
|
||||
#
|
||||
<Link className="text-body" to="/communities">
|
||||
<>
|
||||
<header
|
||||
className="card-header d-flex align-items-center"
|
||||
id="sidebarSubscribedHeader"
|
||||
>
|
||||
<h5 className="mb-0 d-inline">
|
||||
<T class="d-inline" i18nKey="subscribed_to_communities">
|
||||
#
|
||||
</Link>
|
||||
</T>
|
||||
<button
|
||||
className="btn btn-sm text-muted"
|
||||
onClick={linkEvent(this, this.handleCollapseSubscribe)}
|
||||
aria-label={i18n.t("collapse")}
|
||||
data-tippy-content={i18n.t("collapse")}
|
||||
>
|
||||
<Icon
|
||||
icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
|
||||
classes="icon-inline"
|
||||
/>
|
||||
</button>
|
||||
</h5>
|
||||
{!subscribedCollapsed && (
|
||||
<ul className="list-inline mb-0">
|
||||
{UserService.Instance.myUserInfo?.follows.map(cfv => (
|
||||
<li
|
||||
key={cfv.community.id}
|
||||
className="list-inline-item d-inline-block"
|
||||
>
|
||||
<CommunityLink community={cfv.community} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<Link className="text-body" to="/communities">
|
||||
#
|
||||
</Link>
|
||||
</T>
|
||||
</h5>
|
||||
{!isMobile && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm text-muted"
|
||||
onClick={linkEvent(this, this.handleCollapseSubscribe)}
|
||||
aria-label={
|
||||
subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-tippy-content={
|
||||
subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebarSubscribedBody"
|
||||
aria-expanded="true"
|
||||
aria-controls="sidebarSubscribedBody"
|
||||
>
|
||||
<Icon
|
||||
icon={`${subscribedCollapsed ? "plus" : "minus"}-square`}
|
||||
classes="icon-inline"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
<div
|
||||
id="sidebarSubscribedBody"
|
||||
className="collapse show"
|
||||
aria-labelledby="sidebarSubscribedHeader"
|
||||
>
|
||||
<div className="card-body">
|
||||
<ul className="list-inline mb-0">
|
||||
{UserService.Instance.myUserInfo?.follows.map(cfv => (
|
||||
<li
|
||||
key={cfv.community.id}
|
||||
className="list-inline-item d-inline-block"
|
||||
>
|
||||
<CommunityLink community={cfv.community} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -709,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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export class Instances extends Component<any, InstancesState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home-instances container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class Legal extends Component<any, LegalState> {
|
|||
render() {
|
||||
const legal = this.state.siteRes.site_view.local_site.legal_information;
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="legal container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
|
||||
import { i18n } from "../../i18next";
|
||||
import { UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import { isBrowser, myAuth, setIsoData, toast, validEmail } from "../../utils";
|
||||
import { myAuth, setIsoData, toast, validEmail } from "../../utils";
|
||||
import { HtmlTags } from "../common/html-tags";
|
||||
import { Spinner } from "../common/icon";
|
||||
|
||||
|
|
@ -49,7 +50,7 @@ export class Login extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="login container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -66,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"
|
||||
|
|
@ -86,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>
|
||||
|
|
@ -116,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"
|
||||
|
|
@ -137,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,29 +51,29 @@ 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>
|
||||
<input
|
||||
type="number"
|
||||
id="rate-limit"
|
||||
className="form-control col-12"
|
||||
min={0}
|
||||
value={rateLimitValue}
|
||||
onInput={handleRateLimit}
|
||||
/>
|
||||
<label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
|
||||
{i18n.t("per_second")}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="rate-limit-per-second"
|
||||
className="form-control col-12"
|
||||
min={0}
|
||||
value={rateLimitPerSecondValue}
|
||||
onInput={handleRateLimitPerSecond}
|
||||
/>
|
||||
<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"
|
||||
min={0}
|
||||
value={rateLimitValue}
|
||||
onInput={handleRateLimit}
|
||||
/>
|
||||
</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"
|
||||
min={0}
|
||||
value={rateLimitPerSecondValue}
|
||||
onInput={handleRateLimitPerSecond}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -133,7 +133,10 @@ export default class RateLimitsForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, submitRateLimitForm)}>
|
||||
<form
|
||||
className="rate-limit-form"
|
||||
onSubmit={linkEvent(this, submitRateLimitForm)}
|
||||
>
|
||||
<h5>{i18n.t("rate_limit_header")}</h5>
|
||||
<Tabs
|
||||
tabs={rateLimitTypes.map(rateLimitType => ({
|
||||
|
|
@ -157,20 +160,18 @@ export default class RateLimitsForm extends Component<
|
|||
),
|
||||
}))}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className="col-12">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary mr-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
capitalizeFirstLetter(i18n.t("save"))
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-12 mb-3">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-secondary me-2"
|
||||
disabled={this.props.loading}
|
||||
>
|
||||
{this.props.loading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
capitalizeFirstLetter(i18n.t("save"))
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export class Setup extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home-setup container-lg">
|
||||
<Helmet title={this.documentTitle} />
|
||||
<div className="row">
|
||||
<div className="col-12 offset-lg-3 col-lg-6">
|
||||
|
|
@ -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" ? (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { Options, passwordStrength } from "check-password-strength";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
|
|
@ -13,7 +14,6 @@ import { i18n } from "../../i18next";
|
|||
import { UserService } from "../../services";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
isBrowser,
|
||||
joinLemmyUrl,
|
||||
mdToHtml,
|
||||
myAuth,
|
||||
|
|
@ -127,7 +127,7 @@ export class Signup extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="home-signup container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -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,27 +298,22 @@ export class Signup extends Component<any, State> {
|
|||
</>
|
||||
)}
|
||||
{this.renderCaptcha()}
|
||||
{siteView.local_site.enable_nsfw && (
|
||||
<div className="form-group row">
|
||||
<div className="col-sm-10">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="register-show-nsfw"
|
||||
type="checkbox"
|
||||
checked={this.state.form.show_nsfw}
|
||||
onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label"
|
||||
htmlFor="register-show-nsfw"
|
||||
>
|
||||
{i18n.t("show_nsfw")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="mb-3 row">
|
||||
<div className="col-sm-10">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="register-show-nsfw"
|
||||
type="checkbox"
|
||||
checked={this.state.form.show_nsfw}
|
||||
onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="register-show-nsfw">
|
||||
{i18n.t("show_nsfw")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
tabIndex={-1}
|
||||
autoComplete="false"
|
||||
|
|
@ -329,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" ? (
|
||||
|
|
@ -351,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"
|
||||
|
|
@ -396,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)}
|
||||
|
|
|
|||
|
|
@ -120,7 +120,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
|
|||
render() {
|
||||
const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
|
||||
<form
|
||||
className="site-form"
|
||||
onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.props.loading &&
|
||||
|
|
@ -139,7 +142,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 +159,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 +169,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 +178,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 +193,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 +205,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 +219,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 +238,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 +257,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 +269,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 +280,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 +295,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 +317,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 +339,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 +361,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 +380,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 +392,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 +404,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 +418,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 +437,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 +456,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 +483,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 +501,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 +522,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 +545,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 +568,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 +588,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 +600,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 +609,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 +651,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={
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ interface SiteSidebarProps {
|
|||
showLocal: boolean;
|
||||
counts?: SiteAggregates;
|
||||
admins?: PersonView[];
|
||||
isMobile?: boolean;
|
||||
}
|
||||
|
||||
interface SiteSidebarState {
|
||||
|
|
@ -29,39 +30,58 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<section id="sidebarInfo" className="card border-secondary mb-3">
|
||||
<div className="card-body">
|
||||
<div>
|
||||
<div className="mb-2">{this.siteName()}</div>
|
||||
<div className="site-sidebar accordion">
|
||||
<section id="sidebarInfo" className="card border-secondary mb-3">
|
||||
<header
|
||||
className="card-header d-flex align-items-center"
|
||||
id="sidebarInfoHeader"
|
||||
>
|
||||
{this.siteName()}
|
||||
{!this.state.collapsed && (
|
||||
<>
|
||||
<BannerIconHeader banner={this.props.site.banner} />
|
||||
{this.siteInfo()}
|
||||
</>
|
||||
<BannerIconHeader banner={this.props.site.banner} />
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div
|
||||
id="sidebarInfoBody"
|
||||
className="collapse show"
|
||||
aria-labelledby="sidebarInfoHeader"
|
||||
>
|
||||
<div className="card-body">{this.siteInfo()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
siteName() {
|
||||
return (
|
||||
<h5 className="mb-0 d-inline">
|
||||
{this.props.site.name}
|
||||
<button
|
||||
className="btn btn-sm text-muted"
|
||||
onClick={linkEvent(this, this.handleCollapseSidebar)}
|
||||
aria-label={i18n.t("collapse")}
|
||||
data-tippy-content={i18n.t("collapse")}
|
||||
>
|
||||
{this.state.collapsed ? (
|
||||
<Icon icon="plus-square" classes="icon-inline" />
|
||||
) : (
|
||||
<Icon icon="minus-square" classes="icon-inline" />
|
||||
)}
|
||||
</button>
|
||||
</h5>
|
||||
<>
|
||||
<h5 className="mb-0 d-inline">{this.props.site.name}</h5>
|
||||
{!this.props.isMobile && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm"
|
||||
onClick={linkEvent(this, this.handleCollapseSidebar)}
|
||||
aria-label={
|
||||
this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-tippy-content={
|
||||
this.state.collapsed ? i18n.t("expand") : i18n.t("collapse")
|
||||
}
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#sidebarInfoBody"
|
||||
aria-expanded="true"
|
||||
aria-controls="sidebarInfoBody"
|
||||
>
|
||||
{this.state.collapsed ? (
|
||||
<Icon icon="plus-square" classes="icon-inline" />
|
||||
) : (
|
||||
<Icon icon="minus-square" classes="icon-inline" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="col-12">
|
||||
<div className="tagline-form col-12">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -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 ? (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { debounce, getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import { amAdmin, amMod } from "@utils/roles";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { T } from "inferno-i18next-dess";
|
||||
|
|
@ -34,17 +37,11 @@ import { FirstLoadService } from "../services/FirstLoadService";
|
|||
import { HttpService, RequestState } from "../services/HttpService";
|
||||
import {
|
||||
Choice,
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
amAdmin,
|
||||
amMod,
|
||||
debounce,
|
||||
fetchLimit,
|
||||
fetchUsers,
|
||||
getIdFromString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
getUpdatedSearchId,
|
||||
myAuth,
|
||||
personToChoice,
|
||||
|
|
@ -584,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
|
||||
|
|
@ -742,7 +739,7 @@ export class Modlog extends Component<
|
|||
const { actionType, modId, userId } = getModlogQueryParams();
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="modlog container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -756,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>#
|
||||
|
|
@ -773,34 +770,40 @@ export class Modlog extends Component<
|
|||
<span>{i18n.t("modlog")}</span>
|
||||
</h5>
|
||||
)}
|
||||
<div className="form-row">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="custom-select col-sm-6"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{i18n.t("filter_by_action")}
|
||||
</option>
|
||||
<option value={"All"}>{i18n.t("all")}</option>
|
||||
<option value={"ModRemovePost"}>Removing Posts</option>
|
||||
<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={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>Adding Mod to Community</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
<option value={"ModAdd"}>Adding Mod to Site</option>
|
||||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
<div className="row mb-2">
|
||||
<div className="col-sm-6">
|
||||
<select
|
||||
value={actionType}
|
||||
onChange={linkEvent(this, this.handleFilterActionChange)}
|
||||
className="form-select"
|
||||
aria-label="action"
|
||||
>
|
||||
<option disabled aria-hidden="true">
|
||||
{i18n.t("filter_by_action")}
|
||||
</option>
|
||||
<option value={"All"}>{i18n.t("all")}</option>
|
||||
<option value={"ModRemovePost"}>Removing Posts</option>
|
||||
<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={"ModBanFromCommunity"}>
|
||||
Banning From Communities
|
||||
</option>
|
||||
<option value={"ModAddCommunity"}>
|
||||
Adding Mod to Community
|
||||
</option>
|
||||
<option value={"ModTransferCommunity"}>
|
||||
Transferring Communities
|
||||
</option>
|
||||
<option value={"ModAdd"}>Adding Mod to Site</option>
|
||||
<option value={"ModBan"}>Banning From Site</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-row mb-2">
|
||||
<div className="row mb-2">
|
||||
<Filter
|
||||
filterType="user"
|
||||
onChange={this.handleUserChange}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
|
|||
render() {
|
||||
return (
|
||||
<div
|
||||
className={`mx-2 d-inline-block unselectable pointer`}
|
||||
className={`cake-day mx-2 d-inline-block unselectable pointer`}
|
||||
data-tippy-content={this.cakeDayTippy()}
|
||||
>
|
||||
<Icon icon="cake" classes="icon-inline" />
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ export class Inbox extends Component<any, InboxState> {
|
|||
const auth = myAuth();
|
||||
const inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined;
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="inbox container-lg">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export class PasswordChange extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="password-change container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -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("/");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,19 +107,9 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
|
|||
setupTippy();
|
||||
}
|
||||
|
||||
// TODO wut?
|
||||
// componentDidUpdate(lastProps: UserDetailsProps) {
|
||||
// for (const key of Object.keys(lastProps)) {
|
||||
// if (lastProps[key] !== this.props[key]) {
|
||||
// this.fetchUserData();
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="person-details">
|
||||
{this.viewSelector(this.props.view)}
|
||||
|
||||
<Paginator page={this.props.page} onChange={this.handlePageChange} />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import classNames from "classnames";
|
||||
import { Component } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
import { Person } from "lemmy-js-client";
|
||||
|
|
@ -48,7 +49,13 @@ export class PersonListing extends Component<PersonListingProps, any> {
|
|||
{!this.props.realLink ? (
|
||||
<Link
|
||||
title={apubName}
|
||||
className={this.props.muted ? "text-muted" : "text-info"}
|
||||
className={classNames(
|
||||
"person-listing d-inline-flex align-items-baseline",
|
||||
{
|
||||
"text-muted": this.props.muted,
|
||||
"text-info": !this.props.muted,
|
||||
}
|
||||
)}
|
||||
to={link}
|
||||
>
|
||||
{this.avatarAndName(displayName)}
|
||||
|
|
@ -56,7 +63,9 @@ export class PersonListing extends Component<PersonListingProps, any> {
|
|||
) : (
|
||||
<a
|
||||
title={apubName}
|
||||
className={this.props.muted ? "text-muted" : "text-info"}
|
||||
className={`person-listing d-inline-flex align-items-baseline ${
|
||||
this.props.muted ? "text-muted" : "text-info"
|
||||
}`}
|
||||
href={link}
|
||||
rel={relTags}
|
||||
>
|
||||
|
|
@ -73,10 +82,14 @@ export class PersonListing extends Component<PersonListingProps, any> {
|
|||
const avatar = this.props.person.avatar;
|
||||
return (
|
||||
<>
|
||||
{avatar &&
|
||||
!this.props.hideAvatar &&
|
||||
{!this.props.hideAvatar &&
|
||||
!this.props.person.banned &&
|
||||
showAvatars() && <PictrsImage src={avatar} icon />}
|
||||
showAvatars() && (
|
||||
<PictrsImage
|
||||
src={avatar ?? "/static/assets/icons/icon-96x96.png"}
|
||||
icon
|
||||
/>
|
||||
)}
|
||||
<span>{displayName}</span>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import { getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import { canMod, isAdmin, isBanned } from "@utils/roles";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import classNames from "classnames";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
|
|
@ -53,9 +56,7 @@ import { UserService } from "../../services";
|
|||
import { FirstLoadService } from "../../services/FirstLoadService";
|
||||
import { HttpService, RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
canMod,
|
||||
capitalizeFirstLetter,
|
||||
editComment,
|
||||
editPost,
|
||||
|
|
@ -66,10 +67,6 @@ import {
|
|||
futureDaysToUnixTime,
|
||||
getCommentParentId,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
mdToHtml,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
|
|
@ -389,7 +386,11 @@ export class Profile extends Component<
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderPersonRes()}</div>;
|
||||
return (
|
||||
<div className="person-profile container-lg">
|
||||
{this.renderPersonRes()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
get viewRadios() {
|
||||
|
|
@ -415,6 +416,7 @@ export class Profile extends Component<
|
|||
>
|
||||
<input
|
||||
type="radio"
|
||||
className="btn-check"
|
||||
value={view}
|
||||
checked={active}
|
||||
onChange={linkEvent(this, this.handleViewChange)}
|
||||
|
|
@ -432,7 +434,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}
|
||||
|
|
@ -481,22 +483,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>
|
||||
)}
|
||||
|
|
@ -507,7 +509,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}
|
||||
|
|
@ -517,7 +519,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}`}
|
||||
>
|
||||
|
|
@ -526,7 +528,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,
|
||||
|
|
@ -538,7 +540,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,
|
||||
|
|
@ -557,7 +559,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")}
|
||||
|
|
@ -567,7 +569,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")}
|
||||
|
|
@ -586,13 +588,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),
|
||||
|
|
@ -610,7 +612,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)
|
||||
|
|
@ -636,14 +638,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)}
|
||||
|
|
@ -654,12 +656,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"
|
||||
|
|
@ -679,14 +681,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)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -117,7 +117,11 @@ export class RegistrationApplications extends Component<
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderApps()}</div>;
|
||||
return (
|
||||
<div className="registration-applications container-lg">
|
||||
{this.renderApps()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
unreadOrAllRadios() {
|
||||
|
|
@ -130,6 +134,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 +148,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 +162,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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { amAdmin } from "@utils/roles";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
CommentReportResponse,
|
||||
|
|
@ -24,7 +25,6 @@ import { FirstLoadService } from "../../services/FirstLoadService";
|
|||
import { RequestState } from "../../services/HttpService";
|
||||
import {
|
||||
RouteDataResponse,
|
||||
amAdmin,
|
||||
editCommentReport,
|
||||
editPostReport,
|
||||
editPrivateMessageReport,
|
||||
|
|
@ -142,7 +142,7 @@ export class Reports extends Component<any, ReportsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="person-reports container-lg">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<HtmlTags
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { debounce } from "@utils/helpers";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
|
|
@ -18,10 +19,8 @@ import {
|
|||
Choice,
|
||||
capitalizeFirstLetter,
|
||||
communityToChoice,
|
||||
debounce,
|
||||
elementUrl,
|
||||
emDash,
|
||||
enableNsfw,
|
||||
fetchCommunities,
|
||||
fetchThemeList,
|
||||
fetchUsers,
|
||||
|
|
@ -111,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`}
|
||||
|
|
@ -241,7 +240,7 @@ export class Settings extends Component<any, SettingsState> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="person-settings container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -305,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>
|
||||
|
|
@ -321,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"
|
||||
|
|
@ -340,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"
|
||||
|
|
@ -359,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 />
|
||||
) : (
|
||||
|
|
@ -468,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"
|
||||
|
|
@ -485,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>
|
||||
|
|
@ -500,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>
|
||||
|
|
@ -516,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"
|
||||
|
|
@ -534,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")}
|
||||
|
|
@ -546,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")}
|
||||
|
|
@ -557,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">
|
||||
|
|
@ -566,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")}
|
||||
|
|
@ -594,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">
|
||||
|
|
@ -603,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")}
|
||||
|
|
@ -617,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_={
|
||||
|
|
@ -631,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={
|
||||
|
|
@ -642,23 +650,21 @@ export class Settings extends Component<any, SettingsState> {
|
|||
/>
|
||||
</div>
|
||||
</form>
|
||||
{enableNsfw(this.state.siteRes) && (
|
||||
<div className="form-group">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="user-show-nsfw"
|
||||
type="checkbox"
|
||||
checked={this.state.saveUserSettingsForm.show_nsfw}
|
||||
onChange={linkEvent(this, this.handleShowNsfwChange)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="user-show-nsfw">
|
||||
{i18n.t("show_nsfw")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
id="user-show-nsfw"
|
||||
type="checkbox"
|
||||
checked={this.state.saveUserSettingsForm.show_nsfw}
|
||||
onChange={linkEvent(this, this.handleShowNsfwChange)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor="user-show-nsfw">
|
||||
{i18n.t("show_nsfw")}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
</div>
|
||||
<div className="input-group mb-3">
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
|
|
@ -672,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"
|
||||
|
|
@ -686,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"
|
||||
|
|
@ -700,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"
|
||||
|
|
@ -717,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"
|
||||
|
|
@ -734,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"
|
||||
|
|
@ -751,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"
|
||||
|
|
@ -775,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 />
|
||||
) : (
|
||||
|
|
@ -785,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
|
||||
|
|
@ -812,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)}
|
||||
>
|
||||
|
|
@ -846,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"
|
||||
|
|
@ -869,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"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export class VerifyEmail extends Component<any, State> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="verfy-email container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { getQueryParams } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import { Component } from "inferno";
|
||||
import { RouteComponentProps } from "inferno-router/dist/Route";
|
||||
import {
|
||||
|
|
@ -17,12 +19,10 @@ import {
|
|||
} from "../../services/HttpService";
|
||||
import {
|
||||
Choice,
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
enableDownvotes,
|
||||
enableNsfw,
|
||||
getIdFromString,
|
||||
getQueryParams,
|
||||
myAuth,
|
||||
setIsoData,
|
||||
} from "../../utils";
|
||||
|
|
@ -163,7 +163,7 @@ export class CreatePost extends Component<
|
|||
| undefined;
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="create-post container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export class MetadataCard extends Component<
|
|||
return (
|
||||
<>
|
||||
{!this.state.expanded && post.embed_title && post.url && (
|
||||
<div className="card border-secondary mt-3 mb-2">
|
||||
<div className="post-metadata-card card border-secondary mt-3 mb-2">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="card-body">
|
||||
|
|
@ -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>
|
||||
</>
|
||||
|
|
@ -75,7 +75,10 @@ export class MetadataCard extends Component<
|
|||
</div>
|
||||
)}
|
||||
{this.state.expanded && post.embed_video_url && (
|
||||
<iframe src={post.embed_video_url}></iframe>
|
||||
<iframe
|
||||
className="post-metadata-iframe"
|
||||
src={post.embed_video_url}
|
||||
></iframe>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { debounce } from "@utils/helpers";
|
||||
import autosize from "autosize";
|
||||
import { Component, InfernoNode, linkEvent } from "inferno";
|
||||
import {
|
||||
|
|
@ -18,7 +19,6 @@ import {
|
|||
archiveTodayUrl,
|
||||
capitalizeFirstLetter,
|
||||
communityToChoice,
|
||||
debounce,
|
||||
fetchCommunities,
|
||||
getIdFromString,
|
||||
ghostArchiveUrl,
|
||||
|
|
@ -193,7 +193,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
|
|||
// !!this.state.form.name || !!this.state.form.url || !!this.state.form.body;
|
||||
// <Prompt when={promptCheck} message={i18n.t("block_leaving")} />
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handlePostSubmit)}>
|
||||
<form
|
||||
className="post-form"
|
||||
onSubmit={linkEvent(this, this.handlePostSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!!(
|
||||
|
|
@ -203,7 +206,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 +244,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 +253,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 +262,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 +280,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 +319,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 +345,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 +358,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 +381,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 +415,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 />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,14 @@
|
|||
import { canShare, share } from "@utils/browser";
|
||||
import {
|
||||
amAdmin,
|
||||
amCommunityCreator,
|
||||
amMod,
|
||||
canAdmin,
|
||||
canMod,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isMod,
|
||||
} from "@utils/roles";
|
||||
import classNames from "classnames";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { Link } from "inferno-router";
|
||||
|
|
@ -28,18 +39,9 @@ import { i18n } from "../../i18next";
|
|||
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
|
||||
import { UserService } from "../../services";
|
||||
import {
|
||||
amAdmin,
|
||||
amCommunityCreator,
|
||||
amMod,
|
||||
canAdmin,
|
||||
canMod,
|
||||
canShare,
|
||||
futureDaysToUnixTime,
|
||||
hostname,
|
||||
isAdmin,
|
||||
isBanned,
|
||||
isImage,
|
||||
isMod,
|
||||
isVideo,
|
||||
mdNoImages,
|
||||
mdToHtml,
|
||||
|
|
@ -49,7 +51,6 @@ import {
|
|||
numToSI,
|
||||
relTags,
|
||||
setupTippy,
|
||||
share,
|
||||
showScores,
|
||||
} from "../../utils";
|
||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||
|
|
@ -201,7 +202,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post = this.postView.post;
|
||||
|
||||
return (
|
||||
<div className="post-listing">
|
||||
<div className="post-listing mt-2">
|
||||
{!this.state.showEdit ? (
|
||||
<>
|
||||
{this.listing()}
|
||||
|
|
@ -367,33 +368,31 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
|
||||
createdLine() {
|
||||
const post_view = this.postView;
|
||||
const url = post_view.post.url;
|
||||
const body = post_view.post.body;
|
||||
return (
|
||||
<ul className="list-inline mb-1 text-muted small">
|
||||
<ul className="list-inline mb-1 text-muted small mt-2">
|
||||
<li className="list-inline-item">
|
||||
<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>
|
||||
)}
|
||||
{this.props.showCommunity && (
|
||||
<span>
|
||||
<span className="mx-1"> {i18n.t("to")} </span>
|
||||
<CommunityLink community={post_view.community} />
|
||||
</span>
|
||||
<>
|
||||
{" "}
|
||||
{i18n.t("to")} <CommunityLink community={post_view.community} />
|
||||
</>
|
||||
)}
|
||||
</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
|
||||
|
|
@ -402,21 +401,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</span>
|
||||
)}
|
||||
<li className="list-inline-item">•</li>
|
||||
{url && !(hostname(url) === getExternalHost()) && (
|
||||
<>
|
||||
<li className="list-inline-item">
|
||||
<a
|
||||
className="text-muted font-italic"
|
||||
href={url}
|
||||
title={url}
|
||||
rel={relTags}
|
||||
>
|
||||
{hostname(url)}
|
||||
</a>
|
||||
</li>
|
||||
<li className="list-inline-item">•</li>
|
||||
</>
|
||||
)}
|
||||
<li className="list-inline-item">
|
||||
<span>
|
||||
<MomentTime
|
||||
|
|
@ -425,28 +409,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
/>
|
||||
</span>
|
||||
</li>
|
||||
{body && (
|
||||
<>
|
||||
<li className="list-inline-item">•</li>
|
||||
<li className="list-inline-item">
|
||||
<button
|
||||
className="text-muted btn btn-sm btn-link p-0"
|
||||
data-tippy-content={mdNoImages.render(body)}
|
||||
data-tippy-allowHtml={true}
|
||||
onClick={linkEvent(this, this.handleShowBody)}
|
||||
>
|
||||
<Icon icon="book-open" classes="icon-inline mr-1" />
|
||||
</button>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
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"
|
||||
|
|
@ -464,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)}
|
||||
|
|
@ -497,7 +466,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post = this.postView.post;
|
||||
return (
|
||||
<Link
|
||||
className={`d-inline-block ${
|
||||
className={`d-inline ${
|
||||
!post.featured_community && !post.featured_local
|
||||
? "text-body"
|
||||
: "text-primary"
|
||||
|
|
@ -505,8 +474,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
to={`/post/${post.id}`}
|
||||
title={i18n.t("comments")}
|
||||
>
|
||||
<div
|
||||
className="d-inline-block"
|
||||
<span
|
||||
className="d-inline"
|
||||
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
|
||||
/>
|
||||
</Link>
|
||||
|
|
@ -518,35 +487,29 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const url = post.url;
|
||||
|
||||
return (
|
||||
<div className="post-title overflow-hidden">
|
||||
<h5>
|
||||
{url ? (
|
||||
this.props.showBody ? (
|
||||
<>
|
||||
<div className="post-title overflow-hidden">
|
||||
<h5 className="d-inline">
|
||||
{url && this.props.showBody ? (
|
||||
<a
|
||||
className={`d-inline-block ${
|
||||
className={
|
||||
!post.featured_community && !post.featured_local
|
||||
? "text-body"
|
||||
: "text-primary"
|
||||
}`}
|
||||
}
|
||||
href={url}
|
||||
title={url}
|
||||
rel={relTags}
|
||||
>
|
||||
<div
|
||||
className="d-inline-block"
|
||||
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
|
||||
/>
|
||||
</a>
|
||||
dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
|
||||
></a>
|
||||
) : (
|
||||
this.postLink
|
||||
)
|
||||
) : (
|
||||
this.postLink
|
||||
)}
|
||||
)}
|
||||
</h5>
|
||||
{(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)}
|
||||
>
|
||||
|
|
@ -559,13 +522,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
))}
|
||||
{post.removed && (
|
||||
<small className="ml-2 text-muted font-italic">
|
||||
<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" />
|
||||
|
|
@ -573,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" />
|
||||
|
|
@ -581,27 +544,50 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
)}
|
||||
{post.featured_community && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured")}
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured_in_community")}
|
||||
aria-label={i18n.t("featured_in_community")}
|
||||
>
|
||||
<Icon icon="pin" classes="icon-inline text-primary" />
|
||||
</small>
|
||||
)}
|
||||
{post.featured_local && (
|
||||
<small
|
||||
className="unselectable pointer ml-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured")}
|
||||
className="unselectable pointer ms-2 text-muted font-italic"
|
||||
data-tippy-content={i18n.t("featured_in_local")}
|
||||
aria-label={i18n.t("featured_in_local")}
|
||||
>
|
||||
<Icon icon="pin" classes="icon-inline text-secondary" />
|
||||
</small>
|
||||
)}
|
||||
{post.nsfw && (
|
||||
<small className="ml-2 text-muted font-italic">
|
||||
<small className="ms-2 badge text-bg-danger">
|
||||
{i18n.t("nsfw")}
|
||||
</small>
|
||||
)}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
{url && this.urlLine()}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
urlLine() {
|
||||
const post = this.postView.post;
|
||||
const url = post.url;
|
||||
|
||||
return (
|
||||
<p className="d-flex text-muted align-items-center gap-1 small m-0">
|
||||
{url && !(hostname(url) === getExternalHost()) && (
|
||||
<a
|
||||
className="text-muted font-italic"
|
||||
href={url}
|
||||
title={url}
|
||||
rel={relTags}
|
||||
>
|
||||
{hostname(url)}
|
||||
</a>
|
||||
)}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -610,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
|
||||
|
|
@ -631,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 mb-1">
|
||||
<div className="d-flex align-items-center justify-content-start flex-wrap text-muted">
|
||||
{this.commentsButton}
|
||||
{canShare() && (
|
||||
<button
|
||||
className="btn btn-link"
|
||||
className="btn btn-sm btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleShare)}
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -644,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}
|
||||
>
|
||||
|
|
@ -654,50 +640,94 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{mobile && !this.props.viewOnly && this.mobileVotes}
|
||||
{UserService.Instance.myUserInfo &&
|
||||
!this.props.viewOnly &&
|
||||
this.postActions(mobile)}
|
||||
this.postActions()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
postActions(mobile = false) {
|
||||
showPreviewButton() {
|
||||
const post_view = this.postView;
|
||||
const body = post_view.post.body;
|
||||
|
||||
return (
|
||||
<button
|
||||
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 me-1", {
|
||||
"text-success": this.state.showBody,
|
||||
})}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
postActions() {
|
||||
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
|
||||
// Possible enhancement: Make each button a component.
|
||||
const post_view = this.postView;
|
||||
const post = post_view.post;
|
||||
|
||||
return (
|
||||
<>
|
||||
{this.saveButton}
|
||||
{this.crossPostButton}
|
||||
{mobile && this.showMoreButton}
|
||||
{(!mobile || this.state.showAdvanced) && (
|
||||
<>
|
||||
{!this.myPost && (
|
||||
|
||||
{/**
|
||||
* If there is a URL, or if the post has a body and we were told not to
|
||||
* show the body, show the MetadataCard/body toggle.
|
||||
*/}
|
||||
{(post.url || (post.body && !this.props.showBody)) &&
|
||||
this.showPreviewButton()}
|
||||
|
||||
{this.showBody && post_view.post.body && this.viewSourceButton}
|
||||
|
||||
<div className="dropdown">
|
||||
<button
|
||||
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"
|
||||
aria-expanded="false"
|
||||
aria-controls="advancedButtonsDropdown"
|
||||
aria-label={i18n.t("more")}
|
||||
>
|
||||
<Icon icon="more-vertical" inline />
|
||||
</button>
|
||||
|
||||
<ul className="dropdown-menu" id="advancedButtonsDropdown">
|
||||
{!this.myPost ? (
|
||||
<>
|
||||
{this.reportButton}
|
||||
{this.blockButton}
|
||||
<li>{this.reportButton}</li>
|
||||
<li>{this.blockButton}</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li>{this.editButton}</li>
|
||||
<li>{this.deleteButton}</li>
|
||||
</>
|
||||
)}
|
||||
{this.myPost && (this.showBody || this.state.showAdvanced) && (
|
||||
<>
|
||||
{this.editButton}
|
||||
{this.deleteButton}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{this.state.showAdvanced && (
|
||||
<>
|
||||
{this.showBody && post_view.post.body && this.viewSourceButton}
|
||||
|
||||
{/* Any mod can do these, not limited to hierarchy*/}
|
||||
{(amMod(this.props.moderators) || amAdmin()) && (
|
||||
<>
|
||||
{this.lockButton}
|
||||
{this.featureButton}
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>{this.lockButton}</li>
|
||||
{this.featureButtons}
|
||||
</>
|
||||
)}
|
||||
{(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
|
||||
</>
|
||||
)}
|
||||
{!mobile && this.showMoreButton}
|
||||
|
||||
{(this.canMod_ || this.canAdmin_) && (
|
||||
<li>{this.modRemoveButton}</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -706,15 +736,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const post_view = this.postView;
|
||||
return (
|
||||
<Link
|
||||
className="btn btn-link text-muted py-0 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),
|
||||
|
|
@ -759,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>
|
||||
)}
|
||||
|
|
@ -768,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)}
|
||||
|
|
@ -783,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,
|
||||
})}
|
||||
>
|
||||
|
|
@ -804,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}
|
||||
|
|
@ -825,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",
|
||||
|
|
@ -846,12 +876,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get reportButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleShowReportDialog)}
|
||||
data-tippy-content={i18n.t("show_report_dialog")}
|
||||
aria-label={i18n.t("show_report_dialog")}
|
||||
>
|
||||
<Icon icon="flag" inline />
|
||||
<Icon classes="me-1" icon="flag" inline />
|
||||
{i18n.t("create_report")}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -859,12 +889,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get blockButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleBlockPersonClick)}
|
||||
data-tippy-content={i18n.t("block_user")}
|
||||
aria-label={i18n.t("block_user")}
|
||||
>
|
||||
{this.state.blockLoading ? <Spinner /> : <Icon icon="slash" inline />}
|
||||
{this.state.blockLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon classes="me-1" icon="slash" inline />
|
||||
)}
|
||||
{i18n.t("block_user")}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -872,12 +906,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
get editButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleEditClick)}
|
||||
data-tippy-content={i18n.t("edit")}
|
||||
aria-label={i18n.t("edit")}
|
||||
>
|
||||
<Icon icon="edit" inline />
|
||||
<Icon classes="me-1" icon="edit" inline />
|
||||
{i18n.t("edit")}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -887,41 +921,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const label = !deleted ? i18n.t("delete") : i18n.t("restore");
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleDeleteClick)}
|
||||
data-tippy-content={label}
|
||||
aria-label={label}
|
||||
>
|
||||
{this.state.deleteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon
|
||||
icon="trash"
|
||||
classes={classNames({ "text-danger": deleted })}
|
||||
inline
|
||||
/>
|
||||
<>
|
||||
<Icon
|
||||
icon="trash"
|
||||
classes={classNames("me-1", { "text-danger": deleted })}
|
||||
inline
|
||||
/>
|
||||
{label}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
get showMoreButton() {
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleShowAdvanced)}
|
||||
data-tippy-content={i18n.t("more")}
|
||||
aria-label={i18n.t("more")}
|
||||
>
|
||||
<Icon icon="more-vertical" inline />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
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")}
|
||||
|
|
@ -940,25 +963,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const label = locked ? i18n.t("unlock") : i18n.t("lock");
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleModLock)}
|
||||
data-tippy-content={label}
|
||||
aria-label={label}
|
||||
>
|
||||
{this.state.lockLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon
|
||||
icon="lock"
|
||||
classes={classNames({ "text-danger": locked })}
|
||||
inline
|
||||
/>
|
||||
<>
|
||||
<Icon
|
||||
icon="lock"
|
||||
classes={classNames("me-1", { "text-danger": locked })}
|
||||
inline
|
||||
/>
|
||||
{label}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
get featureButton() {
|
||||
get featureButtons() {
|
||||
const featuredCommunity = this.postView.post.featured_community;
|
||||
const labelCommunity = featuredCommunity
|
||||
? i18n.t("unfeature_from_community")
|
||||
|
|
@ -969,48 +994,56 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
? i18n.t("unfeature_from_local")
|
||||
: i18n.t("feature_in_local");
|
||||
return (
|
||||
<span>
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0 pl-0"
|
||||
onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
|
||||
data-tippy-content={labelCommunity}
|
||||
aria-label={labelCommunity}
|
||||
>
|
||||
{this.state.featureCommunityLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span>
|
||||
<Icon
|
||||
icon="pin"
|
||||
classes={classNames({ "text-success": featuredCommunity })}
|
||||
inline
|
||||
/>
|
||||
{i18n.t("community")}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{amAdmin() && (
|
||||
<>
|
||||
<li>
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
onClick={linkEvent(this, this.handleModFeaturePostLocal)}
|
||||
data-tippy-content={labelLocal}
|
||||
aria-label={labelLocal}
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
|
||||
data-tippy-content={labelCommunity}
|
||||
aria-label={labelCommunity}
|
||||
>
|
||||
{this.state.featureLocalLoading ? (
|
||||
{this.state.featureCommunityLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span>
|
||||
<>
|
||||
<Icon
|
||||
icon="pin"
|
||||
classes={classNames({ "text-success": featuredLocal })}
|
||||
classes={classNames("me-1", {
|
||||
"text-success": featuredCommunity,
|
||||
})}
|
||||
inline
|
||||
/>
|
||||
{i18n.t("local")}
|
||||
</span>
|
||||
{i18n.t("community")}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{amAdmin() && (
|
||||
<button
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(this, this.handleModFeaturePostLocal)}
|
||||
data-tippy-content={labelLocal}
|
||||
aria-label={labelLocal}
|
||||
>
|
||||
{this.state.featureLocalLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon
|
||||
icon="pin"
|
||||
classes={classNames("me-1", {
|
||||
"text-success": featuredLocal,
|
||||
})}
|
||||
inline
|
||||
/>
|
||||
{i18n.t("local")}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -1018,7 +1051,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
const removed = this.postView.post.removed;
|
||||
return (
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted py-0"
|
||||
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
|
||||
onClick={linkEvent(
|
||||
this,
|
||||
!removed ? this.handleModRemoveShow : this.handleModRemoveSubmit
|
||||
|
|
@ -1110,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)}
|
||||
>
|
||||
|
|
@ -1215,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)}
|
||||
|
|
@ -1237,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"
|
||||
|
|
@ -1247,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)}
|
||||
|
|
@ -1258,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"
|
||||
|
|
@ -1283,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"
|
||||
|
|
@ -1309,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}
|
||||
|
|
@ -1336,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)}
|
||||
|
|
@ -1420,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">
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export class PostListings extends Component<PostListingsProps, any> {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="post-listings">
|
||||
{this.posts.length > 0 ? (
|
||||
this.posts.map((post_view, idx) => (
|
||||
<>
|
||||
|
|
@ -96,9 +96,7 @@ export class PostListings extends Component<PostListingsProps, any> {
|
|||
onAddAdmin={this.props.onAddAdmin}
|
||||
onTransferCommunity={this.props.onTransferCommunity}
|
||||
/>
|
||||
{idx + 1 !== this.posts.length && (
|
||||
<hr className="my-3 border border-primary" />
|
||||
)}
|
||||
{idx + 1 !== this.posts.length && <hr className="my-3" />}
|
||||
</>
|
||||
))
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export class PostReport extends Component<PostReportProps, PostReportState> {
|
|||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="post-report">
|
||||
<PostListing
|
||||
post_view={pv}
|
||||
showCommunity={true}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import { debounce } from "@utils/helpers";
|
||||
import autosize from "autosize";
|
||||
import { Component, createRef, linkEvent, RefObject } from "inferno";
|
||||
import {
|
||||
|
|
@ -64,7 +66,6 @@ import {
|
|||
buildCommentsTree,
|
||||
commentsToFlatNodes,
|
||||
commentTreeMaxDepth,
|
||||
debounce,
|
||||
editComment,
|
||||
editWith,
|
||||
enableDownvotes,
|
||||
|
|
@ -73,7 +74,6 @@ import {
|
|||
getCommentParentId,
|
||||
getDepthFromComment,
|
||||
getIdFromProps,
|
||||
isBrowser,
|
||||
isImage,
|
||||
myAuth,
|
||||
restoreScrollPosition,
|
||||
|
|
@ -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")}{" "}
|
||||
|
|
@ -424,13 +424,13 @@ export class Post extends Component<any, PostState> {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <div className="container-lg">{this.renderPostRes()}</div>;
|
||||
return <div className="post container-lg">{this.renderPostRes()}</div>;
|
||||
}
|
||||
|
||||
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")} ➔
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@ export class CreatePrivateMessage extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="create-private-message container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
|
|||
|
|
@ -73,14 +73,17 @@ export class PrivateMessageForm extends Component<
|
|||
|
||||
render() {
|
||||
return (
|
||||
<form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
|
||||
<form
|
||||
className="private-message-form"
|
||||
onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
|
||||
>
|
||||
<NavigationPrompt
|
||||
when={
|
||||
!this.state.loading && !!this.state.content && !this.state.submitted
|
||||
}
|
||||
/>
|
||||
{!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 +93,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 +117,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 +134,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 ? (
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export class PrivateMessageReport extends Component<Props, State> {
|
|||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="private-message-report">
|
||||
<div>
|
||||
{i18n.t("creator")}:{" "}
|
||||
<PersonListing person={r.private_message_creator} />
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export class PrivateMessage extends Component<
|
|||
: message_view.creator;
|
||||
|
||||
return (
|
||||
<div className="border-top border-light">
|
||||
<div className="private-message border-top border-light">
|
||||
<div>
|
||||
<ul className="list-inline mb-0 text-muted small">
|
||||
{/* TODO refactor this */}
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { debounce, getQueryParams, getQueryString } from "@utils/helpers";
|
||||
import type { QueryParams } from "@utils/types";
|
||||
import type { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
|
|
@ -26,12 +28,10 @@ import { FirstLoadService } from "../services/FirstLoadService";
|
|||
import { HttpService, RequestState } from "../services/HttpService";
|
||||
import {
|
||||
Choice,
|
||||
QueryParams,
|
||||
RouteDataResponse,
|
||||
capitalizeFirstLetter,
|
||||
commentsToFlatNodes,
|
||||
communityToChoice,
|
||||
debounce,
|
||||
enableDownvotes,
|
||||
enableNsfw,
|
||||
fetchCommunities,
|
||||
|
|
@ -39,8 +39,6 @@ import {
|
|||
fetchUsers,
|
||||
getIdFromString,
|
||||
getPageFromString,
|
||||
getQueryParams,
|
||||
getQueryString,
|
||||
getUpdatedSearchId,
|
||||
myAuth,
|
||||
numToSI,
|
||||
|
|
@ -182,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
|
||||
|
|
@ -455,7 +453,7 @@ export class Search extends Component<any, SearchState> {
|
|||
const { type, page } = getSearchQueryParams();
|
||||
|
||||
return (
|
||||
<div className="container-lg">
|
||||
<div className="search container-lg">
|
||||
<HtmlTags
|
||||
title={this.documentTitle}
|
||||
path={this.context.router.route.match.url}
|
||||
|
|
@ -493,27 +491,28 @@ export class Search extends Component<any, SearchState> {
|
|||
|
||||
get searchForm() {
|
||||
return (
|
||||
<form
|
||||
className="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control mr-2 mb-2"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${i18n.t("search")}...`}
|
||||
aria-label={i18n.t("search")}
|
||||
onInput={linkEvent(this, this.handleQChange)}
|
||||
required
|
||||
minLength={1}
|
||||
/>
|
||||
<button type="submit" className="btn btn-secondary mr-2 mb-2">
|
||||
{this.state.searchRes.state === "loading" ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span>{i18n.t("search")}</span>
|
||||
)}
|
||||
</button>
|
||||
<form className="row" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
|
||||
<div className="col-auto">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control me-2 mb-2 col-sm-8"
|
||||
value={this.state.searchText}
|
||||
placeholder={`${i18n.t("search")}...`}
|
||||
aria-label={i18n.t("search")}
|
||||
onInput={linkEvent(this, this.handleQChange)}
|
||||
required
|
||||
minLength={1}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
|
@ -538,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">
|
||||
|
|
@ -550,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)}
|
||||
|
|
@ -558,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}
|
||||
|
|
@ -566,7 +565,7 @@ export class Search extends Component<any, SearchState> {
|
|||
hideMostComments
|
||||
/>
|
||||
</span>
|
||||
<div className="form-row">
|
||||
<div className="row">
|
||||
{hasCommunities && (
|
||||
<Filter
|
||||
filterType="community"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { isBrowser } from "./utils";
|
||||
import { isBrowser } from "@utils/browser";
|
||||
|
||||
const testHost = "0.0.0.0:8536";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { isBrowser } from "@utils/browser";
|
||||
import i18next, { i18nTyped, Resource } from "i18next";
|
||||
import { UserService } from "./services";
|
||||
import { ar } from "./translations/ar";
|
||||
|
|
@ -31,7 +32,6 @@ import { sv } from "./translations/sv";
|
|||
import { vi } from "./translations/vi";
|
||||
import { zh } from "./translations/zh";
|
||||
import { zh_Hant } from "./translations/zh_Hant";
|
||||
import { isBrowser } from "./utils";
|
||||
|
||||
export const languages = [
|
||||
{ resource: ar, code: "ar", name: "العربية" },
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
// import Cookies from 'js-cookie';
|
||||
import { isBrowser } from "@utils/browser";
|
||||
import IsomorphicCookie from "isomorphic-cookie";
|
||||
import jwt_decode from "jwt-decode";
|
||||
import { LoginResponse, MyUserInfo } from "lemmy-js-client";
|
||||
import { isHttps } from "../env";
|
||||
import { i18n } from "../i18next";
|
||||
import { isAuthPath, isBrowser, toast } from "../utils";
|
||||
import { isAuthPath, toast } from "../utils";
|
||||
|
||||
interface Claims {
|
||||
sub: number;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue