LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 03:11:25 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into create_space_between_cancel_and_ban_button

Browse source
This commit is contained in:
SleeplessOne1917 2023-06-26 18:46:22 -04:00 committed by GitHub
commit 165d1aa181
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
72 changed files with 25420 additions and 1103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.eslintrc.json
View file

@ -3,7 +3,7 @@
"env": {
"browser": true
},
"plugins": ["@typescript-eslint", "jsx-a11y"],
"plugins": ["@typescript-eslint", "jsx-a11y", "prettier"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
@ -21,16 +21,6 @@
"@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,
@ -51,6 +41,7 @@
"no-var": 0,
"prefer-const": 1,
"prefer-rest-params": 0,
"prettier/prettier": "error",
"quote-props": 0,
"unicorn/filename-case": 0
}

2
.gitignore vendored
View file

@ -27,3 +27,5 @@ package-lock.json
src/shared/translations
stats.json

1
.prettierignore
View file

@ -1,3 +1,4 @@
src/shared/translations
lemmy-translations
src/assets/css/themes/*.css
stats.json

12
package.json
View file

@ -6,15 +6,15 @@
"license": "AGPL-3.0",
"author": "Dessalines <tyhou13@gmx.com>",
"scripts": {
"analyze": "webpack --mode=none",
"prebuild:dev": "yarn clean && node generate_translations.js",
"build:dev": "webpack --mode=development",
"prebuild:prod": "yarn clean && node generate_translations.js",
"build:prod": "webpack --mode=production",
"clean": "yarn run rimraf dist",
"dev": "yarn start",
"dev": "yarn build:dev --watch",
"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",
"translations:generate": "node generate_translations.js",
@ -51,6 +51,7 @@
"copy-webpack-plugin": "^11.0.0",
"cross-fetch": "^3.1.5",
"css-loader": "^6.7.3",
"date-fns": "^2.30.0",
"emoji-mart": "^5.4.0",
"emoji-short-name": "^2.0.0",
"express": "~4.18.2",
@ -67,7 +68,8 @@
"isomorphic-cookie": "^1.2.4",
"jwt-decode": "^3.1.2",
"lemmy-js-client": "0.18.0-rc.2",
"lodash": "^4.17.21",
"lodash.isequal": "^4.5.0",
"lodash.merge": "^4.6.2",
"markdown-it": "^13.0.1",
"markdown-it-container": "^3.0.0",
"markdown-it-emoji": "^2.0.2",
@ -76,7 +78,6 @@
"markdown-it-sub": "^1.0.0",
"markdown-it-sup": "^1.0.0",
"mini-css-extract-plugin": "^2.7.5",
"moment": "^2.29.4",
"register-service-worker": "^1.7.2",
"run-node-webpack-plugin": "^1.3.0",
"sanitize-html": "^2.10.0",
@ -98,9 +99,11 @@
"@types/bootstrap": "^5.2.6",
"@types/express": "^4.17.17",
"@types/html-to-text": "^9.0.0",
"@types/lodash.isequal": "^4.5.6",
"@types/markdown-it": "^12.2.3",
"@types/markdown-it-container": "^2.0.5",
"@types/node": "^20.1.2",
"@types/path-browserify": "^1.0.0",
"@types/sanitize-html": "^2.9.0",
"@types/serialize-javascript": "^5.0.1",
"@types/toastify-js": "^1.11.1",
@ -122,6 +125,7 @@
"style-loader": "^3.3.2",
"terser": "^5.17.3",
"typescript": "^5.0.4",
"webpack-bundle-analyzer": "^4.9.0",
"webpack-dev-server": "4.15.0"
},
"packageManager": "yarn@1.22.19",

10
src/assets/css/main.css
View file

@ -84,7 +84,7 @@
margin-top: -6.5px;
}
.post-title a:visited {
.post-title a:visited:not(:hover) {
color: var(--bs-gray) !important;
}
@ -124,7 +124,8 @@
.emoji-picker-container {
position: absolute;
top: 30px;
top: 0;
left: 50%;
z-index: 1000;
transform: translateX(-50%);
}
@ -275,10 +276,7 @@ hr {
}
.mini-overlay {
position: absolute;
top: 0;
right: 0;
padding: 2px;
display: block;
height: 1.5em;
width: 1.5em;
background: rgba(0, 0, 0, 0.4);

1
src/assets/css/themes/_variables.darkly-compact.scss Normal file
View file

@ -0,0 +1 @@
@import "variables.darkly";

1
src/assets/css/themes/_variables.darkly.scss
View file

@ -32,7 +32,6 @@ $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";
$font-size-base: 0.9375rem;
$h1-font-size: 3rem;
$h2-font-size: 2.5rem;
$h3-font-size: 2rem;

1
src/assets/css/themes/_variables.litely-compact.scss Normal file
View file

@ -0,0 +1 @@
@import "variables.litely";

1
src/assets/css/themes/_variables.scss
View file

@ -1,5 +1,6 @@
$link-decoration: none;
$min-contrast-ratio: 3;
$font-size-base: 0.875rem;
$container-max-widths: (
lg: 1140px,

11869
src/assets/css/themes/darkly-compact.css Normal file
View file

File diff suppressed because it is too large Load diff

59
src/assets/css/themes/darkly-compact.scss Normal file
View file

@ -0,0 +1,59 @@
@import "variables.darkly-compact";
/*
GENERAL
*/
// Desktop Breakpoint
$container-max-widths: (
lg: 1920px,
);
// Reduce hr height
hr.my-3 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
/*
POST-LISTING
*/
.post-listing {
line-height: 1;
.post-title h5 {
margin: 0;
}
.post-title + p {
padding-top: 0.125rem !important;
padding-bottom: 0.125rem !important;
}
.community-link {
padding-left: 0.125rem;
}
.person-listing {
padding-right: 0.125rem;
}
ul.list-inline {
&.mt-2 {
margin-top: 0.125rem !important;
}
&.mb-1 {
margin-bottom: 0.125rem !important;
}
}
.btn-sm {
--bs-btn-padding-y: 0;
}
.img-icon {
display: none;
}
}
@import "../../../../node_modules/bootstrap/scss/bootstrap";

82
src/assets/css/themes/darkly-red.css
View file

@ -75,7 +75,7 @@
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 0.9375rem;
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #dee2e6;
@ -247,20 +247,20 @@ h3, .h3 {
}
h4, .h4 {
font-size: calc(1.265625rem + 0.1875vw);
font-size: calc(1.25625rem + 0.075vw);
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.40625rem;
font-size: 1.3125rem;
}
}
h5, .h5 {
font-size: 1.171875rem;
font-size: 1.09375rem;
}
h6, .h6 {
font-size: 0.9375rem;
font-size: 0.875rem;
}
p {
@ -586,7 +586,7 @@ progress {
}
.lead {
font-size: 1.171875rem;
font-size: 1.09375rem;
font-weight: 300;
}
@ -680,7 +680,7 @@ progress {
.blockquote {
margin-bottom: 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
}
.blockquote > :last-child {
margin-bottom: 0;
@ -2063,13 +2063,13 @@ progress {
.col-form-label-lg {
padding-top: calc(0.5rem + var(--bs-border-width));
padding-bottom: calc(0.5rem + var(--bs-border-width));
font-size: 1.171875rem;
font-size: 1.09375rem;
}
.col-form-label-sm {
padding-top: calc(0.25rem + var(--bs-border-width));
padding-bottom: calc(0.25rem + var(--bs-border-width));
font-size: 0.8203125rem;
font-size: 0.765625rem;
}
.form-text {
@ -2082,7 +2082,7 @@ progress {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #fff;
@ -2173,7 +2173,7 @@ progress {
.form-control-sm {
min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
padding: 0.25rem 0.5rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::file-selector-button {
@ -2185,7 +2185,7 @@ progress {
.form-control-lg {
min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
padding: 0.5rem 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::file-selector-button {
@ -2232,7 +2232,7 @@ textarea.form-control-lg {
display: block;
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: 0.9375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #fff;
@ -2272,7 +2272,7 @@ textarea.form-control-lg {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2280,7 +2280,7 @@ textarea.form-control-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2290,7 +2290,7 @@ textarea.form-control-lg {
.form-check {
display: block;
min-height: 1.40625rem;
min-height: 1.3125rem;
padding-left: 1.5em;
margin-bottom: 0.125rem;
}
@ -2618,7 +2618,7 @@ textarea.form-control-lg {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #adb5bd;
@ -2634,7 +2634,7 @@ textarea.form-control-lg {
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2643,7 +2643,7 @@ textarea.form-control-lg {
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2693,7 +2693,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-success);
border-radius: var(--bs-border-radius);
@ -2783,7 +2783,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-danger);
border-radius: var(--bs-border-radius);
@ -2861,7 +2861,7 @@ textarea.form-control-lg {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 0.9375rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
@ -3229,14 +3229,14 @@ textarea.form-control-lg {
.btn-lg, .btn-group-lg > .btn {
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-size: 1.171875rem;
--bs-btn-font-size: 1.09375rem;
--bs-btn-border-radius: var(--bs-border-radius-lg);
}
.btn-sm, .btn-group-sm > .btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.8203125rem;
--bs-btn-font-size: 0.765625rem;
--bs-btn-border-radius: var(--bs-border-radius-sm);
}
@ -3309,7 +3309,7 @@ textarea.form-control-lg {
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0.5rem;
--bs-dropdown-spacer: 0.125rem;
--bs-dropdown-font-size: 0.9375rem;
--bs-dropdown-font-size: 0.875rem;
--bs-dropdown-color: var(--bs-body-color);
--bs-dropdown-bg: #222;
--bs-dropdown-border-color: #444;
@ -3567,7 +3567,7 @@ textarea.form-control-lg {
display: block;
padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
margin-bottom: 0;
font-size: 0.8203125rem;
font-size: 0.765625rem;
color: var(--bs-dropdown-header-color);
white-space: nowrap;
}
@ -3844,15 +3844,15 @@ textarea.form-control-lg {
--bs-navbar-hover-color: #fff;
--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
--bs-navbar-active-color: #fff;
--bs-navbar-brand-padding-y: 0.32421875rem;
--bs-navbar-brand-padding-y: 0.3359375rem;
--bs-navbar-brand-margin-end: 1rem;
--bs-navbar-brand-font-size: 1.171875rem;
--bs-navbar-brand-font-size: 1.09375rem;
--bs-navbar-brand-color: #fff;
--bs-navbar-brand-hover-color: #fff;
--bs-navbar-nav-link-padding-x: 0.5rem;
--bs-navbar-toggler-padding-y: 0.25rem;
--bs-navbar-toggler-padding-x: 0.75rem;
--bs-navbar-toggler-font-size: 1.171875rem;
--bs-navbar-toggler-font-size: 1.09375rem;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--bs-navbar-toggler-border-color: rgba(34, 34, 34, 0.1);
--bs-navbar-toggler-border-radius: var(--bs-border-radius);
@ -4477,7 +4477,7 @@ textarea.form-control-lg {
align-items: center;
width: 100%;
padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
font-size: 0.9375rem;
font-size: 0.875rem;
color: var(--bs-accordion-btn-color);
text-align: left;
background-color: var(--bs-accordion-btn-bg);
@ -4621,7 +4621,7 @@ textarea.form-control-lg {
.pagination {
--bs-pagination-padding-x: 0.75rem;
--bs-pagination-padding-y: 0.375rem;
--bs-pagination-font-size: 0.9375rem;
--bs-pagination-font-size: 0.875rem;
--bs-pagination-color: #fff;
--bs-pagination-bg: #00bc8c;
--bs-pagination-border-width: 0;
@ -4700,14 +4700,14 @@ textarea.form-control-lg {
.pagination-lg {
--bs-pagination-padding-x: 1.5rem;
--bs-pagination-padding-y: 0.75rem;
--bs-pagination-font-size: 1.171875rem;
--bs-pagination-font-size: 1.09375rem;
--bs-pagination-border-radius: var(--bs-border-radius-lg);
}
.pagination-sm {
--bs-pagination-padding-x: 0.5rem;
--bs-pagination-padding-y: 0.25rem;
--bs-pagination-font-size: 0.8203125rem;
--bs-pagination-font-size: 0.765625rem;
--bs-pagination-border-radius: var(--bs-border-radius-sm);
}
@ -4841,7 +4841,7 @@ textarea.form-control-lg {
.progress,
.progress-stacked {
--bs-progress-height: 1rem;
--bs-progress-font-size: 0.703125rem;
--bs-progress-font-size: 0.65625rem;
--bs-progress-bg: #444;
--bs-progress-border-radius: var(--bs-border-radius);
--bs-progress-box-shadow: var(--bs-box-shadow-inset);
@ -5645,7 +5645,7 @@ textarea.form-control-lg {
--bs-tooltip-padding-x: 0.5rem;
--bs-tooltip-padding-y: 0.25rem;
--bs-tooltip-margin: ;
--bs-tooltip-font-size: 0.8203125rem;
--bs-tooltip-font-size: 0.765625rem;
--bs-tooltip-color: var(--bs-body-bg);
--bs-tooltip-bg: var(--bs-emphasis-color);
--bs-tooltip-border-radius: var(--bs-border-radius);
@ -5744,7 +5744,7 @@ textarea.form-control-lg {
.popover {
--bs-popover-zindex: 1070;
--bs-popover-max-width: 276px;
--bs-popover-font-size: 0.8203125rem;
--bs-popover-font-size: 0.765625rem;
--bs-popover-bg: #303030;
--bs-popover-border-width: var(--bs-border-width);
--bs-popover-border-color: var(--bs-border-color-translucent);
@ -5753,7 +5753,7 @@ textarea.form-control-lg {
--bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-popover-header-padding-x: 1rem;
--bs-popover-header-padding-y: 0.5rem;
--bs-popover-header-font-size: 0.9375rem;
--bs-popover-header-font-size: 0.875rem;
--bs-popover-header-color: inherit;
--bs-popover-header-bg: #444;
--bs-popover-body-padding-x: 1rem;
@ -8227,15 +8227,15 @@ textarea.form-control-lg {
}
.fs-4 {
font-size: calc(1.265625rem + 0.1875vw) !important;
font-size: calc(1.25625rem + 0.075vw) !important;
}
.fs-5 {
font-size: 1.171875rem !important;
font-size: 1.09375rem !important;
}
.fs-6 {
font-size: 0.9375rem !important;
font-size: 0.875rem !important;
}
.fst-italic {
@ -11787,7 +11787,7 @@ textarea.form-control-lg {
font-size: 2rem !important;
}
.fs-4 {
font-size: 1.40625rem !important;
font-size: 1.3125rem !important;
}
}
@media print {

82
src/assets/css/themes/darkly.css
View file

@ -75,7 +75,7 @@
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 0.9375rem;
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #dee2e6;
@ -247,20 +247,20 @@ h3, .h3 {
}
h4, .h4 {
font-size: calc(1.265625rem + 0.1875vw);
font-size: calc(1.25625rem + 0.075vw);
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.40625rem;
font-size: 1.3125rem;
}
}
h5, .h5 {
font-size: 1.171875rem;
font-size: 1.09375rem;
}
h6, .h6 {
font-size: 0.9375rem;
font-size: 0.875rem;
}
p {
@ -586,7 +586,7 @@ progress {
}
.lead {
font-size: 1.171875rem;
font-size: 1.09375rem;
font-weight: 300;
}
@ -680,7 +680,7 @@ progress {
.blockquote {
margin-bottom: 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
}
.blockquote > :last-child {
margin-bottom: 0;
@ -2063,13 +2063,13 @@ progress {
.col-form-label-lg {
padding-top: calc(0.5rem + var(--bs-border-width));
padding-bottom: calc(0.5rem + var(--bs-border-width));
font-size: 1.171875rem;
font-size: 1.09375rem;
}
.col-form-label-sm {
padding-top: calc(0.25rem + var(--bs-border-width));
padding-bottom: calc(0.25rem + var(--bs-border-width));
font-size: 0.8203125rem;
font-size: 0.765625rem;
}
.form-text {
@ -2082,7 +2082,7 @@ progress {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #fff;
@ -2173,7 +2173,7 @@ progress {
.form-control-sm {
min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
padding: 0.25rem 0.5rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::file-selector-button {
@ -2185,7 +2185,7 @@ progress {
.form-control-lg {
min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
padding: 0.5rem 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::file-selector-button {
@ -2232,7 +2232,7 @@ textarea.form-control-lg {
display: block;
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: 0.9375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #fff;
@ -2272,7 +2272,7 @@ textarea.form-control-lg {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2280,7 +2280,7 @@ textarea.form-control-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2290,7 +2290,7 @@ textarea.form-control-lg {
.form-check {
display: block;
min-height: 1.40625rem;
min-height: 1.3125rem;
padding-left: 1.5em;
margin-bottom: 0.125rem;
}
@ -2618,7 +2618,7 @@ textarea.form-control-lg {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 0.9375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: #adb5bd;
@ -2634,7 +2634,7 @@ textarea.form-control-lg {
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.171875rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2643,7 +2643,7 @@ textarea.form-control-lg {
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2693,7 +2693,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-success);
border-radius: var(--bs-border-radius);
@ -2783,7 +2783,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.8203125rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-danger);
border-radius: var(--bs-border-radius);
@ -2861,7 +2861,7 @@ textarea.form-control-lg {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 0.9375rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
@ -3229,14 +3229,14 @@ textarea.form-control-lg {
.btn-lg, .btn-group-lg > .btn {
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-size: 1.171875rem;
--bs-btn-font-size: 1.09375rem;
--bs-btn-border-radius: var(--bs-border-radius-lg);
}
.btn-sm, .btn-group-sm > .btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.8203125rem;
--bs-btn-font-size: 0.765625rem;
--bs-btn-border-radius: var(--bs-border-radius-sm);
}
@ -3309,7 +3309,7 @@ textarea.form-control-lg {
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0.5rem;
--bs-dropdown-spacer: 0.125rem;
--bs-dropdown-font-size: 0.9375rem;
--bs-dropdown-font-size: 0.875rem;
--bs-dropdown-color: var(--bs-body-color);
--bs-dropdown-bg: #222;
--bs-dropdown-border-color: #444;
@ -3567,7 +3567,7 @@ textarea.form-control-lg {
display: block;
padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
margin-bottom: 0;
font-size: 0.8203125rem;
font-size: 0.765625rem;
color: var(--bs-dropdown-header-color);
white-space: nowrap;
}
@ -3844,15 +3844,15 @@ textarea.form-control-lg {
--bs-navbar-hover-color: #fff;
--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
--bs-navbar-active-color: #fff;
--bs-navbar-brand-padding-y: 0.32421875rem;
--bs-navbar-brand-padding-y: 0.3359375rem;
--bs-navbar-brand-margin-end: 1rem;
--bs-navbar-brand-font-size: 1.171875rem;
--bs-navbar-brand-font-size: 1.09375rem;
--bs-navbar-brand-color: #fff;
--bs-navbar-brand-hover-color: #fff;
--bs-navbar-nav-link-padding-x: 0.5rem;
--bs-navbar-toggler-padding-y: 0.25rem;
--bs-navbar-toggler-padding-x: 0.75rem;
--bs-navbar-toggler-font-size: 1.171875rem;
--bs-navbar-toggler-font-size: 1.09375rem;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--bs-navbar-toggler-border-color: rgba(34, 34, 34, 0.1);
--bs-navbar-toggler-border-radius: var(--bs-border-radius);
@ -4477,7 +4477,7 @@ textarea.form-control-lg {
align-items: center;
width: 100%;
padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
font-size: 0.9375rem;
font-size: 0.875rem;
color: var(--bs-accordion-btn-color);
text-align: left;
background-color: var(--bs-accordion-btn-bg);
@ -4621,7 +4621,7 @@ textarea.form-control-lg {
.pagination {
--bs-pagination-padding-x: 0.75rem;
--bs-pagination-padding-y: 0.375rem;
--bs-pagination-font-size: 0.9375rem;
--bs-pagination-font-size: 0.875rem;
--bs-pagination-color: #fff;
--bs-pagination-bg: #00bc8c;
--bs-pagination-border-width: 0;
@ -4700,14 +4700,14 @@ textarea.form-control-lg {
.pagination-lg {
--bs-pagination-padding-x: 1.5rem;
--bs-pagination-padding-y: 0.75rem;
--bs-pagination-font-size: 1.171875rem;
--bs-pagination-font-size: 1.09375rem;
--bs-pagination-border-radius: var(--bs-border-radius-lg);
}
.pagination-sm {
--bs-pagination-padding-x: 0.5rem;
--bs-pagination-padding-y: 0.25rem;
--bs-pagination-font-size: 0.8203125rem;
--bs-pagination-font-size: 0.765625rem;
--bs-pagination-border-radius: var(--bs-border-radius-sm);
}
@ -4841,7 +4841,7 @@ textarea.form-control-lg {
.progress,
.progress-stacked {
--bs-progress-height: 1rem;
--bs-progress-font-size: 0.703125rem;
--bs-progress-font-size: 0.65625rem;
--bs-progress-bg: #444;
--bs-progress-border-radius: var(--bs-border-radius);
--bs-progress-box-shadow: var(--bs-box-shadow-inset);
@ -5645,7 +5645,7 @@ textarea.form-control-lg {
--bs-tooltip-padding-x: 0.5rem;
--bs-tooltip-padding-y: 0.25rem;
--bs-tooltip-margin: ;
--bs-tooltip-font-size: 0.8203125rem;
--bs-tooltip-font-size: 0.765625rem;
--bs-tooltip-color: var(--bs-body-bg);
--bs-tooltip-bg: var(--bs-emphasis-color);
--bs-tooltip-border-radius: var(--bs-border-radius);
@ -5744,7 +5744,7 @@ textarea.form-control-lg {
.popover {
--bs-popover-zindex: 1070;
--bs-popover-max-width: 276px;
--bs-popover-font-size: 0.8203125rem;
--bs-popover-font-size: 0.765625rem;
--bs-popover-bg: #303030;
--bs-popover-border-width: var(--bs-border-width);
--bs-popover-border-color: var(--bs-border-color-translucent);
@ -5753,7 +5753,7 @@ textarea.form-control-lg {
--bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-popover-header-padding-x: 1rem;
--bs-popover-header-padding-y: 0.5rem;
--bs-popover-header-font-size: 0.9375rem;
--bs-popover-header-font-size: 0.875rem;
--bs-popover-header-color: inherit;
--bs-popover-header-bg: #444;
--bs-popover-body-padding-x: 1rem;
@ -8227,15 +8227,15 @@ textarea.form-control-lg {
}
.fs-4 {
font-size: calc(1.265625rem + 0.1875vw) !important;
font-size: calc(1.25625rem + 0.075vw) !important;
}
.fs-5 {
font-size: 1.171875rem !important;
font-size: 1.09375rem !important;
}
.fs-6 {
font-size: 0.9375rem !important;
font-size: 0.875rem !important;
}
.fst-italic {
@ -11787,7 +11787,7 @@ textarea.form-control-lg {
font-size: 2rem !important;
}
.fs-4 {
font-size: 1.40625rem !important;
font-size: 1.3125rem !important;
}
}
@media print {

11868
src/assets/css/themes/litely-compact.css Normal file
View file

File diff suppressed because it is too large Load diff

59
src/assets/css/themes/litely-compact.scss Normal file
View file

@ -0,0 +1,59 @@
@import "variables.litely-compact";
/*
GENERAL
*/
// Desktop Breakpoint
$container-max-widths: (
lg: 1920px,
);
// Reduce hr height
hr.my-3 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
/*
POST-LISTING
*/
.post-listing {
line-height: 1;
.post-title h5 {
margin: 0;
}
.post-title + p {
padding-top: 0.125rem !important;
padding-bottom: 0.125rem !important;
}
.community-link {
padding-left: 0.125rem;
}
.person-listing {
padding-right: 0.125rem;
}
ul.list-inline {
&.mt-2 {
margin-top: 0.125rem !important;
}
&.mb-1 {
margin-bottom: 0.125rem !important;
}
}
.btn-sm {
--bs-btn-padding-y: 0;
}
.img-icon {
display: none;
}
}
@import "../../../../node_modules/bootstrap/scss/bootstrap";

124
src/assets/css/themes/litely-red.css
View file

@ -75,7 +75,7 @@
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #495057;
@ -220,47 +220,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
}
h1, .h1 {
font-size: calc(1.375rem + 1.5vw);
font-size: calc(1.34375rem + 1.125vw);
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 2.5rem;
font-size: 2.1875rem;
}
}
h2, .h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
h2, .h2 {
font-size: 2rem;
}
}
h3, .h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
h3, .h3 {
h2, .h2 {
font-size: 1.75rem;
}
}
h3, .h3 {
font-size: calc(1.278125rem + 0.3375vw);
}
@media (min-width: 1200px) {
h3, .h3 {
font-size: 1.53125rem;
}
}
h4, .h4 {
font-size: calc(1.275rem + 0.3vw);
font-size: calc(1.25625rem + 0.075vw);
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.5rem;
font-size: 1.3125rem;
}
}
h5, .h5 {
font-size: 1.25rem;
font-size: 1.09375rem;
}
h6, .h6 {
font-size: 1rem;
font-size: 0.875rem;
}
p {
@ -585,7 +585,7 @@ progress {
}
.lead {
font-size: 1.25rem;
font-size: 1.09375rem;
font-weight: 300;
}
@ -679,7 +679,7 @@ progress {
.blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
}
.blockquote > :last-child {
margin-bottom: 0;
@ -2062,13 +2062,13 @@ progress {
.col-form-label-lg {
padding-top: calc(0.5rem + var(--bs-border-width));
padding-bottom: calc(0.5rem + var(--bs-border-width));
font-size: 1.25rem;
font-size: 1.09375rem;
}
.col-form-label-sm {
padding-top: calc(0.25rem + var(--bs-border-width));
padding-bottom: calc(0.25rem + var(--bs-border-width));
font-size: 0.875rem;
font-size: 0.765625rem;
}
.form-text {
@ -2081,7 +2081,7 @@ progress {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
@ -2172,7 +2172,7 @@ progress {
.form-control-sm {
min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::file-selector-button {
@ -2184,7 +2184,7 @@ progress {
.form-control-lg {
min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
padding: 0.5rem 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::file-selector-button {
@ -2231,7 +2231,7 @@ textarea.form-control-lg {
display: block;
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
@ -2271,7 +2271,7 @@ textarea.form-control-lg {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.875rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2279,7 +2279,7 @@ textarea.form-control-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2289,7 +2289,7 @@ textarea.form-control-lg {
.form-check {
display: block;
min-height: 1.5rem;
min-height: 1.3125rem;
padding-left: 1.5em;
margin-bottom: 0.125rem;
}
@ -2617,7 +2617,7 @@ textarea.form-control-lg {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
@ -2633,7 +2633,7 @@ textarea.form-control-lg {
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2642,7 +2642,7 @@ textarea.form-control-lg {
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2692,7 +2692,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.875rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-success);
border-radius: var(--bs-border-radius);
@ -2782,7 +2782,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.875rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-danger);
border-radius: var(--bs-border-radius);
@ -2860,7 +2860,7 @@ textarea.form-control-lg {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
@ -3228,14 +3228,14 @@ textarea.form-control-lg {
.btn-lg, .btn-group-lg > .btn {
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-size: 1.25rem;
--bs-btn-font-size: 1.09375rem;
--bs-btn-border-radius: var(--bs-border-radius-lg);
}
.btn-sm, .btn-group-sm > .btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-font-size: 0.765625rem;
--bs-btn-border-radius: var(--bs-border-radius-sm);
}
@ -3308,7 +3308,7 @@ textarea.form-control-lg {
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0.5rem;
--bs-dropdown-spacer: 0.125rem;
--bs-dropdown-font-size: 1rem;
--bs-dropdown-font-size: 0.875rem;
--bs-dropdown-color: var(--bs-body-color);
--bs-dropdown-bg: var(--bs-body-bg);
--bs-dropdown-border-color: var(--bs-border-color-translucent);
@ -3566,7 +3566,7 @@ textarea.form-control-lg {
display: block;
padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
margin-bottom: 0;
font-size: 0.875rem;
font-size: 0.765625rem;
color: var(--bs-dropdown-header-color);
white-space: nowrap;
}
@ -3843,15 +3843,15 @@ textarea.form-control-lg {
--bs-navbar-hover-color: #212529;
--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
--bs-navbar-active-color: #212529;
--bs-navbar-brand-padding-y: 0.3125rem;
--bs-navbar-brand-padding-y: 0.3359375rem;
--bs-navbar-brand-margin-end: 1rem;
--bs-navbar-brand-font-size: 1.25rem;
--bs-navbar-brand-font-size: 1.09375rem;
--bs-navbar-brand-color: #212529;
--bs-navbar-brand-hover-color: #212529;
--bs-navbar-nav-link-padding-x: 0.5rem;
--bs-navbar-toggler-padding-y: 0.25rem;
--bs-navbar-toggler-padding-x: 0.75rem;
--bs-navbar-toggler-font-size: 1.25rem;
--bs-navbar-toggler-font-size: 1.09375rem;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2873, 80, 87, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
--bs-navbar-toggler-border-radius: var(--bs-border-radius);
@ -4476,7 +4476,7 @@ textarea.form-control-lg {
align-items: center;
width: 100%;
padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
font-size: 1rem;
font-size: 0.875rem;
color: var(--bs-accordion-btn-color);
text-align: left;
background-color: var(--bs-accordion-btn-bg);
@ -4620,7 +4620,7 @@ textarea.form-control-lg {
.pagination {
--bs-pagination-padding-x: 0.75rem;
--bs-pagination-padding-y: 0.375rem;
--bs-pagination-font-size: 1rem;
--bs-pagination-font-size: 0.875rem;
--bs-pagination-color: var(--bs-link-color);
--bs-pagination-bg: var(--bs-body-bg);
--bs-pagination-border-width: var(--bs-border-width);
@ -4699,14 +4699,14 @@ textarea.form-control-lg {
.pagination-lg {
--bs-pagination-padding-x: 1.5rem;
--bs-pagination-padding-y: 0.75rem;
--bs-pagination-font-size: 1.25rem;
--bs-pagination-font-size: 1.09375rem;
--bs-pagination-border-radius: var(--bs-border-radius-lg);
}
.pagination-sm {
--bs-pagination-padding-x: 0.5rem;
--bs-pagination-padding-y: 0.25rem;
--bs-pagination-font-size: 0.875rem;
--bs-pagination-font-size: 0.765625rem;
--bs-pagination-border-radius: var(--bs-border-radius-sm);
}
@ -4840,7 +4840,7 @@ textarea.form-control-lg {
.progress,
.progress-stacked {
--bs-progress-height: 1rem;
--bs-progress-font-size: 0.75rem;
--bs-progress-font-size: 0.65625rem;
--bs-progress-bg: var(--bs-secondary-bg);
--bs-progress-border-radius: var(--bs-border-radius);
--bs-progress-box-shadow: var(--bs-box-shadow-inset);
@ -5644,7 +5644,7 @@ textarea.form-control-lg {
--bs-tooltip-padding-x: 0.5rem;
--bs-tooltip-padding-y: 0.25rem;
--bs-tooltip-margin: ;
--bs-tooltip-font-size: 0.875rem;
--bs-tooltip-font-size: 0.765625rem;
--bs-tooltip-color: var(--bs-body-bg);
--bs-tooltip-bg: var(--bs-emphasis-color);
--bs-tooltip-border-radius: var(--bs-border-radius);
@ -5743,7 +5743,7 @@ textarea.form-control-lg {
.popover {
--bs-popover-zindex: 1070;
--bs-popover-max-width: 276px;
--bs-popover-font-size: 0.875rem;
--bs-popover-font-size: 0.765625rem;
--bs-popover-bg: var(--bs-body-bg);
--bs-popover-border-width: var(--bs-border-width);
--bs-popover-border-color: var(--bs-border-color-translucent);
@ -5752,7 +5752,7 @@ textarea.form-control-lg {
--bs-popover-box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
--bs-popover-header-padding-x: 1rem;
--bs-popover-header-padding-y: 0.5rem;
--bs-popover-header-font-size: 1rem;
--bs-popover-header-font-size: 0.875rem;
--bs-popover-header-color: #495057;
--bs-popover-header-bg: var(--bs-secondary-bg);
--bs-popover-body-padding-x: 1rem;
@ -8214,27 +8214,27 @@ textarea.form-control-lg {
}
.fs-1 {
font-size: calc(1.375rem + 1.5vw) !important;
font-size: calc(1.34375rem + 1.125vw) !important;
}
.fs-2 {
font-size: calc(1.325rem + 0.9vw) !important;
}
.fs-3 {
font-size: calc(1.3rem + 0.6vw) !important;
}
.fs-3 {
font-size: calc(1.278125rem + 0.3375vw) !important;
}
.fs-4 {
font-size: calc(1.275rem + 0.3vw) !important;
font-size: calc(1.25625rem + 0.075vw) !important;
}
.fs-5 {
font-size: 1.25rem !important;
font-size: 1.09375rem !important;
}
.fs-6 {
font-size: 1rem !important;
font-size: 0.875rem !important;
}
.fst-italic {
@ -11777,16 +11777,16 @@ textarea.form-control-lg {
}
@media (min-width: 1200px) {
.fs-1 {
font-size: 2.5rem !important;
font-size: 2.1875rem !important;
}
.fs-2 {
font-size: 2rem !important;
}
.fs-3 {
font-size: 1.75rem !important;
}
.fs-3 {
font-size: 1.53125rem !important;
}
.fs-4 {
font-size: 1.5rem !important;
font-size: 1.3125rem !important;
}
}
@media print {

124
src/assets/css/themes/litely.css
View file

@ -75,7 +75,7 @@
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-size: 0.875rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #495057;
@ -220,47 +220,47 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
}
h1, .h1 {
font-size: calc(1.375rem + 1.5vw);
font-size: calc(1.34375rem + 1.125vw);
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 2.5rem;
font-size: 2.1875rem;
}
}
h2, .h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
h2, .h2 {
font-size: 2rem;
}
}
h3, .h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
h3, .h3 {
h2, .h2 {
font-size: 1.75rem;
}
}
h3, .h3 {
font-size: calc(1.278125rem + 0.3375vw);
}
@media (min-width: 1200px) {
h3, .h3 {
font-size: 1.53125rem;
}
}
h4, .h4 {
font-size: calc(1.275rem + 0.3vw);
font-size: calc(1.25625rem + 0.075vw);
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.5rem;
font-size: 1.3125rem;
}
}
h5, .h5 {
font-size: 1.25rem;
font-size: 1.09375rem;
}
h6, .h6 {
font-size: 1rem;
font-size: 0.875rem;
}
p {
@ -585,7 +585,7 @@ progress {
}
.lead {
font-size: 1.25rem;
font-size: 1.09375rem;
font-weight: 300;
}
@ -679,7 +679,7 @@ progress {
.blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
}
.blockquote > :last-child {
margin-bottom: 0;
@ -2062,13 +2062,13 @@ progress {
.col-form-label-lg {
padding-top: calc(0.5rem + var(--bs-border-width));
padding-bottom: calc(0.5rem + var(--bs-border-width));
font-size: 1.25rem;
font-size: 1.09375rem;
}
.col-form-label-sm {
padding-top: calc(0.25rem + var(--bs-border-width));
padding-bottom: calc(0.25rem + var(--bs-border-width));
font-size: 0.875rem;
font-size: 0.765625rem;
}
.form-text {
@ -2081,7 +2081,7 @@ progress {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
@ -2172,7 +2172,7 @@ progress {
.form-control-sm {
min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::file-selector-button {
@ -2184,7 +2184,7 @@ progress {
.form-control-lg {
min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
padding: 0.5rem 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::file-selector-button {
@ -2231,7 +2231,7 @@ textarea.form-control-lg {
display: block;
width: 100%;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
@ -2271,7 +2271,7 @@ textarea.form-control-lg {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.875rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2279,7 +2279,7 @@ textarea.form-control-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2289,7 +2289,7 @@ textarea.form-control-lg {
.form-check {
display: block;
min-height: 1.5rem;
min-height: 1.3125rem;
padding-left: 1.5em;
margin-bottom: 0.125rem;
}
@ -2617,7 +2617,7 @@ textarea.form-control-lg {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
@ -2633,7 +2633,7 @@ textarea.form-control-lg {
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
font-size: 1.09375rem;
border-radius: var(--bs-border-radius-lg);
}
@ -2642,7 +2642,7 @@ textarea.form-control-lg {
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-size: 0.765625rem;
border-radius: var(--bs-border-radius-sm);
}
@ -2692,7 +2692,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.875rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-success);
border-radius: var(--bs-border-radius);
@ -2782,7 +2782,7 @@ textarea.form-control-lg {
max-width: 100%;
padding: 0.25rem 0.5rem;
margin-top: 0.1rem;
font-size: 0.875rem;
font-size: 0.765625rem;
color: #fff;
background-color: var(--bs-danger);
border-radius: var(--bs-border-radius);
@ -2860,7 +2860,7 @@ textarea.form-control-lg {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-font-weight: 400;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
@ -3228,14 +3228,14 @@ textarea.form-control-lg {
.btn-lg, .btn-group-lg > .btn {
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-size: 1.25rem;
--bs-btn-font-size: 1.09375rem;
--bs-btn-border-radius: var(--bs-border-radius-lg);
}
.btn-sm, .btn-group-sm > .btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-font-size: 0.765625rem;
--bs-btn-border-radius: var(--bs-border-radius-sm);
}
@ -3308,7 +3308,7 @@ textarea.form-control-lg {
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0.5rem;
--bs-dropdown-spacer: 0.125rem;
--bs-dropdown-font-size: 1rem;
--bs-dropdown-font-size: 0.875rem;
--bs-dropdown-color: var(--bs-body-color);
--bs-dropdown-bg: var(--bs-body-bg);
--bs-dropdown-border-color: var(--bs-border-color-translucent);
@ -3566,7 +3566,7 @@ textarea.form-control-lg {
display: block;
padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
margin-bottom: 0;
font-size: 0.875rem;
font-size: 0.765625rem;
color: var(--bs-dropdown-header-color);
white-space: nowrap;
}
@ -3843,15 +3843,15 @@ textarea.form-control-lg {
--bs-navbar-hover-color: #212529;
--bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
--bs-navbar-active-color: #212529;
--bs-navbar-brand-padding-y: 0.3125rem;
--bs-navbar-brand-padding-y: 0.3359375rem;
--bs-navbar-brand-margin-end: 1rem;
--bs-navbar-brand-font-size: 1.25rem;
--bs-navbar-brand-font-size: 1.09375rem;
--bs-navbar-brand-color: #212529;
--bs-navbar-brand-hover-color: #212529;
--bs-navbar-nav-link-padding-x: 0.5rem;
--bs-navbar-toggler-padding-y: 0.25rem;
--bs-navbar-toggler-padding-x: 0.75rem;
--bs-navbar-toggler-font-size: 1.25rem;
--bs-navbar-toggler-font-size: 1.09375rem;
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2873, 80, 87, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
--bs-navbar-toggler-border-radius: var(--bs-border-radius);
@ -4476,7 +4476,7 @@ textarea.form-control-lg {
align-items: center;
width: 100%;
padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
font-size: 1rem;
font-size: 0.875rem;
color: var(--bs-accordion-btn-color);
text-align: left;
background-color: var(--bs-accordion-btn-bg);
@ -4620,7 +4620,7 @@ textarea.form-control-lg {
.pagination {
--bs-pagination-padding-x: 0.75rem;
--bs-pagination-padding-y: 0.375rem;
--bs-pagination-font-size: 1rem;
--bs-pagination-font-size: 0.875rem;
--bs-pagination-color: var(--bs-link-color);
--bs-pagination-bg: var(--bs-body-bg);
--bs-pagination-border-width: var(--bs-border-width);
@ -4699,14 +4699,14 @@ textarea.form-control-lg {
.pagination-lg {
--bs-pagination-padding-x: 1.5rem;
--bs-pagination-padding-y: 0.75rem;
--bs-pagination-font-size: 1.25rem;
--bs-pagination-font-size: 1.09375rem;
--bs-pagination-border-radius: var(--bs-border-radius-lg);
}
.pagination-sm {
--bs-pagination-padding-x: 0.5rem;
--bs-pagination-padding-y: 0.25rem;
--bs-pagination-font-size: 0.875rem;
--bs-pagination-font-size: 0.765625rem;
--bs-pagination-border-radius: var(--bs-border-radius-sm);
}
@ -4840,7 +4840,7 @@ textarea.form-control-lg {
.progress,
.progress-stacked {
--bs-progress-height: 1rem;
--bs-progress-font-size: 0.75rem;
--bs-progress-font-size: 0.65625rem;
--bs-progress-bg: var(--bs-secondary-bg);
--bs-progress-border-radius: var(--bs-border-radius);
--bs-progress-box-shadow: var(--bs-box-shadow-inset);
@ -5644,7 +5644,7 @@ textarea.form-control-lg {
--bs-tooltip-padding-x: 0.5rem;
--bs-tooltip-padding-y: 0.25rem;
--bs-tooltip-margin: ;
--bs-tooltip-font-size: 0.875rem;
--bs-tooltip-font-size: 0.765625rem;
--bs-tooltip-color: var(--bs-body-bg);
--bs-tooltip-bg: var(--bs-emphasis-color);
--bs-tooltip-border-radius: var(--bs-border-radius);
@ -5743,7 +5743,7 @@ textarea.form-control-lg {
.popover {
--bs-popover-zindex: 1070;
--bs-popover-max-width: 276px;
--bs-popover-font-size: 0.875rem;
--bs-popover-font-size: 0.765625rem;
--bs-popover-bg: var(--bs-body-bg);
--bs-popover-border-width: var(--bs-border-width);
--bs-popover-border-color: var(--bs-border-color-translucent);
@ -5752,7 +5752,7 @@ textarea.form-control-lg {
--bs-popover-box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
--bs-popover-header-padding-x: 1rem;
--bs-popover-header-padding-y: 0.5rem;
--bs-popover-header-font-size: 1rem;
--bs-popover-header-font-size: 0.875rem;
--bs-popover-header-color: #495057;
--bs-popover-header-bg: var(--bs-secondary-bg);
--bs-popover-body-padding-x: 1rem;
@ -8214,27 +8214,27 @@ textarea.form-control-lg {
}
.fs-1 {
font-size: calc(1.375rem + 1.5vw) !important;
font-size: calc(1.34375rem + 1.125vw) !important;
}
.fs-2 {
font-size: calc(1.325rem + 0.9vw) !important;
}
.fs-3 {
font-size: calc(1.3rem + 0.6vw) !important;
}
.fs-3 {
font-size: calc(1.278125rem + 0.3375vw) !important;
}
.fs-4 {
font-size: calc(1.275rem + 0.3vw) !important;
font-size: calc(1.25625rem + 0.075vw) !important;
}
.fs-5 {
font-size: 1.25rem !important;
font-size: 1.09375rem !important;
}
.fs-6 {
font-size: 1rem !important;
font-size: 0.875rem !important;
}
.fst-italic {
@ -11777,16 +11777,16 @@ textarea.form-control-lg {
}
@media (min-width: 1200px) {
.fs-1 {
font-size: 2.5rem !important;
font-size: 2.1875rem !important;
}
.fs-2 {
font-size: 2rem !important;
}
.fs-3 {
font-size: 1.75rem !important;
}
.fs-3 {
font-size: 1.53125rem !important;
}
.fs-4 {
font-size: 1.5rem !important;
font-size: 1.3125rem !important;
}
}
@media print {

26
src/client/index.tsx
View file

@ -1,4 +1,4 @@
import { initializeSite } from "@utils/app";
import { initializeSite, setupDateFns } from "@utils/app";
import { hydrate } from "inferno-hydrate";
import { Router } from "inferno-router";
import { App } from "../shared/components/app/app";
@ -7,16 +7,22 @@ import { HistoryService } from "../shared/services";
import "bootstrap/js/dist/collapse";
import "bootstrap/js/dist/dropdown";
initializeSite(window.isoData.site_res);
async function startClient() {
initializeSite(window.isoData.site_res);
const wrapper = (
<Router history={HistoryService.history}>
<App />
</Router>
);
await setupDateFns();
const root = document.getElementById("root");
const wrapper = (
<Router history={HistoryService.history}>
<App />
</Router>
);
if (root) {
hydrate(wrapper, root);
const root = document.getElementById("root");
if (root) {
hydrate(wrapper, root);
}
}
startClient();

1
src/server/handlers/robots-handler.ts
View file

@ -5,6 +5,7 @@ export default async ({ res }: { res: Response }) => {
res.send(`User-Agent: *
Disallow: /login
Disallow: /login_reset
Disallow: /settings
Disallow: /create_community
Disallow: /create_post

9
src/server/handlers/theme-handler.ts
View file

@ -11,22 +11,21 @@ export default async (req: Request, res: Response) => {
const theme = req.params.name;
if (!theme.endsWith(".css")) {
res.statusCode = 400;
res.send("Theme must be a css file");
return res.status(400).send("Theme must be a css file");
}
const customTheme = path.resolve(extraThemesFolder, theme);
if (existsSync(customTheme)) {
res.sendFile(customTheme);
return 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);
return res.sendFile(internalTheme);
} else {
res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
return res.sendFile(path.resolve("./dist/assets/css/themes/litely.css"));
}
}
};

2
src/server/index.tsx
View file

@ -1,3 +1,4 @@
import { setupDateFns } from "@utils/app";
import express from "express";
import path from "path";
import process from "process";
@ -31,6 +32,7 @@ server.get("/css/themelist", ThemesListHandler);
server.get("/*", CatchAllHandler);
server.listen(Number(port), hostname, () => {
setupDateFns();
console.log(`http://${hostname}:${port}`);
});

2
src/server/middleware/set-default-csp.ts
View file

@ -3,7 +3,7 @@ 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 *`
`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 * data:`
);
next();

2
src/server/utils/build-themes-list.ts
View file

@ -7,8 +7,10 @@ const extraThemesFolder =
const themes: ReadonlyArray<string> = [
"darkly",
"darkly-red",
"darkly-compact",
"litely",
"litely-red",
"litely-compact",
];
export async function buildThemeList(): Promise<ReadonlyArray<string>> {

61
src/shared/components/app/app.tsx
View file

@ -4,7 +4,7 @@ import { Provider } from "inferno-i18next-dess";
import { Route, Switch } from "inferno-router";
import { IsoDataOptionalSite } from "../../interfaces";
import { routes } from "../../routes";
import { I18NextService } from "../../services";
import { FirstLoadService, I18NextService } from "../../services";
import AuthGuard from "../common/auth-guard";
import ErrorGuard from "../common/error-guard";
import { ErrorPage } from "./error-page";
@ -33,39 +33,48 @@ export class App extends Component<any, any> {
<>
<Provider i18next={I18NextService.i18n}>
<div id="app" className="lemmy-site">
<a
className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
<button
type="button"
className="btn skip-link bg-light position-absolute start-0 z-3"
onClick={linkEvent(this, this.handleJumpToContent)}
>
${I18NextService.i18n.t("jump_to_content", "Jump to content")}
</a>
{I18NextService.i18n.t("jump_to_content", "Jump to content")}
</button>
{siteView && (
<Theme defaultTheme={siteView.local_site.default_theme} />
)}
<Navbar siteRes={siteRes} />
<div className="mt-4 p-0 fl-1">
<Switch>
{routes.map(({ path, component: RouteComponent }) => (
<Route
key={path}
path={path}
exact
component={routeProps => (
<ErrorGuard>
<main tabIndex={-1} ref={this.mainContentRef}>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard>
<RouteComponent {...routeProps} />
</AuthGuard>
) : (
<RouteComponent {...routeProps} />
))}
</main>
</ErrorGuard>
)}
/>
))}
{routes.map(
({ path, component: RouteComponent, fetchInitialData }) => (
<Route
key={path}
path={path}
exact
component={routeProps => {
if (!fetchInitialData) {
FirstLoadService.falsify();
}
return (
<ErrorGuard>
<div tabIndex={-1}>
{RouteComponent &&
(isAuthPath(path ?? "") ? (
<AuthGuard>
<RouteComponent {...routeProps} />
</AuthGuard>
) : (
<RouteComponent {...routeProps} />
))}
</div>
</ErrorGuard>
);
}}
/>
)
)}
<Route component={ErrorPage} />
</Switch>
</div>

6
src/shared/components/app/navbar.tsx
View file

@ -347,10 +347,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</li>
)}
{person && (
<div id="dropdownUser" className="dropdown">
<li id="dropdownUser" className="dropdown">
<button
type="button"
className="btn dropdown-toggle"
role="button"
aria-expanded="false"
data-bs-toggle="dropdown"
>
@ -398,7 +398,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
</button>
</li>
</ul>
</div>
</li>
)}
</>
) : (

4
src/shared/components/comment/comment-form.tsx
View file

@ -1,4 +1,5 @@
import { myAuthRequired } from "@utils/app";
import getUserInterfaceLangId from "@utils/app/user-interface-language";
import { capitalizeFirstLetter } from "@utils/helpers";
import { Component } from "inferno";
import { T } from "inferno-i18next-dess";
@ -40,6 +41,8 @@ export class CommentForm extends Component<CommentFormProps, any> {
: undefined
: undefined;
const userInterfaceLangId = getUserInterfaceLangId(this.props.allLanguages);
return (
<div
className={["comment-form", "mb-3", this.props.containerClass].join(
@ -49,6 +52,7 @@ export class CommentForm extends Component<CommentFormProps, any> {
{UserService.Instance.myUserInfo ? (
<MarkdownTextArea
initialContent={initialContent}
initialLanguageId={userInterfaceLangId}
showLanguage
buttonTitle={this.buttonTitle}
finished={this.props.finished}

132
src/shared/components/comment/comment-node.tsx
View file

@ -3,7 +3,6 @@ import {
getCommentParentId,
myAuth,
myAuthRequired,
newVote,
showScores,
} from "@utils/app";
import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
@ -16,6 +15,9 @@ import {
isMod,
} from "@utils/roles";
import classNames from "classnames";
import isBefore from "date-fns/isBefore";
import parseISO from "date-fns/parseISO";
import subMinutes from "date-fns/subMinutes";
import { Component, InfernoNode, linkEvent } from "inferno";
import { Link } from "inferno-router";
import {
@ -46,20 +48,21 @@ import {
SaveComment,
TransferCommunity,
} from "lemmy-js-client";
import moment from "moment";
import deepEqual from "lodash.isequal";
import { commentTreeMaxDepth } from "../../config";
import {
BanType,
CommentNodeI,
CommentViewType,
PurgeType,
VoteType,
VoteContentType,
} from "../../interfaces";
import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
import { I18NextService, UserService } from "../../services";
import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time";
import { VoteButtonsCompact } from "../common/vote-buttons";
import { CommunityLink } from "../community/community-link";
import { PersonListing } from "../person/person-listing";
import { CommentForm } from "./comment-form";
@ -196,7 +199,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
componentWillReceiveProps(
nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps>
): void {
if (this.props != nextProps) {
if (!deepEqual(this.props, nextProps)) {
this.setState({
showReply: false,
showEdit: false,
@ -280,7 +283,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
node.comment_view.counts.child_count > 0;
return (
<li className="comment" role="comment">
<li className="comment">
<article
id={`comment-${cv.comment.id}`}
className={classNames(`details comment-node py-2`, {
@ -309,7 +312,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<PersonListing person={cv.creator} />
</span>
{cv.comment.distinguished && (
<Icon icon="shield" inline classes={`text-danger me-2`} />
<Icon icon="shield" inline classes="text-danger me-2" />
)}
{this.isPostCreator && (
<div className="badge text-bg-light d-none d-sm-inline me-2">
@ -353,29 +356,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
{/* This is an expanding spacer for mobile */}
<div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
{showScores() && (
<>
<a
className={`unselectable pointer ${this.scoreColor}`}
onClick={linkEvent(this, this.handleUpvote)}
data-tippy-content={this.pointsTippy}
<span
className="me-1 fw-bold"
aria-label={I18NextService.i18n.t("number_of_points", {
count: Number(this.commentView.counts.score),
formattedCount: numToSI(this.commentView.counts.score),
})}
>
{this.state.upvoteLoading ? (
<Spinner />
) : (
<span
className="me-1 font-weight-bold"
aria-label={I18NextService.i18n.t("number_of_points", {
count: Number(this.commentView.counts.score),
formattedCount: numToSI(
this.commentView.counts.score
),
})}
>
{numToSI(this.commentView.counts.score)}
</span>
)}
</a>
{numToSI(this.commentView.counts.score)}
</span>
<span className="me-1">•</span>
</>
)}
@ -417,7 +409,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
/>
)}
<div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
<div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
{this.props.showContext && this.linkBtn()}
{this.props.markable && (
<button
@ -448,60 +440,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)}
{UserService.Instance.myUserInfo && !this.props.viewOnly && (
<>
<button
className={`btn btn-link btn-animate ${
this.commentView.my_vote === 1
? "text-info"
: "text-muted"
}`}
onClick={linkEvent(this, this.handleUpvote)}
data-tippy-content={I18NextService.i18n.t("upvote")}
aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.commentView.my_vote === 1}
>
{this.state.upvoteLoading ? (
<Spinner />
) : (
<>
<Icon icon="arrow-up1" classes="icon-inline" />
{showScores() &&
this.commentView.counts.upvotes !==
this.commentView.counts.score && (
<span className="ms-1">
{numToSI(this.commentView.counts.upvotes)}
</span>
)}
</>
)}
</button>
{this.props.enableDownvotes && (
<button
className={`btn btn-link btn-animate ${
this.commentView.my_vote === -1
? "text-danger"
: "text-muted"
}`}
onClick={linkEvent(this, this.handleDownvote)}
data-tippy-content={I18NextService.i18n.t("downvote")}
aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.commentView.my_vote === -1}
>
{this.state.downvoteLoading ? (
<Spinner />
) : (
<>
<Icon icon="arrow-down1" classes="icon-inline" />
{showScores() &&
this.commentView.counts.upvotes !==
this.commentView.counts.score && (
<span className="ms-1">
{numToSI(this.commentView.counts.downvotes)}
</span>
)}
</>
)}
</button>
)}
<VoteButtonsCompact
voteContentType={VoteContentType.Comment}
id={this.commentView.comment.id}
onVote={this.props.onCommentVote}
enableDownvotes={this.props.enableDownvotes}
counts={this.commentView.counts}
my_vote={this.commentView.my_vote}
/>
<button
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
@ -1451,9 +1397,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
}
get isCommentNew(): boolean {
const now = moment.utc().subtract(10, "minutes");
const then = moment.utc(this.commentView.comment.published);
return now.isBefore(then);
const now = subMinutes(new Date(), 10);
const then = parseISO(this.commentView.comment.published);
return isBefore(now, then);
}
handleCommentCollapse(i: CommentNode) {
@ -1480,24 +1426,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
});
}
handleUpvote(i: CommentNode) {
i.setState({ upvoteLoading: true });
i.props.onCommentVote({
comment_id: i.commentId,
score: newVote(VoteType.Upvote, i.commentView.my_vote),
auth: myAuthRequired(),
});
}
handleDownvote(i: CommentNode) {
i.setState({ downvoteLoading: true });
i.props.onCommentVote({
comment_id: i.commentId,
score: newVote(VoteType.Downvote, i.commentView.my_vote),
auth: myAuthRequired(),
});
}
handleBlockPerson(i: CommentNode) {
i.setState({ blockPersonLoading: true });
i.props.onBlockPerson({

8
src/shared/components/comment/comment-nodes.tsx
View file

@ -79,7 +79,7 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;
const borderColor = this.props.depth
? colorList[this.props.depth % colorList.length]
? colorList[(this.props.depth - 1) % colorList.length]
: colorList[0];
return (
@ -89,7 +89,11 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
"ms-1": !!this.props.isChild,
"border-top border-light": !this.props.noBorder,
})}
style={`border-left: 2px solid ${borderColor} !important;`}
style={
this.props.isChild
? `border-left: 2px solid ${borderColor} !important;`
: undefined
}
>
{this.props.nodes.slice(0, maxComments).map(node => (
<CommentNode

18
src/shared/components/common/emoji-picker.tsx
View file

@ -12,6 +12,10 @@ interface EmojiPickerState {
showPicker: boolean;
}
function closeEmojiMartOnEsc(i, event): void {
event.key === "Escape" && i.setState({ showPicker: false });
}
export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
private emptyState: EmojiPickerState = {
showPicker: false,
@ -23,6 +27,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
this.state = this.emptyState;
this.handleEmojiClick = this.handleEmojiClick.bind(this);
}
render() {
return (
<span className="emoji-picker">
@ -38,13 +43,14 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
{this.state.showPicker && (
<>
<div className="position-relative">
<div className="emoji-picker-container position-absolute w-100">
<div className="position-relative" role="dialog">
<div className="emoji-picker-container">
<EmojiMart
onEmojiClick={this.handleEmojiClick}
pickerOptions={{}}
></EmojiMart>
</div>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
<div
onClick={linkEvent(this, this.togglePicker)}
className="click-away-container"
@ -56,9 +62,17 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
);
}
componentWillUnmount() {
document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
}
togglePicker(i: EmojiPicker, e: any) {
e.preventDefault();
i.setState({ showPicker: !i.state.showPicker });
i.state.showPicker
? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
: document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
}
handleEmojiClick(e: any) {

5
src/shared/components/common/icon.tsx
View file

@ -35,6 +35,7 @@ export class Icon extends Component<IconProps, any> {
interface SpinnerProps {
large?: boolean;
className?: string;
}
export class Spinner extends Component<SpinnerProps, any> {
@ -46,7 +47,9 @@ export class Spinner extends Component<SpinnerProps, any> {
return (
<Icon
icon="spinner"
classes={`spin ${this.props.large && "spinner-large"}`}
classes={classNames("spin", this.props.className, {
"spinner-large": this.props.large,
})}
/>
);
}

13
src/shared/components/common/image-upload-form.tsx
View file

@ -33,13 +33,12 @@ export class ImageUploadForm extends Component<
render() {
return (
<form className="image-upload-form d-inline">
<label
htmlFor={this.id}
className="pointer text-muted small font-weight-bold"
>
<label htmlFor={this.id} className="pointer text-muted small fw-bold">
{this.props.imageSrc ? (
<span className="d-inline-block position-relative">
{/* TODO: Create "Current Iamge" translation for alt text */}
<img
alt=""
src={this.props.imageSrc}
height={this.props.rounded ? 60 : ""}
width={this.props.rounded ? 60 : ""}
@ -47,12 +46,14 @@ export class ImageUploadForm extends Component<
this.props.rounded ? "rounded-circle" : ""
}`}
/>
<a
<button
className="position-absolute d-block p-0 end-0 border-0 top-0 bg-transparent text-white"
type="button"
onClick={linkEvent(this, this.handleRemoveImage)}
aria-label={I18NextService.i18n.t("remove")}
>
<Icon icon="x" classes="mini-overlay" />
</a>
</button>
</span>
) : (
<span className="btn btn-secondary">{this.props.uploadTitle}</span>

66
src/shared/components/common/language-select.tsx
View file

@ -49,39 +49,42 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
return this.props.iconVersion ? (
this.selectBtn
) : (
<div className="language-select">
<div className="language-select row mb-3">
<label
className={classNames(
"col-form-label",
`col-sm-${this.props.multiple ? 3 : 2}`
)}
htmlFor={this.id}
>
{I18NextService.i18n.t(
this.props.multiple ? "language_plural" : "language"
)}
</label>
{this.props.multiple && this.props.showLanguageWarning && (
<div className="alert alert-warning" role="alert">
<div
id="lang-warning"
className="alert small alert-warning"
role="alert"
>
<Icon icon="alert-triangle" classes="icon-inline me-2" />
{I18NextService.i18n.t("undetermined_language_warning")}
</div>
)}
<div className="mb-3 row">
<label
className={classNames(
"col-form-label",
`col-sm-${this.props.multiple ? 3 : 2}`
)}
htmlFor={this.id}
>
{I18NextService.i18n.t(
this.props.multiple ? "language_plural" : "language"
)}
</label>
<div
className={classNames(`col-sm-${this.props.multiple ? 9 : 10}`, {
"input-group": this.props.multiple,
})}
>
{this.selectBtn}
{this.props.multiple && (
<button
className="btn btn-outline-secondary"
onClick={linkEvent(this, this.handleDeselectAll)}
>
<Icon icon="x" />
</button>
)}
</div>
<div
className={classNames(`col-sm-${this.props.multiple ? 9 : 10}`, {
"input-group": this.props.multiple,
})}
>
{this.selectBtn}
{this.props.multiple && (
<button
className="btn btn-outline-secondary"
onClick={linkEvent(this, this.handleDeselectAll)}
>
<Icon icon="x" />
</button>
)}
</div>
</div>
);
@ -105,6 +108,11 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
id={this.id}
onChange={linkEvent(this, this.handleLanguageChange)}
aria-label={I18NextService.i18n.t("language_select_placeholder")}
aria-describedby={
this.props.multiple && this.props.showLanguageWarning
? "lang-warning"
: ""
}
multiple={this.props.multiple}
disabled={this.props.disabled}
>

62
src/shared/components/common/markdown-textarea.tsx
View file

@ -23,15 +23,28 @@ import NavigationPrompt from "./navigation-prompt";
import ProgressBar from "./progress-bar";
interface MarkdownTextAreaProps {
/**
* Initial content inside the textarea
*/
initialContent?: string;
/**
* Numerical ID of the language to select in dropdown
*/
initialLanguageId?: number;
placeholder?: string;
buttonTitle?: string;
maxLength?: number;
/**
* Whether this form is for a reply to a Private Message.
* If true, a "Cancel" button is shown that will close the reply.
*/
replyType?: boolean;
focus?: boolean;
disabled?: boolean;
finished?: boolean;
/**
* Whether to show the language selector
*/
showLanguage?: boolean;
hideNavigationWarnings?: boolean;
onContentChange?(val: string): void;
@ -154,7 +167,7 @@ export class MarkdownTextArea extends Component<
onEmojiClick={e => this.handleEmoji(this, e)}
disabled={this.isDisabled}
></EmojiPicker>
<form className="btn btn-sm text-muted font-weight-bold">
<form className="btn btn-sm text-muted fw-bold">
<label
htmlFor={`file-upload-${this.id}`}
className={`mb-0 ${
@ -197,7 +210,7 @@ export class MarkdownTextArea extends Component<
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
<a
href={markdownHelpUrl}
className="btn btn-sm text-muted font-weight-bold"
className="btn btn-sm text-muted fw-bold"
title={I18NextService.i18n.t("formatting_help")}
rel={relTags}
>
@ -260,8 +273,12 @@ export class MarkdownTextArea extends Component<
<LanguageSelect
iconVersion
allLanguages={this.props.allLanguages}
// Only set the selected language ID if it exists as an option
// in the dropdown; otherwise, set it to 0 (Undetermined)
selectedLanguageIds={
languageId ? Array.of(languageId) : undefined
languageId && this.props.siteLanguages.includes(languageId)
? [languageId]
: [0]
}
siteLanguages={this.props.siteLanguages}
onChange={this.handleLanguageChange}
@ -272,19 +289,6 @@ export class MarkdownTextArea extends Component<
{/* A flex expander */}
<div className="flex-grow-1"></div>
{this.props.buttonTitle && (
<button
type="submit"
className="btn btn-sm btn-secondary ms-2"
disabled={this.isDisabled}
>
{this.state.loading ? (
<Spinner />
) : (
<span>{this.props.buttonTitle}</span>
)}
</button>
)}
{this.props.replyType && (
<button
type="button"
@ -294,16 +298,26 @@ export class MarkdownTextArea extends Component<
{I18NextService.i18n.t("cancel")}
</button>
)}
{this.state.content && (
<button
type="button"
disabled={!this.state.content}
className={classNames("btn btn-sm btn-secondary ms-2", {
active: this.state.previewMode,
})}
onClick={linkEvent(this, this.handlePreviewToggle)}
>
{this.state.previewMode
? I18NextService.i18n.t("edit")
: I18NextService.i18n.t("preview")}
</button>
{this.props.buttonTitle && (
<button
className={`btn btn-sm btn-secondary ms-2 ${
this.state.previewMode && "active"
}`}
onClick={linkEvent(this, this.handlePreviewToggle)}
type="submit"
className="btn btn-sm btn-secondary ms-2"
disabled={this.isDisabled || !this.state.content}
>
{this.state.previewMode
? I18NextService.i18n.t("edit")
: I18NextService.i18n.t("preview")}
{this.state.loading && <Spinner className="me-1" />}
{this.props.buttonTitle}
</button>
)}
</div>

27
src/shared/components/common/moment-time.tsx
View file

@ -1,6 +1,7 @@
import { capitalizeFirstLetter } from "@utils/helpers";
import { capitalizeFirstLetter, formatPastDate } from "@utils/helpers";
import format from "date-fns/format";
import parseISO from "date-fns/parseISO";
import { Component } from "inferno";
import moment from "moment";
import { I18NextService } from "../../services";
import { Icon } from "./icon";
@ -11,22 +12,24 @@ interface MomentTimeProps {
ignoreUpdated?: boolean;
}
function formatDate(input: string) {
return format(parseISO(input), "PPPPpppp");
}
export class MomentTime extends Component<MomentTimeProps, any> {
constructor(props: any, context: any) {
super(props, context);
moment.locale([...I18NextService.i18n.languages]);
}
createdAndModifiedTimes() {
const updated = this.props.updated;
let line = `${capitalizeFirstLetter(
I18NextService.i18n.t("created")
)}: ${this.format(this.props.published)}`;
)}: ${formatDate(this.props.published)}`;
if (updated) {
line += `\n\n\n${capitalizeFirstLetter(
I18NextService.i18n.t("modified")
)} ${this.format(updated)}`;
)} ${formatDate(updated)}`;
}
return line;
}
@ -36,10 +39,10 @@ export class MomentTime extends Component<MomentTimeProps, any> {
return (
<span
data-tippy-content={this.createdAndModifiedTimes()}
className="moment-time font-italics pointer unselectable"
className="moment-time fst-italic pointer unselectable"
>
<Icon icon="edit-2" classes="icon-inline me-1" />
{moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
{formatPastDate(this.props.updated)}
</span>
);
} else {
@ -47,15 +50,11 @@ export class MomentTime extends Component<MomentTimeProps, any> {
return (
<span
className="moment-time pointer unselectable"
data-tippy-content={this.format(published)}
data-tippy-content={formatDate(published)}
>
{moment.utc(published).fromNow(!this.props.showAgo)}
{formatPastDate(published)}
</span>
);
}
}
format(input: string): string {
return moment.utc(input).local().format("LLLL");
}
}

11
src/shared/components/common/searchable-select.tsx
View file

@ -106,8 +106,12 @@ export class SearchableSelect extends Component<
<button
id={id}
type="button"
role="combobox"
className="form-select d-inline-block text-start"
aria-haspopup="listbox"
aria-controls="searchable-select-input"
aria-activedescendant={options[selectedIndex].label}
aria-expanded={false}
data-bs-toggle="dropdown"
onClick={linkEvent(this, focusSearch)}
ref={this.toggleButtonRef}
@ -116,17 +120,14 @@ export class SearchableSelect extends Component<
? `${I18NextService.i18n.t("loading")}${loadingEllipses}`
: options[selectedIndex].label}
</button>
<div
role="combobox"
aria-activedescendant={options[selectedIndex].label}
className="modlog-choices-font-size dropdown-menu w-100 p-2"
>
<div className="modlog-choices-font-size dropdown-menu w-100 p-2">
<div className="input-group">
<span className="input-group-text">
{loading ? <Spinner /> : <Icon icon="search" />}
</span>
<input
type="text"
id="searchable-select-input"
className="form-control"
ref={this.searchInputRef}
onInput={linkEvent(this, handleSearch)}

225
src/shared/components/common/vote-buttons.tsx Normal file
View file

@ -0,0 +1,225 @@
import { myAuthRequired, newVote, showScores } from "@utils/app";
import { numToSI } from "@utils/helpers";
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import {
CommentAggregates,
CreateCommentLike,
CreatePostLike,
PostAggregates,
} from "lemmy-js-client";
import { VoteContentType, VoteType } from "../../interfaces";
import { I18NextService } from "../../services";
import { Icon, Spinner } from "../common/icon";
interface VoteButtonsProps {
voteContentType: VoteContentType;
id: number;
onVote: (i: CreateCommentLike | CreatePostLike) => void;
enableDownvotes?: boolean;
counts: CommentAggregates | PostAggregates;
my_vote?: number;
}
interface VoteButtonsState {
upvoteLoading: boolean;
downvoteLoading: boolean;
}
const tippy = (counts: CommentAggregates | PostAggregates): string => {
const points = I18NextService.i18n.t("number_of_points", {
count: Number(counts.score),
formattedCount: Number(counts.score),
});
const upvotes = I18NextService.i18n.t("number_of_upvotes", {
count: Number(counts.upvotes),
formattedCount: Number(counts.upvotes),
});
const downvotes = I18NextService.i18n.t("number_of_downvotes", {
count: Number(counts.downvotes),
formattedCount: Number(counts.downvotes),
});
return `${points} • ${upvotes} • ${downvotes}`;
};
const handleUpvote = (i: VoteButtons) => {
i.setState({ upvoteLoading: true });
switch (i.props.voteContentType) {
case VoteContentType.Comment:
i.props.onVote({
comment_id: i.props.id,
score: newVote(VoteType.Upvote, i.props.my_vote),
auth: myAuthRequired(),
});
break;
case VoteContentType.Post:
default:
i.props.onVote({
post_id: i.props.id,
score: newVote(VoteType.Upvote, i.props.my_vote),
auth: myAuthRequired(),
});
}
i.setState({ upvoteLoading: false });
};
const handleDownvote = (i: VoteButtons) => {
i.setState({ downvoteLoading: true });
switch (i.props.voteContentType) {
case VoteContentType.Comment:
i.props.onVote({
comment_id: i.props.id,
score: newVote(VoteType.Downvote, i.props.my_vote),
auth: myAuthRequired(),
});
break;
case VoteContentType.Post:
default:
i.props.onVote({
post_id: i.props.id,
score: newVote(VoteType.Downvote, i.props.my_vote),
auth: myAuthRequired(),
});
}
i.setState({ downvoteLoading: false });
};
export class VoteButtonsCompact extends Component<
VoteButtonsProps,
VoteButtonsState
> {
state: VoteButtonsState = {
upvoteLoading: false,
downvoteLoading: false,
};
constructor(props: any, context: any) {
super(props, context);
}
render() {
return (
<>
<button
type="button"
className={`btn-animate btn py-0 px-1 ${
this.props.my_vote === 1 ? "text-info" : "text-muted"
}`}
data-tippy-content={tippy(this.props.counts)}
onClick={linkEvent(this, handleUpvote)}
aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.props.my_vote === 1}
>
{this.state.upvoteLoading ? (
<Spinner />
) : (
<>
<Icon icon="arrow-up1" classes="icon-inline small" />
{showScores() && (
<span className="ms-2">
{numToSI(this.props.counts.upvotes)}
</span>
)}
</>
)}
</button>
{this.props.enableDownvotes && (
<button
type="button"
className={`ms-2 btn-animate btn py-0 px-1 ${
this.props.my_vote === -1 ? "text-danger" : "text-muted"
}`}
onClick={linkEvent(this, handleDownvote)}
data-tippy-content={tippy(this.props.counts)}
aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.props.my_vote === -1}
>
{this.state.downvoteLoading ? (
<Spinner />
) : (
<>
<Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && (
<span
className={classNames("ms-2", {
invisible: this.props.counts.downvotes === 0,
})}
>
{numToSI(this.props.counts.downvotes)}
</span>
)}
</>
)}
</button>
)}
</>
);
}
}
export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
state: VoteButtonsState = {
upvoteLoading: false,
downvoteLoading: false,
};
constructor(props: any, context: any) {
super(props, context);
}
render() {
return (
<div className="vote-bar col-1 pe-0 small text-center">
<button
type="button"
className={`btn-animate btn btn-link p-0 ${
this.props.my_vote == 1 ? "text-info" : "text-muted"
}`}
onClick={linkEvent(this, handleUpvote)}
data-tippy-content={I18NextService.i18n.t("upvote")}
aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.props.my_vote === 1}
>
{this.state.upvoteLoading ? (
<Spinner />
) : (
<Icon icon="arrow-up1" classes="upvote" />
)}
</button>
{showScores() ? (
<div
className="unselectable pointer text-muted px-1 post-score"
data-tippy-content={tippy(this.props.counts)}
>
{numToSI(this.props.counts.score)}
</div>
) : (
<div className="p-1"></div>
)}
{this.props.enableDownvotes && (
<button
type="button"
className={`btn-animate btn btn-link p-0 ${
this.props.my_vote == -1 ? "text-danger" : "text-muted"
}`}
onClick={linkEvent(this, handleDownvote)}
data-tippy-content={I18NextService.i18n.t("downvote")}
aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.props.my_vote === -1}
>
{this.state.downvoteLoading ? (
<Spinner />
) : (
<Icon icon="arrow-down1" classes="downvote" />
)}
</button>
)}
</div>
);
}
}

14
src/shared/components/community/community.tsx
View file

@ -22,7 +22,7 @@ import {
} from "@utils/helpers";
import type { QueryParams } from "@utils/types";
import { RouteDataResponse } from "@utils/types";
import { Component, linkEvent } from "inferno";
import { Component, RefObject, createRef, linkEvent } from "inferno";
import { RouteComponentProps } from "inferno-router/dist/Route";
import {
AddAdmin,
@ -154,7 +154,7 @@ export class Community extends Component<
finished: new Map(),
isIsomorphic: false,
};
private readonly mainContentRef: RefObject<HTMLElement>;
constructor(props: RouteComponentProps<{ name: string }>, context: any) {
super(props, context);
@ -195,7 +195,7 @@ export class Community extends Component<
this.handleSavePost = this.handleSavePost.bind(this);
this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this);
this.mainContentRef = createRef();
// Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) {
const { communityRes, commentsRes, postsRes } = this.isoData.routeData;
@ -317,7 +317,7 @@ export class Community extends Component<
/>
<div className="row">
<div className="col-12 col-md-8">
<main className="col-12 col-md-8" ref={this.mainContentRef}>
{this.communityInfo(res)}
<div className="d-block d-md-none">
<button
@ -339,10 +339,10 @@ export class Community extends Component<
{this.selects(res)}
{this.listings(res)}
<Paginator page={page} onChange={this.handlePageChange} />
</div>
<div className="d-none d-md-block col-md-4">
</main>
<aside className="d-none d-md-block col-md-4">
{this.sidebar(res)}
</div>
</aside>
</div>
</>
);

8
src/shared/components/community/sidebar.tsx
View file

@ -204,17 +204,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</button>
)}
{community.removed && (
<small className="me-2 text-muted font-italic">
<small className="me-2 text-muted fst-italic">
{I18NextService.i18n.t("removed")}
</small>
)}
{community.deleted && (
<small className="me-2 text-muted font-italic">
<small className="me-2 text-muted fst-italic">
{I18NextService.i18n.t("deleted")}
</small>
)}
{community.nsfw && (
<small className="me-2 text-muted font-italic">
<small className="me-2 text-muted fst-italic">
{I18NextService.i18n.t("nsfw")}
</small>
)}
@ -309,7 +309,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
const community_view = this.props.community_view;
return (
<>
<ul className="list-inline mb-1 text-muted font-weight-bold">
<ul className="list-inline mb-1 text-muted fw-bold">
{amMod(this.props.moderators) && (
<>
<li className="list-inline-item-action">

15
src/shared/components/home/admin-settings.tsx
View file

@ -44,7 +44,6 @@ interface AdminSettingsState {
instancesRes: RequestState<GetFederatedInstancesResponse>;
bannedRes: RequestState<BannedPersonsResponse>;
leaveAdminTeamRes: RequestState<GetSiteResponse>;
emojiLoading: boolean;
loading: boolean;
themeList: string[];
isIsomorphic: boolean;
@ -59,7 +58,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
bannedRes: { state: "empty" },
instancesRes: { state: "empty" },
leaveAdminTeamRes: { state: "empty" },
emojiLoading: false,
loading: false,
themeList: [],
isIsomorphic: false,
@ -215,7 +213,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
onCreate={this.handleCreateEmoji}
onDelete={this.handleDeleteEmoji}
onEdit={this.handleEditEmoji}
loading={this.state.emojiLoading}
/>
</div>
</div>
@ -345,35 +342,23 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
}
async handleEditEmoji(form: EditCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.editCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
this.setState({ emojiLoading: false });
}
async handleDeleteEmoji(form: DeleteCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.deleteCustomEmoji(form);
if (res.state === "success") {
removeFromEmojiDataModel(res.data.id);
}
this.setState({ emojiLoading: false });
}
async handleCreateEmoji(form: CreateCustomEmoji) {
this.setState({ emojiLoading: true });
const res = await HttpService.client.createCustomEmoji(form);
if (res.state === "success") {
updateEmojiDataModel(res.data.custom_emoji);
}
this.setState({ emojiLoading: false });
}
}

194
src/shared/components/home/emojis-form.tsx
View file

@ -1,4 +1,5 @@
import { myAuthRequired, setIsoData } from "@utils/app";
import { capitalizeFirstLetter } from "@utils/helpers";
import { Component, linkEvent } from "inferno";
import {
CreateCustomEmoji,
@ -11,14 +12,13 @@ import { HttpService, I18NextService } from "../../services";
import { pictrsDeleteToast, toast } from "../../toast";
import { EmojiMart } from "../common/emoji-mart";
import { HtmlTags } from "../common/html-tags";
import { Icon } from "../common/icon";
import { Icon, Spinner } from "../common/icon";
import { Paginator } from "../common/paginator";
interface EmojiFormProps {
onEdit(form: EditCustomEmoji): void;
onCreate(form: CreateCustomEmoji): void;
onDelete(form: DeleteCustomEmoji): void;
loading: boolean;
}
interface EmojiFormState {
@ -36,6 +36,7 @@ interface CustomEmojiViewForm {
keywords: string;
changed: boolean;
page: number;
loading: boolean;
}
export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
@ -52,6 +53,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
keywords: x.keywords.map(x => x.keyword).join(" "),
changed: false,
page: 1 + Math.floor(index / this.itemsPerPage),
loading: false,
})),
page: 1,
};
@ -119,33 +121,39 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.map((cv, index) => (
<tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
<td style="text-align:center;">
<label
htmlFor={index.toString()}
className="pointer text-muted small font-weight-bold"
>
{cv.image_url.length > 0 && (
<img
className="icon-emoji-admin"
src={cv.image_url}
/>
)}
{cv.image_url.length == 0 && (
<span className="btn btn-sm btn-secondary">
Upload
</span>
)}
</label>
<input
name={index.toString()}
id={index.toString()}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
{cv.image_url.length > 0 && (
<img
className="icon-emoji-admin"
src={cv.image_url}
alt={cv.alt_text}
/>
)}
{cv.image_url.length === 0 && (
<form>
<label
className="btn btn-sm btn-secondary pointer"
htmlFor={`file-uploader-${index}`}
data-tippy-content={I18NextService.i18n.t(
"upload_image"
)}
>
{capitalizeFirstLetter(
I18NextService.i18n.t("upload")
)}
<input
name={`file-uploader-${index}`}
id={`file-uploader-${index}`}
type="file"
accept="image/*"
className="d-none"
onChange={linkEvent(
{ form: this, index: index },
this.handleImageUpload
)}
/>
</label>
</form>
)}
</td>
<td className="text-right">
<input
@ -213,8 +221,9 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
<span title={this.getEditTooltip(cv)}>
<button
className={
(cv.changed ? "text-success " : "text-muted ") +
"btn btn-link btn-animate"
(this.canEdit(cv)
? "text-success "
: "text-muted ") + "btn btn-link btn-animate"
}
onClick={linkEvent(
{ i: this, cv: cv },
@ -222,17 +231,15 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)}
data-tippy-content={I18NextService.i18n.t("save")}
aria-label={I18NextService.i18n.t("save")}
disabled={
this.props.loading ||
!this.canEdit(cv) ||
!cv.changed
}
disabled={!this.canEdit(cv)}
>
{/* <Icon
icon="edit"
classes={`icon-inline`}
/> */}
Save
{cv.loading ? (
<Spinner />
) : (
capitalizeFirstLetter(
I18NextService.i18n.t("save")
)
)}
</button>
</span>
<button
@ -243,12 +250,12 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
)}
data-tippy-content={I18NextService.i18n.t("delete")}
aria-label={I18NextService.i18n.t("delete")}
disabled={this.props.loading}
disabled={cv.loading}
title={I18NextService.i18n.t("delete")}
>
<Icon
icon="trash"
classes={`icon-inline text-danger`}
classes="icon-inline text-danger"
/>
</button>
</div>
@ -281,7 +288,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
this.state.customEmojis.filter(
x => x.shortcode == cv.shortcode && x.id != cv.id
).length == 0;
return noEmptyFields && noDuplicateShortCodes;
return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
}
getEditTooltip(cv: CustomEmojiViewForm) {
@ -339,19 +346,36 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
}
handleEmojiImageUrlChange(
props: { form: EmojiForm; index: number; overrideValue: string | null },
{
form,
index,
overrideValue,
}: { form: EmojiForm; index: number; overrideValue: string | null },
event: any
) {
const custom_emojis = [...props.form.state.customEmojis];
const pagedIndex =
(props.form.state.page - 1) * props.form.itemsPerPage + props.index;
const item = {
...props.form.state.customEmojis[pagedIndex],
image_url: props.overrideValue ?? event.target.value,
changed: true,
};
custom_emojis[Number(pagedIndex)] = item;
props.form.setState({ customEmojis: custom_emojis });
form.setState(prevState => {
const custom_emojis = [...form.state.customEmojis];
const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
const item = {
...form.state.customEmojis[pagedIndex],
image_url: overrideValue ?? event.target.value,
changed: true,
};
custom_emojis[Number(pagedIndex)] = item;
return {
...prevState,
customEmojis: prevState.customEmojis.map((ce, i) =>
i === pagedIndex
? {
...ce,
image_url: overrideValue ?? event.target.value,
changed: true,
loading: false,
}
: ce
),
};
});
}
handleEmojiAltTextChange(
@ -409,7 +433,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
.split(" ")
.filter(x => x.length > 0) as string[];
const uniqueKeywords = Array.from(new Set(keywords));
if (d.cv.id != 0) {
if (d.cv.id !== 0) {
d.i.props.onEdit({
id: d.cv.id,
category: d.cv.category,
@ -432,24 +456,33 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
handleAddEmojiClick(form: EmojiForm, event: any) {
event.preventDefault();
const custom_emojis = [...form.state.customEmojis];
const page =
1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage);
const item: CustomEmojiViewForm = {
id: 0,
shortcode: "",
alt_text: "",
category: "",
image_url: "",
keywords: "",
changed: true,
page: page,
};
custom_emojis.push(item);
form.setState({ customEmojis: custom_emojis, page: page });
form.setState(prevState => {
const page =
1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
const item: CustomEmojiViewForm = {
id: 0,
shortcode: "",
alt_text: "",
category: "",
image_url: "",
keywords: "",
changed: false,
page: page,
loading: false,
};
return {
...prevState,
customEmojis: [...prevState.customEmojis, item],
page,
};
});
}
handleImageUpload(props: { form: EmojiForm; index: number }, event: any) {
handleImageUpload(
{ form, index }: { form: EmojiForm; index: number },
event: any
) {
let file: any;
if (event.target) {
event.preventDefault();
@ -458,20 +491,25 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
file = event;
}
form.setState(prevState => ({
...prevState,
customEmojis: prevState.customEmojis.map((cv, i) =>
i === index ? { ...cv, loading: true } : cv
),
}));
HttpService.client.uploadImage({ image: file }).then(res => {
console.log("pictrs upload:");
console.log(res);
if (res.state === "success") {
if (res.data.msg === "ok") {
pictrsDeleteToast(file.name, res.data.delete_url as string);
} else {
toast(JSON.stringify(res), "danger");
const hash = res.data.files?.at(0)?.file;
const url = `${res.data.url}/${hash}`;
props.form.handleEmojiImageUrlChange(
{ form: props.form, index: props.index, overrideValue: url },
form.handleEmojiImageUrlChange(
{ form: form, index: index, overrideValue: res.data.url as string },
event
);
} else {
toast(JSON.stringify(res), "danger");
}
} else if (res.state === "failed") {
console.error(res.msg);

65
src/shared/components/home/home.tsx
View file

@ -78,7 +78,12 @@ import {
InitialFetchRequest,
} from "../../interfaces";
import { mdToHtml } from "../../markdown";
import { FirstLoadService, I18NextService, UserService } from "../../services";
import {
FirstLoadService,
HomeCacheService,
I18NextService,
UserService,
} from "../../services";
import { HttpService, RequestState } from "../../services/HttpService";
import { setupTippy } from "../../tippy";
import { toast } from "../../toast";
@ -101,6 +106,7 @@ interface HomeState {
showTrendingMobile: boolean;
showSidebarMobile: boolean;
subscribedCollapsed: boolean;
scrolled: boolean;
tagline?: string;
siteRes: GetSiteResponse;
finished: Map<CommentId, boolean | undefined>;
@ -217,6 +223,7 @@ export class Home extends Component<any, HomeState> {
postsRes: { state: "empty" },
commentsRes: { state: "empty" },
trendingCommunitiesRes: { state: "empty" },
scrolled: true,
siteRes: this.isoData.site_res,
showSubscribedMobile: false,
showTrendingMobile: false,
@ -276,9 +283,15 @@ export class Home extends Component<any, HomeState> {
?.content,
isIsomorphic: true,
};
HomeCacheService.postsRes = postsRes;
}
}
componentWillUnmount() {
HomeCacheService.activate();
}
async componentDidMount() {
if (
!this.state.isIsomorphic ||
@ -620,6 +633,11 @@ export class Home extends Component<any, HomeState> {
search: getQueryString(queryParams),
});
if (!this.state.scrolled) {
this.setState({ scrolled: true });
setTimeout(() => window.scrollTo(0, 0), 0);
}
await this.fetchData();
}
@ -643,6 +661,8 @@ export class Home extends Component<any, HomeState> {
if (dataType === DataType.Post) {
switch (this.state.postsRes?.state) {
case "empty":
return <div style="min-height: 20000px;"></div>;
case "loading":
return (
<h5>
@ -770,17 +790,30 @@ export class Home extends Component<any, HomeState> {
const { dataType, page, listingType, sort } = getHomeQueryParams();
if (dataType === DataType.Post) {
this.setState({ postsRes: { state: "loading" } });
this.setState({
postsRes: await HttpService.client.getPosts({
page,
limit: fetchLimit,
sort,
saved_only: false,
type_: listingType,
auth,
}),
});
if (HomeCacheService.active) {
const { postsRes, scrollY } = HomeCacheService;
HomeCacheService.deactivate();
this.setState({ postsRes });
window.scrollTo({
left: 0,
top: scrollY,
behavior: "instant",
});
} else {
this.setState({ postsRes: { state: "loading" } });
this.setState({
postsRes: await HttpService.client.getPosts({
page,
limit: fetchLimit,
sort,
saved_only: false,
type_: listingType,
auth,
}),
});
HomeCacheService.postsRes = this.state.postsRes;
}
} else {
this.setState({ commentsRes: { state: "loading" } });
this.setState({
@ -815,23 +848,23 @@ export class Home extends Component<any, HomeState> {
}
handlePageChange(page: number) {
this.setState({ scrolled: false });
this.updateUrl({ page });
window.scrollTo(0, 0);
}
handleSortChange(val: SortType) {
this.setState({ scrolled: false });
this.updateUrl({ sort: val, page: 1 });
window.scrollTo(0, 0);
}
handleListingTypeChange(val: ListingType) {
this.setState({ scrolled: false });
this.updateUrl({ listingType: val, page: 1 });
window.scrollTo(0, 0);
}
handleDataTypeChange(val: DataType) {
this.setState({ scrolled: false });
this.updateUrl({ dataType: val, page: 1 });
window.scrollTo(0, 0);
}
async handleAddModToCommunity(form: AddModToCommunity) {

138
src/shared/components/home/login-reset.tsx Normal file
View file

@ -0,0 +1,138 @@
import { setIsoData } from "@utils/app";
import { capitalizeFirstLetter, validEmail } from "@utils/helpers";
import { Component, linkEvent } from "inferno";
import { GetSiteResponse } from "lemmy-js-client";
import { HttpService, I18NextService, UserService } from "../../services";
import { toast } from "../../toast";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
interface State {
form: {
email: string;
loading: boolean;
};
siteRes: GetSiteResponse;
}
export class LoginReset extends Component<any, State> {
private isoData = setIsoData(this.context);
state: State = {
form: {
email: "",
loading: false,
},
siteRes: this.isoData.site_res,
};
constructor(props: any, context: any) {
super(props, context);
}
componentDidMount() {
if (UserService.Instance.myUserInfo) {
this.context.router.history.push("/");
}
}
get documentTitle(): string {
return `${capitalizeFirstLetter(
I18NextService.i18n.t("forgot_password")
)} - ${this.state.siteRes.site_view.site.name}`;
}
render() {
return (
<div className="container-lg">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
<div className="col-12 col-lg-6 col-md-8 m-auto">
{this.loginResetForm()}
</div>
</div>
);
}
loginResetForm() {
return (
<form onSubmit={linkEvent(this, this.handlePasswordReset)}>
<h5>
{capitalizeFirstLetter(I18NextService.i18n.t("forgot_password"))}
</h5>
<div className="form-group row">
<label className="col-form-label">
{I18NextService.i18n.t("no_password_reset")}
</label>
</div>
<div className="form-group row mt-2">
<label
className="col-sm-2 col-form-label"
htmlFor="login-reset-email"
>
{I18NextService.i18n.t("email")}
</label>
<div className="col-sm-10">
<input
type="text"
className="form-control"
id="login-reset-email"
value={this.state.form.email}
onInput={linkEvent(this, this.handleEmailInputChange)}
autoComplete="email"
required
minLength={3}
/>
</div>
</div>
<div className="form-group row mt-3">
<div className="col-sm-10">
<button
type="button"
onClick={linkEvent(this, this.handlePasswordReset)}
className="btn btn-secondary"
disabled={
!validEmail(this.state.form.email) || this.state.form.loading
}
>
{this.state.form.loading ? (
<Spinner />
) : (
I18NextService.i18n.t("reset_password")
)}
</button>
</div>
</div>
</form>
);
}
handleEmailInputChange(i: LoginReset, event: any) {
i.setState(s => ((s.form.email = event.target.value.trim()), s));
}
async handlePasswordReset(i: LoginReset, event: any) {
event.preventDefault();
const email = i.state.form.email;
if (email && validEmail(email)) {
i.setState(s => ((s.form.loading = true), s));
const res = await HttpService.client.passwordReset({ email });
if (res.state == "success") {
toast(I18NextService.i18n.t("reset_password_mail_sent"));
i.context.router.history.push("/login");
}
i.setState(s => ((s.form.loading = false), s));
}
}
}

25
src/shared/components/home/login.tsx
View file

@ -1,7 +1,7 @@
import { myAuth, setIsoData } from "@utils/app";
import { isBrowser } from "@utils/browser";
import { validEmail } from "@utils/helpers";
import { Component, linkEvent } from "inferno";
import { NavLink } from "inferno-router";
import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
import { I18NextService, UserService } from "../../services";
import { HttpService, RequestState } from "../../services/HttpService";
@ -105,18 +105,12 @@ export class Login extends Component<any, State> {
required
maxLength={60}
/>
<button
type="button"
onClick={linkEvent(this, this.handlePasswordReset)}
<NavLink
className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
disabled={
!!this.state.form.username_or_email &&
!validEmail(this.state.form.username_or_email)
}
title={I18NextService.i18n.t("no_password_reset")}
to="/login_reset"
>
{I18NextService.i18n.t("forgot_password")}
</button>
</NavLink>
</div>
</div>
{this.state.showTotp && (
@ -214,15 +208,4 @@ export class Login extends Component<any, State> {
i.state.form.password = event.target.value;
i.setState(i.state);
}
async handlePasswordReset(i: Login, event: any) {
event.preventDefault();
const email = i.state.form.username_or_email;
if (email) {
const res = await HttpService.client.passwordReset({ email });
if (res.state == "success") {
toast(I18NextService.i18n.t("reset_password_mail_sent"));
}
}
}
}

5
src/shared/components/home/signup.tsx
View file

@ -140,7 +140,10 @@ export class Signup extends Component<any, State> {
registerForm() {
const siteView = this.state.siteRes.site_view;
return (
<form onSubmit={linkEvent(this, this.handleRegisterSubmit)}>
<form
className="was-validated"
onSubmit={linkEvent(this, this.handleRegisterSubmit)}
>
<h5>{this.titleName(siteView)}</h5>
{this.isLemmyMl && (

31
src/shared/components/home/site-form.tsx
View file

@ -78,7 +78,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
slur_filter_regex: ls.slur_filter_regex,
actor_name_max_length: ls.actor_name_max_length,
federation_enabled: ls.federation_enabled,
federation_worker_count: ls.federation_worker_count,
captcha_enabled: ls.captcha_enabled,
captcha_difficulty: ls.captcha_difficulty,
allowed_instances: this.props.allowedInstances?.map(i => i.domain),
@ -554,27 +553,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div className="mb-3 row">
<label
className="col-12 col-form-label"
htmlFor="create-site-federation-worker-count"
>
{I18NextService.i18n.t("federation_worker_count")}
</label>
<div className="col-12">
<input
type="number"
id="create-site-federation-worker-count"
className="form-control"
min={0}
value={this.state.siteForm.federation_worker_count}
onInput={linkEvent(
this,
this.handleSiteFederationWorkerCount
)}
/>
</div>
</div>
</>
)}
<div className="mb-3 row">
@ -781,7 +759,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
stateSiteForm.rate_limit_search_per_second,
federation_enabled: stateSiteForm.federation_enabled,
federation_debug: stateSiteForm.federation_debug,
federation_worker_count: stateSiteForm.federation_worker_count,
captcha_enabled: stateSiteForm.captcha_enabled,
captcha_difficulty: stateSiteForm.captcha_difficulty,
allowed_instances: stateSiteForm.allowed_instances,
@ -982,14 +959,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
i.setState(i.state);
}
handleSiteFederationWorkerCount(i: SiteForm, event: any) {
i.setState(
s => (
(s.siteForm.federation_worker_count = Number(event.target.value)), s
)
);
}
handleSiteCaptchaEnabled(i: SiteForm, event: any) {
i.state.siteForm.captcha_enabled = event.target.checked;
i.setState(i.state);

4
src/shared/components/home/tagline-form.tsx
View file

@ -71,7 +71,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
data-tippy-content={I18NextService.i18n.t("edit")}
aria-label={I18NextService.i18n.t("edit")}
>
<Icon icon="edit" classes={`icon-inline`} />
<Icon icon="edit" classes="icon-inline" />
</button>
<button
@ -83,7 +83,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
data-tippy-content={I18NextService.i18n.t("delete")}
aria-label={I18NextService.i18n.t("delete")}
>
<Icon icon="trash" classes={`icon-inline text-danger`} />
<Icon icon="trash" classes="icon-inline text-danger" />
</button>
</td>
</tr>

8
src/shared/components/modlog.tsx
View file

@ -7,6 +7,7 @@ import {
} from "@utils/app";
import {
debounce,
formatPastDate,
getIdFromString,
getPageFromString,
getQueryParams,
@ -44,7 +45,6 @@ import {
ModlogActionType,
Person,
} from "lemmy-js-client";
import moment from "moment";
import { fetchLimit } from "../config";
import { InitialFetchRequest } from "../interfaces";
import { FirstLoadService, I18NextService } from "../services";
@ -371,7 +371,7 @@ function renderModlogType({ type_, view }: ModlogType) {
)}
{expires && (
<span>
<div>expires: {moment.utc(expires).fromNow()}</div>
<div>expires: {formatPastDate(expires)}</div>
</span>
)}
</>
@ -403,7 +403,7 @@ function renderModlogType({ type_, view }: ModlogType) {
)}
{expires && (
<span>
<div>expires: {moment.utc(expires).fromNow()}</div>
<div>expires: {formatPastDate(expires)}</div>
</span>
)}
</>
@ -467,7 +467,7 @@ function renderModlogType({ type_, view }: ModlogType) {
)}
{expires && (
<span>
<div>expires: {moment.utc(expires).fromNow()}</div>
<div>expires: {formatPastDate(expires)}</div>
</span>
)}
</>

2
src/shared/components/person/cake-day.tsx
View file

@ -10,7 +10,7 @@ export class CakeDay extends Component<CakeDayProps, any> {
render() {
return (
<div
className={`cake-day 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" />

5
src/shared/components/person/inbox.tsx
View file

@ -11,6 +11,7 @@ import {
setIsoData,
updatePersonBlock,
} from "@utils/app";
import { capitalizeFirstLetter } from "@utils/helpers";
import { RouteDataResponse } from "@utils/types";
import { Component, linkEvent } from "inferno";
import {
@ -243,7 +244,9 @@ export class Inbox extends Component<any, InboxState> {
{this.state.markAllAsReadRes.state == "loading" ? (
<Spinner />
) : (
I18NextService.i18n.t("mark_all_as_read")
capitalizeFirstLetter(
I18NextService.i18n.t("mark_all_as_read")
)
)}
</button>
)}

14
src/shared/components/person/profile.tsx
View file

@ -23,6 +23,8 @@ import { canMod, isAdmin, isBanned } from "@utils/roles";
import type { QueryParams } from "@utils/types";
import { RouteDataResponse } from "@utils/types";
import classNames from "classnames";
import format from "date-fns/format";
import parseISO from "date-fns/parseISO";
import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import { Link } from "inferno-router";
@ -70,7 +72,6 @@ import {
SortType,
TransferCommunity,
} from "lemmy-js-client";
import moment from "moment";
import { fetchLimit, relTags } from "../../config";
import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
import { mdToHtml } from "../../markdown";
@ -204,6 +205,7 @@ export class Profile extends Component<
this.handleSavePost = this.handleSavePost.bind(this);
this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this);
this.handleModBanSubmit = this.handleModBanSubmit.bind(this);
// Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) {
@ -613,10 +615,7 @@ export class Profile extends Component<
<Icon icon="cake" />
<span className="ms-2">
{I18NextService.i18n.t("cake_day_title")}{" "}
{moment
.utc(pv.person.published)
.local()
.format("MMM DD, YYYY")}
{format(parseISO(pv.person.published), "PPP")}
</span>
</div>
{!UserService.Instance.myUserInfo && (
@ -649,12 +648,12 @@ export class Profile extends Component<
value={this.state.banReason}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
<label className="col-form-label" htmlFor={`mod-ban-expires`}>
<label className="col-form-label" htmlFor="mod-ban-expires">
{I18NextService.i18n.t("expires")}
</label>
<input
type="number"
id={`mod-ban-expires`}
id="mod-ban-expires"
className="form-control me-2"
placeholder={I18NextService.i18n.t("number_of_days")}
value={this.state.banExpireDays}
@ -991,6 +990,7 @@ export class Profile extends Component<
s.personRes.data.comments
.filter(c => c.creator.id == banRes.data.person_view.person.id)
.forEach(c => (c.creator.banned = banRes.data.banned));
s.personRes.data.person_view.person.banned = banRes.data.banned;
}
return s;
});

1
src/shared/components/person/settings.tsx
View file

@ -1177,7 +1177,6 @@ export class Settings extends Component<any, SettingsState> {
});
if (saveRes.state === "success") {
UserService.Instance.login(saveRes.data);
location.reload();
toast(I18NextService.i18n.t("saved"));
window.scrollTo(0, 0);
}

33
src/shared/components/post/metadata-card.tsx
View file

@ -1,8 +1,7 @@
import { Component, linkEvent } from "inferno";
import { Component } from "inferno";
import { Post } from "lemmy-js-client";
import * as sanitizeHtml from "sanitize-html";
import { relTags } from "../../config";
import { I18NextService } from "../../services";
import { Icon } from "../common/icon";
interface MetadataCardProps {
@ -17,10 +16,6 @@ export class MetadataCard extends Component<
MetadataCardProps,
MetadataCardState
> {
state: MetadataCardState = {
expanded: false,
};
constructor(props: any, context: any) {
super(props, context);
}
@ -29,7 +24,7 @@ export class MetadataCard extends Component<
const post = this.props.post;
return (
<>
{!this.state.expanded && post.embed_title && post.url && (
{post.embed_title && post.url && (
<div className="post-metadata-card card border-secondary mt-3 mb-2">
<div className="row">
<div className="col-12">
@ -43,7 +38,7 @@ export class MetadataCard extends Component<
</h5>
<span className="d-inline-block ms-2 mb-2 small text-muted">
<a
className="text-muted font-italic"
className="text-muted fst-italic"
href={post.url}
rel={relTags}
>
@ -61,34 +56,12 @@ export class MetadataCard extends Component<
}}
/>
)}
{post.embed_video_url && (
<button
className="mt-2 btn btn-secondary text-monospace"
onClick={linkEvent(this, this.handleIframeExpand)}
>
{I18NextService.i18n.t("expand_here")}
</button>
)}
</div>
</div>
</div>
</div>
)}
{this.state.expanded && post.embed_video_url && (
<div className="ratio ratio-16x9">
<iframe
allowFullScreen
className="post-metadata-iframe"
src={post.embed_video_url}
title={post.embed_title}
></iframe>
</div>
)}
</>
);
}
handleIframeExpand(i: MetadataCard) {
i.setState({ expanded: !i.state.expanded });
}
}

30
src/shared/components/post/post-form.tsx
View file

@ -4,6 +4,7 @@ import {
myAuth,
myAuthRequired,
} from "@utils/app";
import getUserInterfaceLangId from "@utils/app/user-interface-language";
import {
capitalizeFirstLetter,
debounce,
@ -323,11 +324,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
}
render() {
const firstLang = this.state.form.language_id;
const selectedLangs = firstLang ? Array.of(firstLang) : undefined;
const url = this.state.form.url;
const userInterfaceLangId = getUserInterfaceLangId(this.props.allLanguages);
return (
<form className="post-form" onSubmit={linkEvent(this, handlePostSubmit)}>
<NavigationPrompt
@ -358,7 +358,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
htmlFor="file-upload"
className={`${
UserService.Instance.myUserInfo && "pointer"
} d-inline-block float-right text-muted font-weight-bold`}
} d-inline-block float-right text-muted fw-bold`}
data-tippy-content={I18NextService.i18n.t("upload_image")}
>
<Icon icon="image" classes="icon-inline" />
@ -377,7 +377,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div>
<a
href={`${webArchiveUrl}/save/${encodeURIComponent(url)}`}
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
className="me-2 d-inline-block float-right text-muted small fw-bold"
rel={relTags}
>
archive.org {I18NextService.i18n.t("archive_link")}
@ -386,7 +386,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
href={`${ghostArchiveUrl}/search?term=${encodeURIComponent(
url
)}`}
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
className="me-2 d-inline-block float-right text-muted small fw-bold"
rel={relTags}
>
ghostarchive.org {I18NextService.i18n.t("archive_link")}
@ -395,7 +395,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
href={`${archiveTodayUrl}/?run=1&url=${encodeURIComponent(
url
)}`}
className="me-2 d-inline-block float-right text-muted small font-weight-bold"
className="me-2 d-inline-block float-right text-muted small fw-bold"
rel={relTags}
>
archive.today {I18NextService.i18n.t("archive_link")}
@ -419,7 +419,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
)}
{this.props.crossPosts && this.props.crossPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("cross_posts")}
</div>
<PostListings
@ -494,8 +494,8 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div>
<LanguageSelect
allLanguages={this.props.allLanguages}
selectedLanguageIds={[userInterfaceLangId]}
siteLanguages={this.props.siteLanguages}
selectedLanguageIds={selectedLangs}
multiple={false}
onChange={this.handleLanguageChange}
/>
@ -531,7 +531,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
checked={this.state.form.nsfw}
onChange={linkEvent(this, handlePostNsfwChange)}
/>
<label className="form-check-label">
<label className="form-check-label" htmlFor="post-nsfw">
{I18NextService.i18n.t("nsfw")}
</label>
</div>
@ -585,9 +585,9 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
return (
suggestedTitle && (
<div
className="mt-1 text-muted small font-weight-bold pointer"
role="button"
<button
type="button"
className="mt-1 small border-0 bg-transparent p-0 d-block text-muted fw-bold pointer"
onClick={linkEvent(
{ i: this, suggestedTitle },
copySuggestedTitle
@ -595,7 +595,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
>
{I18NextService.i18n.t("copy_suggested_title", { title: "" })}{" "}
{suggestedTitle}
</div>
</button>
)
);
}
@ -613,7 +613,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
suggestedPosts &&
suggestedPosts.length > 0 && (
<>
<div className="my-1 text-muted small font-weight-bold">
<div className="my-1 text-muted small fw-bold">
{I18NextService.i18n.t("related_posts")}
</div>
<PostListings

488
src/shared/components/post/post-listing.tsx
View file

@ -1,11 +1,10 @@
import { myAuthRequired, newVote, showScores } from "@utils/app";
import { myAuthRequired } from "@utils/app";
import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env";
import {
capitalizeFirstLetter,
futureDaysToUnixTime,
hostname,
numToSI,
} from "@utils/helpers";
import { isImage, isVideo } from "@utils/media";
import {
@ -44,13 +43,19 @@ import {
TransferCommunity,
} from "lemmy-js-client";
import { relTags } from "../../config";
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
import {
BanType,
PostFormParams,
PurgeType,
VoteContentType,
} from "../../interfaces";
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
import { I18NextService, UserService } from "../../services";
import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time";
import { PictrsImage } from "../common/pictrs-image";
import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
import { CommunityLink } from "../community/community-link";
import { PersonListing } from "../person/person-listing";
import { MetadataCard } from "./metadata-card";
@ -78,8 +83,6 @@ interface PostListingState {
showBody: boolean;
showReportDialog: boolean;
reportReason?: string;
upvoteLoading: boolean;
downvoteLoading: boolean;
reportLoading: boolean;
blockLoading: boolean;
lockLoading: boolean;
@ -142,8 +145,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
showMoreMobile: false,
showBody: false,
showReportDialog: false,
upvoteLoading: false,
downvoteLoading: false,
purgeLoading: false,
reportLoading: false,
blockLoading: false,
@ -169,8 +170,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
componentWillReceiveProps(nextProps: PostListingProps) {
if (this.props !== nextProps) {
this.setState({
upvoteLoading: false,
downvoteLoading: false,
purgeLoading: false,
reportLoading: false,
blockLoading: false,
@ -248,12 +247,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</a>
</div>
<div className="my-2 d-block d-sm-none">
<a
className="d-inline-block"
<button
type="button"
className="p-0 border-0 bg-transparent d-inline-block"
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<PictrsImage src={this.imageSrc} />
</a>
</button>
</div>
</>
);
@ -262,6 +262,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const { post } = this.postView;
const { url } = post;
// if direct video link
if (url && isVideo(url)) {
return (
<div className="embed-responsive mt-3">
@ -272,6 +273,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
);
}
// if embedded video link
if (url && post.embed_video_url) {
return (
<div className="ratio ratio-16x9">
<iframe
allowFullScreen
className="post-metadata-iframe"
src={post.embed_video_url}
title={post.embed_title}
></iframe>
</div>
);
}
return <></>;
}
@ -338,7 +353,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</a>
);
} else if (url) {
if (!this.props.hideImage && isVideo(url)) {
if ((!this.props.hideImage && isVideo(url)) || post.embed_video_url) {
return (
<a
className="text-body"
@ -382,7 +397,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const post_view = this.postView;
return (
<span className="small">
<PersonListing person={post_view.creator} />
<PersonListing person={post_view.creator} muted={true} />
{this.creatorIsMod_ && (
<span className="mx-1 badge text-bg-light">
{I18NextService.i18n.t("mod")}
@ -423,63 +438,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
);
}
voteBar() {
return (
<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"
}`}
onClick={linkEvent(this, this.handleUpvote)}
data-tippy-content={I18NextService.i18n.t("upvote")}
aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.postView.my_vote === 1}
>
{this.state.upvoteLoading ? (
<Spinner />
) : (
<Icon icon="arrow-up1" classes="upvote" />
)}
</button>
{showScores() ? (
<div
className={`unselectable pointer text-muted px-1 post-score`}
data-tippy-content={this.pointsTippy}
>
{numToSI(this.postView.counts.score)}
</div>
) : (
<div className="p-1"></div>
)}
{this.props.enableDownvotes && (
<button
className={`btn-animate btn btn-link p-0 ${
this.postView.my_vote == -1 ? "text-danger" : "text-muted"
}`}
onClick={linkEvent(this, this.handleDownvote)}
data-tippy-content={I18NextService.i18n.t("downvote")}
aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.postView.my_vote === -1}
>
{this.state.downvoteLoading ? (
<Spinner />
) : (
<Icon icon="arrow-down1" classes="downvote" />
)}
</button>
)}
</div>
);
}
get postLink() {
const post = this.postView.post;
return (
<Link
className={`d-inline ${
!post.featured_community && !post.featured_local
? "text-body"
: "text-primary"
? "link-dark"
: "link-primary"
}`}
to={`/post/${post.id}`}
title={I18NextService.i18n.t("comments")}
@ -504,8 +470,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<a
className={
!post.featured_community && !post.featured_local
? "text-body"
: "text-primary"
? "link-dark"
: "link-primary"
}
href={url}
title={url}
@ -516,45 +482,34 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.postLink
)}
</h5>
{(url && isImage(url)) ||
(post.thumbnail_url && (
<button
className="btn btn-sm text-monospace text-muted d-inline-block"
data-tippy-content={I18NextService.i18n.t("expand_here")}
onClick={linkEvent(this, this.handleImageExpandClick)}
>
<Icon
icon={
!this.state.imageExpanded ? "plus-square" : "minus-square"
}
classes="icon-inline"
/>
</button>
))}
{post.removed && (
<small className="ms-2 badge text-bg-secondary">
{I18NextService.i18n.t("removed")}
</small>
)}
{post.deleted && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t("deleted")}
>
<Icon icon="trash" classes="icon-inline text-danger" />
</small>
)}
{post.locked && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t("locked")}
>
<Icon icon="lock" classes="icon-inline text-danger" />
</small>
)}
{post.featured_community && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t(
"featured_in_community"
)}
@ -563,15 +518,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="pin" classes="icon-inline text-primary" />
</small>
)}
{post.featured_local && (
<small
className="unselectable pointer ms-2 text-muted font-italic"
className="unselectable pointer ms-2 text-muted fst-italic"
data-tippy-content={I18NextService.i18n.t("featured_in_local")}
aria-label={I18NextService.i18n.t("featured_in_local")}
>
<Icon icon="pin" classes="icon-inline text-secondary" />
</small>
)}
{post.nsfw && (
<small className="ms-2 badge text-bg-danger">
{I18NextService.i18n.t("nsfw")}
@ -588,10 +545,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const url = post.url;
return (
<p className="d-flex text-muted align-items-center gap-1 small m-0">
<p className="small m-0">
{url && !(hostname(url) === getExternalHost()) && (
<a
className="text-muted font-italic"
className="fst-italic link-dark link-opacity-75 link-opacity-100-hover"
href={url}
title={url}
rel={relTags}
@ -651,7 +608,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="fedilink" inline />
</a>
)}
{mobile && !this.props.viewOnly && this.mobileVotes}
{mobile && !this.props.viewOnly && (
<VoteButtonsCompact
voteContentType={VoteContentType.Post}
id={this.postView.post.id}
onVote={this.props.onPostVote}
enableDownvotes={this.props.enableDownvotes}
counts={this.postView.counts}
my_vote={this.postView.my_vote}
/>
)}
{UserService.Instance.myUserInfo &&
!this.props.viewOnly &&
this.postActions()}
@ -707,13 +673,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
data-tippy-content={I18NextService.i18n.t("more")}
data-bs-toggle="dropdown"
aria-expanded="false"
aria-controls="advancedButtonsDropdown"
aria-controls={`advancedButtonsDropdown${post.id}`}
aria-label={I18NextService.i18n.t("more")}
>
<Icon icon="more-vertical" inline />
</button>
<ul className="dropdown-menu" id="advancedButtonsDropdown">
<ul
className="dropdown-menu"
id={`advancedButtonsDropdown${post.id}`}
>
{!this.myPost ? (
<>
<li>{this.reportButton}</li>
@ -763,9 +732,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="message-square" classes="me-1" inline />
{post_view.counts.comments}
{this.unreadCount && (
<span className="text-muted fst-italic">
({this.unreadCount} {I18NextService.i18n.t("new")})
</span>
<>
{" "}
<span className="fst-italic">
({this.unreadCount} {I18NextService.i18n.t("new")})
</span>
</>
)}
</Link>
);
@ -778,69 +750,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
: pv.unread_comments;
}
get mobileVotes() {
// TODO: make nicer
const tippy = showScores()
? { "data-tippy-content": this.pointsTippy }
: {};
return (
<>
<div>
<button
className={`btn-animate btn py-0 px-1 ${
this.postView.my_vote === 1 ? "text-info" : "text-muted"
}`}
{...tippy}
onClick={linkEvent(this, this.handleUpvote)}
aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.postView.my_vote === 1}
>
{this.state.upvoteLoading ? (
<Spinner />
) : (
<>
<Icon icon="arrow-up1" classes="icon-inline small" />
{showScores() && (
<span className="ms-2">
{numToSI(this.postView.counts.upvotes)}
</span>
)}
</>
)}
</button>
{this.props.enableDownvotes && (
<button
className={`ms-2 btn-animate btn py-0 px-1 ${
this.postView.my_vote === -1 ? "text-danger" : "text-muted"
}`}
onClick={linkEvent(this, this.handleDownvote)}
{...tippy}
aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.postView.my_vote === -1}
>
{this.state.downvoteLoading ? (
<Spinner />
) : (
<>
<Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && (
<span
className={classNames("ms-2", {
invisible: this.postView.counts.downvotes === 0,
})}
>
{numToSI(this.postView.counts.downvotes)}
</span>
)}
</>
)}
</button>
)}
</div>
</>
);
}
get saveButton() {
const saved = this.postView.saved;
const label = saved
@ -939,7 +848,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleDeleteClick)}
aria-label={label}
>
{this.state.deleteLoading ? (
<Spinner />
@ -1065,6 +973,121 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
);
}
get modBanFromCommunityButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanFromCommunityShow)}
aria-label={I18NextService.i18n.t("ban_from_community")}
>
{I18NextService.i18n.t("ban_from_community")}
</button>
);
}
get modUnbanFromCommunityButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}
aria-label={I18NextService.i18n.t("unban")}
>
{this.state.banLoading ? <Spinner /> : I18NextService.i18n.t("unban")}
</button>
);
}
get addModToCommunityButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleAddModToCommunity)}
aria-label={
this.creatorIsMod_
? I18NextService.i18n.t("remove_as_mod")
: I18NextService.i18n.t("appoint_as_mod")
}
>
{this.state.addModLoading ? (
<Spinner />
) : this.creatorIsMod_ ? (
I18NextService.i18n.t("remove_as_mod")
) : (
I18NextService.i18n.t("appoint_as_mod")
)}
</button>
);
}
get modBanButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanShow)}
aria-label={I18NextService.i18n.t("ban_from_site")}
>
{I18NextService.i18n.t("ban_from_site")}
</button>
);
}
get modUnbanButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanSubmit)}
aria-label={I18NextService.i18n.t("unban_from_site")}
>
{this.state.banLoading ? (
<Spinner />
) : (
I18NextService.i18n.t("unban_from_site")
)}
</button>
);
}
get purgePersonButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handlePurgePersonShow)}
aria-label={I18NextService.i18n.t("purge_user")}
>
{I18NextService.i18n.t("purge_user")}
</button>
);
}
get purgePostButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handlePurgePostShow)}
aria-label={I18NextService.i18n.t("purge_post")}
>
{I18NextService.i18n.t("purge_post")}
</button>
);
}
get toggleAdminButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleAddAdmin)}
>
{this.state.addAdminLoading ? (
<Spinner />
) : this.creatorIsAdmin_ ? (
I18NextService.i18n.t("remove_as_admin")
) : (
I18NextService.i18n.t("appoint_as_admin")
)}
</button>
);
}
get modRemoveButton() {
const removed = this.postView.post.removed;
return (
@ -1099,54 +1122,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.canMod_ && (
<>
{!this.creatorIsMod_ &&
(!post_view.creator_banned_from_community ? (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(
this,
this.handleModBanFromCommunityShow
)}
aria-label={I18NextService.i18n.t("ban_from_community")}
>
{I18NextService.i18n.t("ban_from_community")}
</button>
) : (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(
this,
this.handleModBanFromCommunitySubmit
)}
aria-label={I18NextService.i18n.t("unban")}
>
{this.state.banLoading ? (
<Spinner />
) : (
I18NextService.i18n.t("unban")
)}
</button>
))}
{!post_view.creator_banned_from_community && (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleAddModToCommunity)}
aria-label={
this.creatorIsMod_
? I18NextService.i18n.t("remove_as_mod")
: I18NextService.i18n.t("appoint_as_mod")
}
>
{this.state.addModLoading ? (
<Spinner />
) : this.creatorIsMod_ ? (
I18NextService.i18n.t("remove_as_mod")
) : (
I18NextService.i18n.t("appoint_as_mod")
)}
</button>
)}
(!post_view.creator_banned_from_community
? this.modBanFromCommunityButton
: this.modUnbanFromCommunityButton)}
{!post_view.creator_banned_from_community &&
this.addModToCommunityButton}
</>
)}
{/* Community creators and admins can transfer community to another mod */}
{(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
this.canAdmin_) &&
@ -1198,62 +1181,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<>
{!this.creatorIsAdmin_ && (
<>
{!isBanned(post_view.creator) ? (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanShow)}
aria-label={I18NextService.i18n.t("ban_from_site")}
>
{I18NextService.i18n.t("ban_from_site")}
</button>
) : (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleModBanSubmit)}
aria-label={I18NextService.i18n.t("unban_from_site")}
>
{this.state.banLoading ? (
<Spinner />
) : (
I18NextService.i18n.t("unban_from_site")
)}
</button>
)}
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handlePurgePersonShow)}
aria-label={I18NextService.i18n.t("purge_user")}
>
{I18NextService.i18n.t("purge_user")}
</button>
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handlePurgePostShow)}
aria-label={I18NextService.i18n.t("purge_post")}
>
{I18NextService.i18n.t("purge_post")}
</button>
{!isBanned(post_view.creator)
? this.modBanButton
: this.modUnbanButton}
{this.purgePersonButton}
{this.purgePostButton}
</>
)}
{!isBanned(post_view.creator) && post_view.creator.local && (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleAddAdmin)}
aria-label={
this.creatorIsAdmin_
? I18NextService.i18n.t("remove_as_admin")
: I18NextService.i18n.t("appoint_as_admin")
}
>
{this.state.addAdminLoading ? (
<Spinner />
) : this.creatorIsAdmin_ ? (
I18NextService.i18n.t("remove_as_admin")
) : (
I18NextService.i18n.t("appoint_as_admin")
)}
</button>
)}
{!isBanned(post_view.creator) &&
post_view.creator.local &&
this.toggleAdminButton}
</>
)}
</div>
@ -1318,12 +1255,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
value={this.state.banReason}
onInput={linkEvent(this, this.handleModBanReasonChange)}
/>
<label className="col-form-label" htmlFor={`mod-ban-expires`}>
<label className="col-form-label" htmlFor="mod-ban-expires">
{I18NextService.i18n.t("expires")}
</label>
<input
type="number"
id={`mod-ban-expires`}
id="mod-ban-expires"
className="form-control me-2"
placeholder={I18NextService.i18n.t("number_of_days")}
value={this.state.banExpireDays}
@ -1442,7 +1379,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.postTitleLine()}
</div>
<div className="col-4">
{/* Post body prev or thumbnail */}
{/* Post thumbnail */}
{!this.state.imageExpanded && this.thumbnail()}
</div>
</div>
@ -1489,7 +1426,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{/* The larger view*/}
<div className="d-none d-sm-block">
<article className="row post-container">
{!this.props.viewOnly && this.voteBar()}
{!this.props.viewOnly && (
<VoteButtons
voteContentType={VoteContentType.Post}
id={this.postView.post.id}
onVote={this.props.onPostVote}
enableDownvotes={this.props.enableDownvotes}
counts={this.postView.counts}
my_vote={this.postView.my_vote}
/>
)}
<div className="col-sm-2 pe-0 post-media">
<div className="">{this.thumbnail()}</div>
</div>
@ -1854,24 +1800,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
setupTippy();
}
handleUpvote(i: PostListing) {
i.setState({ upvoteLoading: true });
i.props.onPostVote({
post_id: i.postView.post.id,
score: newVote(VoteType.Upvote, i.props.post_view.my_vote),
auth: myAuthRequired(),
});
}
handleDownvote(i: PostListing) {
i.setState({ downvoteLoading: true });
i.props.onPostVote({
post_id: i.postView.post.id,
score: newVote(VoteType.Downvote, i.props.post_view.my_vote),
auth: myAuthRequired(),
});
}
get pointsTippy(): string {
const points = I18NextService.i18n.t("number_of_points", {
count: Number(this.postView.counts.score),

8
src/shared/components/post/post.tsx
View file

@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
const res = this.state.postRes.data;
return (
<div className="row">
<div className="col-12 col-md-8 mb-3">
<main className="col-12 col-md-8 mb-3">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -415,8 +415,10 @@ export class Post extends Component<any, PostState> {
this.commentsTree()}
{this.state.commentViewType == CommentViewType.Flat &&
this.commentsFlat()}
</div>
<div className="d-none d-md-block col-md-4">{this.sidebar()}</div>
</main>
<aside className="d-none d-md-block col-md-4">
{this.sidebar()}
</aside>
</div>
);
}

4
src/shared/components/private_message/create-private-message.tsx
View file

@ -115,7 +115,9 @@ export class CreatePrivateMessage extends Component<
return (
<div className="row">
<div className="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{I18NextService.i18n.t("create_private_message")}</h5>
<h1 className="h4">
{I18NextService.i18n.t("create_private_message")}
</h1>
<PrivateMessageForm
onCreate={this.handlePrivateMessageCreate}
recipient={res.person_view.person}

101
src/shared/components/private_message/private-message-form.tsx
View file

@ -1,6 +1,6 @@
import { myAuthRequired } from "@utils/app";
import { capitalizeFirstLetter } from "@utils/helpers";
import { Component, InfernoNode, linkEvent } from "inferno";
import { Component, InfernoNode } from "inferno";
import { T } from "inferno-i18next-dess";
import {
CreatePrivateMessage,
@ -11,7 +11,7 @@ import {
import { relTags } from "../../config";
import { I18NextService } from "../../services";
import { setupTippy } from "../../tippy";
import { Icon, Spinner } from "../common/icon";
import { Icon } from "../common/icon";
import { MarkdownTextArea } from "../common/markdown-textarea";
import NavigationPrompt from "../common/navigation-prompt";
import { PersonListing } from "../person/person-listing";
@ -19,6 +19,7 @@ import { PersonListing } from "../person/person-listing";
interface PrivateMessageFormProps {
recipient: Person;
privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
replyType?: boolean;
onCancel?(): any;
onCreate?(form: CreatePrivateMessage): void;
onEdit?(form: EditPrivateMessage): void;
@ -28,7 +29,6 @@ interface PrivateMessageFormState {
content?: string;
loading: boolean;
previewMode: boolean;
showDisclaimer: boolean;
submitted: boolean;
}
@ -39,7 +39,6 @@ export class PrivateMessageForm extends Component<
state: PrivateMessageFormState = {
loading: false,
previewMode: false,
showDisclaimer: false,
content: this.props.privateMessageView
? this.props.privateMessageView.private_message.content
: undefined,
@ -71,98 +70,60 @@ export class PrivateMessageForm extends Component<
render() {
return (
<form
className="private-message-form"
onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}
>
<form className="private-message-form">
<NavigationPrompt
when={
!this.state.loading && !!this.state.content && !this.state.submitted
}
/>
{!this.props.privateMessageView && (
<div className="mb-3 row">
<div className="mb-3 row align-items-baseline">
<label className="col-sm-2 col-form-label">
{capitalizeFirstLetter(I18NextService.i18n.t("to"))}
</label>
<div className="col-sm-10 form-control-plaintext">
<div className="col-sm-10">
<PersonListing person={this.props.recipient} />
</div>
</div>
)}
<div className="alert alert-warning small">
<Icon icon="alert-triangle" classes="icon-inline me-1" />
<T parent="span" i18nKey="private_message_disclaimer">
#
<a
className="alert-link"
rel={relTags}
href="https://element.io/get-started"
>
#
</a>
</T>
</div>
<div className="mb-3 row">
<label className="col-sm-2 col-form-label">
{I18NextService.i18n.t("message")}
<button
className="btn btn-link text-warning d-inline-block"
onClick={linkEvent(this, this.handleShowDisclaimer)}
data-tippy-content={I18NextService.i18n.t(
"private_message_disclaimer"
)}
aria-label={I18NextService.i18n.t("private_message_disclaimer")}
>
<Icon icon="alert-triangle" classes="icon-inline" />
</button>
</label>
<div className="col-sm-10">
<MarkdownTextArea
onSubmit={() => {
this.handlePrivateMessageSubmit(this, event);
}}
initialContent={this.state.content}
onContentChange={this.handleContentChange}
allLanguages={[]}
siteLanguages={[]}
hideNavigationWarnings
onReplyCancel={() => this.handleCancel(this)}
replyType={this.props.replyType}
buttonTitle={
this.props.privateMessageView
? capitalizeFirstLetter(I18NextService.i18n.t("save"))
: capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
}
/>
</div>
</div>
{this.state.showDisclaimer && (
<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">
#
<a
className="alert-link"
rel={relTags}
href="https://element.io/get-started"
>
#
</a>
</T>
</div>
</div>
</div>
)}
<div className="mb-3 row">
<div className="offset-sm-2 col-sm-10">
<button
type="submit"
className="btn btn-secondary me-2"
disabled={this.state.loading}
>
{this.state.loading ? (
<Spinner />
) : this.props.privateMessageView ? (
capitalizeFirstLetter(I18NextService.i18n.t("save"))
) : (
capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
)}
</button>
{this.props.privateMessageView && (
<button
type="button"
className="btn btn-secondary"
onClick={linkEvent(this, this.handleCancel)}
>
{I18NextService.i18n.t("cancel")}
</button>
)}
<ul className="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
<li className="list-inline-item"></li>
</ul>
</div>
</div>
</form>
);
}
@ -200,8 +161,4 @@ export class PrivateMessageForm extends Component<
event.preventDefault();
i.setState({ previewMode: !i.state.previewMode });
}
handleShowDisclaimer(i: PrivateMessageForm) {
i.setState({ showDisclaimer: !i.state.showDisclaimer });
}
}

35
src/shared/components/private_message/private-message.tsx
View file

@ -109,17 +109,17 @@ export class PrivateMessage extends Component<
</span>
</li>
<li className="list-inline-item">
<div
role="button"
className="pointer text-monospace"
<button
type="button"
className="pointer text-monospace p-0 bg-transparent border-0 d-block"
onClick={linkEvent(this, this.handleMessageCollapse)}
>
{this.state.collapsed ? (
<Icon icon="plus-square" classes="icon-inline" />
<Icon icon="plus-square" />
) : (
<Icon icon="minus-square" classes="icon-inline" />
<Icon icon="minus-square" />
)}
</div>
</button>
</li>
</ul>
{this.state.showEdit && (
@ -140,11 +140,12 @@ export class PrivateMessage extends Component<
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
/>
)}
<ul className="list-inline mb-0 text-muted font-weight-bold">
<ul className="list-inline mb-0 text-muted fw-bold">
{!this.mine && (
<>
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)}
data-tippy-content={
@ -174,6 +175,7 @@ export class PrivateMessage extends Component<
<li className="list-inline-item">{this.reportButton}</li>
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={I18NextService.i18n.t("reply")}
@ -188,6 +190,7 @@ export class PrivateMessage extends Component<
<>
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={I18NextService.i18n.t("edit")}
@ -198,6 +201,7 @@ export class PrivateMessage extends Component<
</li>
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={
@ -228,6 +232,7 @@ export class PrivateMessage extends Component<
)}
<li className="list-inline-item">
<button
type="button"
className="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={I18NextService.i18n.t("view_source")}
@ -276,10 +281,17 @@ export class PrivateMessage extends Component<
</form>
)}
{this.state.showReply && (
<PrivateMessageForm
recipient={otherPerson}
onCreate={this.props.onCreate}
/>
<div className="row">
<div className="col-sm-6">
<PrivateMessageForm
privateMessageView={message_view}
replyType={true}
recipient={otherPerson}
onCreate={this.props.onCreate}
onCancel={this.handleReplyCancel}
/>
</div>
</div>
)}
{/* A collapsed clearfix */}
{this.state.collapsed && <div className="row col-12"></div>}
@ -290,6 +302,7 @@ export class PrivateMessage extends Component<
get reportButton() {
return (
<button
type="button"
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowReportDialog)}
data-tippy-content={I18NextService.i18n.t("show_report_dialog")}

8
src/shared/components/search.tsx
View file

@ -332,7 +332,9 @@ export class Search extends Component<any, SearchState> {
}
async componentDidMount() {
if (!this.state.isIsomorphic) {
if (
!(this.state.isIsomorphic || this.props.history.location.state?.searched)
) {
const promises = [this.fetchCommunities()];
if (this.state.searchText) {
promises.push(this.search());
@ -1095,7 +1097,9 @@ export class Search extends Component<any, SearchState> {
sort: sort ?? urlSort,
};
this.props.history.push(`/search${getQueryString(queryParams)}`);
this.props.history.push(`/search${getQueryString(queryParams)}`, {
searched: true,
});
await this.search();
}

5
src/shared/interfaces.ts
View file

@ -77,6 +77,11 @@ export enum VoteType {
Downvote,
}
export enum VoteContentType {
Post,
Comment,
}
export interface CommentNodeI {
comment_view: CommentView;
children: Array<CommentNodeI>;

5
src/shared/routes.ts
View file

@ -7,6 +7,7 @@ import { Home } from "./components/home/home";
import { Instances } from "./components/home/instances";
import { Legal } from "./components/home/legal";
import { Login } from "./components/home/login";
import { LoginReset } from "./components/home/login-reset";
import { Setup } from "./components/home/setup";
import { Signup } from "./components/home/signup";
import { Modlog } from "./components/modlog";
@ -38,6 +39,10 @@ export const routes: IRoutePropsWithFetch<Record<string, any>>[] = [
path: `/login`,
component: Login,
},
{
path: `/login_reset`,
component: LoginReset,
},
{
path: `/signup`,
component: Signup,

8
src/shared/services/FirstLoadService.ts
View file

@ -17,6 +17,10 @@ export class FirstLoadService {
return isFirst;
}
falsify() {
this.#isFirstLoad = false;
}
static get #Instance() {
return this.#instance ?? (this.#instance = new this());
}
@ -24,4 +28,8 @@ export class FirstLoadService {
static get isFirstLoad() {
return !isBrowser() || this.#Instance.isFirstLoad;
}
static falsify() {
this.#Instance.falsify();
}
}

60
src/shared/services/HomeCacheService.ts Normal file
View file

@ -0,0 +1,60 @@
import { GetPostsResponse } from "lemmy-js-client";
import { RequestState } from "./HttpService.js";
/**
* Service to cache home post listings and restore home state when user uses the browser back buttons.
*/
export class HomeCacheService {
static #_instance: HomeCacheService;
historyIdx = 0;
scrollY = 0;
posts: RequestState<GetPostsResponse> = { state: "empty" };
get active() {
return (
this.historyIdx === window.history.state.idx + 1 &&
this.posts.state === "success"
);
}
deactivate() {
this.historyIdx = 0;
}
activate() {
this.scrollY = window.scrollY;
this.historyIdx = window.history.state.idx;
}
static get #Instance() {
return this.#_instance ?? (this.#_instance = new this());
}
public static get scrollY() {
return this.#Instance.scrollY;
}
public static get historyIdx() {
return this.#Instance.historyIdx;
}
public static set postsRes(posts: RequestState<GetPostsResponse>) {
this.#Instance.posts = posts;
}
public static get postsRes() {
return this.#Instance.posts;
}
public static get active() {
return this.#Instance.active;
}
public static deactivate() {
this.#Instance.deactivate();
}
public static activate() {
this.#Instance.activate();
}
}

1
src/shared/services/index.ts
View file

@ -1,5 +1,6 @@
export { FirstLoadService } from "./FirstLoadService";
export { HistoryService } from "./HistoryService";
export { HomeCacheService } from "./HomeCacheService";
export { HttpService } from "./HttpService";
export { I18NextService } from "./I18NextService";
export { UserService } from "./UserService";

4
src/shared/utils/app/index.ts
View file

@ -46,12 +46,14 @@ import searchCommentTree from "./search-comment-tree";
import selectableLanguages from "./selectable-languages";
import setIsoData from "./set-iso-data";
import setTheme from "./set-theme";
import setupDateFns from "./setup-date-fns";
import showAvatars from "./show-avatars";
import showLocal from "./show-local";
import showScores from "./show-scores";
import siteBannerCss from "./site-banner-css";
import updateCommunityBlock from "./update-community-block";
import updatePersonBlock from "./update-person-block";
import getUserInterfaceLangId from "./user-interface-language";
export {
buildCommentsTree,
@ -86,6 +88,7 @@ export {
getIdFromProps,
getRecipientIdFromProps,
getUpdatedSearchId,
getUserInterfaceLangId,
initializeSite,
insertCommentIntoTree,
isAuthPath,
@ -102,6 +105,7 @@ export {
selectableLanguages,
setIsoData,
setTheme,
setupDateFns,
showAvatars,
showLocal,
showScores,

19
src/shared/utils/app/setup-date-fns.ts Normal file
View file

@ -0,0 +1,19 @@
import setDefaultOptions from "date-fns/setDefaultOptions";
import { I18NextService } from "../../services";
export default async function () {
let lang = I18NextService.i18n.language;
if (lang === "en") {
lang = "en-US";
}
const locale = (
await import(
/* webpackExclude: /\.js\.flow$/ */
`date-fns/locale/${lang}`
)
).default;
setDefaultOptions({
locale,
});
}

18
src/shared/utils/app/user-interface-language.ts Normal file
View file

@ -0,0 +1,18 @@
import { Language } from "lemmy-js-client";
import { I18NextService } from "../../services/I18NextService";
export default function getUserInterfaceLangId(
allLanguages: Language[]
): number {
// Get the string of the browser- or user-defined language, like en-US
const i18nLang = I18NextService.i18n.language;
// Find the Language object with a code that matches the initial characters of
// this string
const userLang = allLanguages.find(lang => {
return i18nLang.indexOf(lang.code) === 0;
});
// Return the ID of that language object, or "0" for Undetermined
return userLang?.id || 0;
}

12
src/shared/utils/helpers/format-past-date.ts Normal file
View file

@ -0,0 +1,12 @@
import formatDistanceStrict from "date-fns/formatDistanceStrict";
import parseISO from "date-fns/parseISO";
export default function (dateString?: string) {
return formatDistanceStrict(
parseISO(dateString ?? Date.now().toString()),
new Date(),
{
addSuffix: true,
}
);
}

2
src/shared/utils/helpers/index.ts
View file

@ -1,6 +1,7 @@
import capitalizeFirstLetter from "./capitalize-first-letter";
import debounce from "./debounce";
import editListImmutable from "./edit-list-immutable";
import formatPastDate from "./format-past-date";
import futureDaysToUnixTime from "./future-days-to-unix-time";
import getIdFromString from "./get-id-from-string";
import getPageFromString from "./get-page-from-string";
@ -26,6 +27,7 @@ export {
capitalizeFirstLetter,
debounce,
editListImmutable,
formatPastDate,
futureDaysToUnixTime,
getIdFromString,
getPageFromString,

34
src/shared/utils/helpers/is-cake-day.ts
View file

@ -1,33 +1,13 @@
import moment from "moment";
moment.updateLocale("en", {
relativeTime: {
future: "in %s",
past: "%s ago",
s: "<1m",
ss: "%ds",
m: "1m",
mm: "%dm",
h: "1h",
hh: "%dh",
d: "1d",
dd: "%dd",
w: "1w",
ww: "%dw",
M: "1M",
MM: "%dM",
y: "1Y",
yy: "%dY",
},
});
import getDayOfYear from "date-fns/getDayOfYear";
import getYear from "date-fns/getYear";
import parseISO from "date-fns/parseISO";
export default function isCakeDay(published: string): boolean {
const createDate = moment.utc(published).local();
const currentDate = moment(new Date());
const createDate = parseISO(published);
const currentDate = new Date();
return (
createDate.date() === currentDate.date() &&
createDate.month() === currentDate.month() &&
createDate.year() !== currentDate.year()
getDayOfYear(createDate) === getDayOfYear(currentDate) &&
getYear(createDate) !== getYear(currentDate)
);
}

11
webpack.config.js
View file

@ -4,8 +4,10 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const nodeExternals = require("webpack-node-externals");
const CopyPlugin = require("copy-webpack-plugin");
const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
const merge = require("lodash/merge");
const merge = require("lodash.merge");
const { ServiceWorkerPlugin } = require("service-worker-webpack");
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const banner = `
hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
Source code: https://github.com/LemmyNet/lemmy-ui
@ -153,11 +155,8 @@ const createClientConfig = (_env, mode) => {
],
});
if (mode === "development") {
// config.cache = {
// type: "filesystem",
// name: "client",
// };
if (mode === "none") {
config.plugins.push(new BundleAnalyzerPlugin());
}
return config;

119
yarn.lock
View file

@ -1202,7 +1202,7 @@
dependencies:
regenerator-runtime "^0.13.11"
"@babel/runtime@^7.20.7":
"@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
@ -1243,7 +1243,7 @@
"@babel/helper-validator-identifier" "^7.19.1"
to-fast-properties "^2.0.0"
"@discoveryjs/json-ext@^0.5.0":
"@discoveryjs/json-ext@0.5.7", "@discoveryjs/json-ext@^0.5.0":
version "0.5.7"
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
@ -1412,6 +1412,11 @@
picocolors "^1.0.0"
tslib "^2.5.0"
"@polka/url@^1.0.0-next.20":
version "1.0.0-next.21"
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
"@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
version "2.11.8"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@ -1590,6 +1595,18 @@
resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
"@types/lodash.isequal@^4.5.6":
version "4.5.6"
resolved "https://registry.yarnpkg.com/@types/lodash.isequal/-/lodash.isequal-4.5.6.tgz#ff42a1b8e20caa59a97e446a77dc57db923bc02b"
integrity sha512-Ww4UGSe3DmtvLLJm2F16hDwEQSv7U0Rr8SujLUA2wHI2D2dm8kPu6Et+/y303LfjTIwSBKXB/YTUcAKpem/XEg==
dependencies:
"@types/lodash" "*"
"@types/lodash@*":
version "4.14.195"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
"@types/markdown-it-container@^2.0.5":
version "2.0.5"
resolved "https://registry.yarnpkg.com/@types/markdown-it-container/-/markdown-it-container-2.0.5.tgz#abd793b64c5adc7b2d1e8963eddb388198248152"
@ -1630,6 +1647,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.5.tgz#26d295f3570323b2837d322180dfbf1ba156fefb"
integrity sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==
"@types/path-browserify@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/path-browserify/-/path-browserify-1.0.0.tgz#294ec6e88b6b0d340a3897b7120e5b393f16690e"
integrity sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==
"@types/qs@*":
version "6.9.7"
resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@ -1977,6 +1999,16 @@ acorn-jsx@^5.3.2:
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
acorn-walk@^8.0.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
acorn@^8.0.4:
version "8.9.0"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.9.0.tgz#78a16e3b2bcc198c10822786fa6679e245db5b59"
integrity sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==
acorn@^8.7.1, acorn@^8.8.0, acorn@^8.8.2:
version "8.8.2"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
@ -2714,7 +2746,7 @@ chalk@^2.0.0, chalk@^2.0.1:
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"
chalk@^4.0.0, chalk@^4.0.2:
chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0:
version "4.1.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@ -2959,6 +2991,11 @@ commander@^2.20.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
commander@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
common-tags@^1.8.0:
version "1.8.2"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@ -3200,6 +3237,13 @@ dashdash@^1.12.0:
dependencies:
assert-plus "^1.0.0"
date-fns@^2.30.0:
version "2.30.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
dependencies:
"@babel/runtime" "^7.21.0"
debug@2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -3481,6 +3525,11 @@ duplexer3@^0.1.4:
resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
integrity sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==
duplexer@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
duplexify@^3.4.2, duplexify@^3.6.0:
version "3.7.1"
resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@ -4576,6 +4625,13 @@ graphemer@^1.4.0:
resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
gzip-size@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
dependencies:
duplexer "^0.1.2"
handle-thing@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@ -5872,6 +5928,11 @@ lodash.debounce@^4.0.8:
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@ -5907,7 +5968,7 @@ lodash@^3.10.1:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
integrity sha512-9mDDwqVIma6OZX79ZlDACZl8sBm0TEnkf99zV3iMA4GzkIT/9hiqP5mY0HoT1iNLCrKc/R1HByV+yJfRWVJryQ==
lodash@^4.17.20, lodash@^4.17.21:
lodash@^4.17.20:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -6302,11 +6363,6 @@ mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
dependencies:
minimist "^1.2.6"
moment@^2.29.4:
version "2.29.4"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -6319,6 +6375,11 @@ move-concurrently@^1.0.1:
rimraf "^2.5.4"
run-queue "^1.0.3"
mrmime@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@ -6916,6 +6977,11 @@ opencollective-postinstall@^2.0.3:
resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
opener@^1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
opener@~1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
@ -8247,6 +8313,15 @@ simple-swizzle@^0.2.2:
dependencies:
is-arrayish "^0.3.1"
sirv@^1.0.7:
version "1.0.19"
resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
dependencies:
"@polka/url" "^1.0.0-next.20"
mrmime "^1.0.0"
totalist "^1.0.0"
slash@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@ -8913,6 +8988,11 @@ toidentifier@1.0.1:
resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
totalist@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
tough-cookie@~2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@ -9258,6 +9338,22 @@ webidl-conversions@^4.0.2:
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
webpack-bundle-analyzer@^4.9.0:
version "4.9.0"
resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz#fc093c4ab174fd3dcbd1c30b763f56d10141209d"
integrity sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==
dependencies:
"@discoveryjs/json-ext" "0.5.7"
acorn "^8.0.4"
acorn-walk "^8.0.0"
chalk "^4.1.0"
commander "^7.2.0"
gzip-size "^6.0.0"
lodash "^4.17.20"
opener "^1.5.2"
sirv "^1.0.7"
ws "^7.3.1"
webpack-cli@^5.1.1:
version "5.1.3"
resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.1.3.tgz#6b6186270efec62394f6fefeebed0872a779f345"
@ -9710,6 +9806,11 @@ write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
imurmurhash "^0.1.4"
signal-exit "^3.0.2"
ws@^7.3.1:
version "7.5.9"
resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
ws@^8.13.0:
version "8.13.0"
resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"