diff --git a/package.json b/package.json index 01f5100e..7eab4cbd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lemmy-ui", - "version": "0.18.0", + "version": "0.18.1-rc.1", "description": "An isomorphic UI for lemmy", "repository": "https://github.com/LemmyNet/lemmy-ui", "license": "AGPL-3.0", diff --git a/src/assets/css/main.css b/src/assets/css/main.css index b917b3ec..63c1b471 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -198,9 +198,9 @@ blockquote { .thumbnail { object-fit: cover; - min-height: 60px; - max-height: 80px; + aspect-ratio: 4/3; width: 100%; + max-height: 6rem; } .thumbnail svg { @@ -360,8 +360,9 @@ br.big { } .img-icon { - width: 2rem; - height: 2rem; + width: calc(var(--bs-body-line-height) * 1em); + height: calc(var(--bs-body-line-height) * 1em); + border-radius: 0.25em; } .tribute-container ul { diff --git a/src/assets/css/themes/_variables.scss b/src/assets/css/themes/_variables.scss index 5b07cf52..47a01ce0 100644 --- a/src/assets/css/themes/_variables.scss +++ b/src/assets/css/themes/_variables.scss @@ -1,7 +1,3 @@ $link-decoration: none; $min-contrast-ratio: 3; $font-size-base: 0.875rem; - -$container-max-widths: ( - lg: 1140px, -); diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css index 1fc30a00..a5292e8d 100644 --- a/src/assets/css/themes/darkly-red.css +++ b/src/assets/css/themes/darkly-red.css @@ -726,7 +726,11 @@ progress { .container, .container-fluid, -.container-lg { +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; @@ -736,11 +740,31 @@ progress { margin-left: auto; } +@media (min-width: 576px) { + .container-sm, .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, .container-sm, .container { + max-width: 720px; + } +} @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } +@media (min-width: 1400px) { + .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { + max-width: 1320px; + } +} :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; @@ -3867,7 +3891,11 @@ textarea.form-control-lg { } .navbar > .container, .navbar > .container-fluid, -.navbar > .container-lg { +.navbar > .container-sm, +.navbar > .container-md, +.navbar > .container-lg, +.navbar > .container-xl, +.navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css index a1dd3a0f..3b3a6f2e 100644 --- a/src/assets/css/themes/darkly.css +++ b/src/assets/css/themes/darkly.css @@ -726,7 +726,11 @@ progress { .container, .container-fluid, -.container-lg { +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; @@ -736,11 +740,31 @@ progress { margin-left: auto; } +@media (min-width: 576px) { + .container-sm, .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, .container-sm, .container { + max-width: 720px; + } +} @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } +@media (min-width: 1400px) { + .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { + max-width: 1320px; + } +} :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; @@ -3867,7 +3891,11 @@ textarea.form-control-lg { } .navbar > .container, .navbar > .container-fluid, -.navbar > .container-lg { +.navbar > .container-sm, +.navbar > .container-md, +.navbar > .container-lg, +.navbar > .container-xl, +.navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css index d620d189..fbe7cdfb 100644 --- a/src/assets/css/themes/litely-red.css +++ b/src/assets/css/themes/litely-red.css @@ -725,7 +725,11 @@ progress { .container, .container-fluid, -.container-lg { +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; @@ -735,11 +739,31 @@ progress { margin-left: auto; } +@media (min-width: 576px) { + .container-sm, .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, .container-sm, .container { + max-width: 720px; + } +} @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } +@media (min-width: 1400px) { + .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { + max-width: 1320px; + } +} :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; @@ -3866,7 +3890,11 @@ textarea.form-control-lg { } .navbar > .container, .navbar > .container-fluid, -.navbar > .container-lg { +.navbar > .container-sm, +.navbar > .container-md, +.navbar > .container-lg, +.navbar > .container-xl, +.navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; diff --git a/src/assets/css/themes/litely.css b/src/assets/css/themes/litely.css index 388b2674..801319a3 100644 --- a/src/assets/css/themes/litely.css +++ b/src/assets/css/themes/litely.css @@ -725,7 +725,11 @@ progress { .container, .container-fluid, -.container-lg { +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; @@ -735,11 +739,31 @@ progress { margin-left: auto; } +@media (min-width: 576px) { + .container-sm, .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, .container-sm, .container { + max-width: 720px; + } +} @media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1140px; } } +@media (min-width: 1400px) { + .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { + max-width: 1320px; + } +} :root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; @@ -3866,7 +3890,11 @@ textarea.form-control-lg { } .navbar > .container, .navbar > .container-fluid, -.navbar > .container-lg { +.navbar > .container-sm, +.navbar > .container-md, +.navbar > .container-lg, +.navbar > .container-xl, +.navbar > .container-xxl { display: flex; flex-wrap: inherit; align-items: center; diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index 11cfb6c6..5c017189 100644 --- a/src/shared/components/app/navbar.tsx +++ b/src/shared/components/app/navbar.tsx @@ -79,256 +79,246 @@ export class Navbar extends Component { const siteView = this.props.siteRes?.site_view; const person = UserService.Instance.myUserInfo?.local_user_view.person; return ( - + ); } diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx index 31fb1229..9c14aefc 100644 --- a/src/shared/components/common/pictrs-image.tsx +++ b/src/shared/components/common/pictrs-image.tsx @@ -39,7 +39,7 @@ export class PictrsImage extends Component { "img-expanded slight-radius": !this.props.thumbnail && !this.props.icon, "img-blur": this.props.thumbnail && this.props.nsfw, - "rounded-circle img-cover img-icon me-2": this.props.icon, + "img-cover img-icon me-1": this.props.icon, "ms-2 mb-0 rounded-circle img-cover avatar-overlay": this.props.iconOverlay, "avatar-pushup": this.props.pushup, diff --git a/src/shared/components/common/vote-buttons.tsx b/src/shared/components/common/vote-buttons.tsx index 005db8c0..372a3293 100644 --- a/src/shared/components/common/vote-buttons.tsx +++ b/src/shared/components/common/vote-buttons.tsx @@ -104,7 +104,7 @@ export class VoteButtonsCompact extends Component< render() { return ( -
+ <>
+ ); } } @@ -174,7 +174,7 @@ export class VoteButtons extends Component { render() { return ( -
+
diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 7fa942af..5ef1a87d 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -387,7 +387,7 @@ export class Home extends Component { /> {site_setup && (
-
+
{tagline && (
{
{this.mobileView}
{this.posts}
-
diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx index a2d960dc..516cd43f 100644 --- a/src/shared/components/home/signup.tsx +++ b/src/shared/components/home/signup.tsx @@ -140,7 +140,10 @@ export class Signup extends Component { registerForm() { const siteView = this.state.siteRes.site_view; return ( -
+
{this.titleName(siteView)}
{this.isLemmyMl && ( diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx index 382f5650..45857a0d 100644 --- a/src/shared/components/home/site-form.tsx +++ b/src/shared/components/home/site-form.tsx @@ -4,6 +4,7 @@ import { Component, InfernoKeyboardEvent, InfernoMouseEvent, + InfernoNode, linkEvent, } from "inferno"; import { @@ -13,6 +14,7 @@ import { Instance, ListingType, } from "lemmy-js-client"; +import deepEqual from "lodash.isequal"; import { I18NextService } from "../../services"; import { Icon, Spinner } from "../common/icon"; import { ImageUploadForm } from "../common/image-upload-form"; @@ -55,6 +57,7 @@ export class SiteForm extends Component { initSiteForm(): EditSite { const site = this.props.siteRes.site_view.site; const ls = this.props.siteRes.site_view.local_site; + return { name: site.name, sidebar: site.sidebar, @@ -619,6 +622,19 @@ export class SiteForm extends Component { ); } + componentDidUpdate( + prevProps: Readonly<{ children?: InfernoNode } & SiteFormProps> + ) { + if ( + !( + deepEqual(prevProps.allowedInstances, this.props.allowedInstances) || + deepEqual(prevProps.blockedInstances, this.props.blockedInstances) + ) + ) { + this.setState({ siteForm: this.initSiteForm() }); + } + } + federatedInstanceSelect(key: InstanceKey) { const id = `create_site_${key}`; const value = this.state.instance_select[key]; diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index 714b6bed..afd88184 100644 --- a/src/shared/components/person/profile.tsx +++ b/src/shared/components/person/profile.tsx @@ -205,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) { @@ -691,6 +692,8 @@ export class Profile extends Component< > {I18NextService.i18n.t("cancel")} +
+
- ))} + + {/** + * If there is a URL, an embed title, and we were not told to show the + * body by the parent component, show the MetadataCard/body toggle. + */} + {!this.props.showBody && + post.url && + post.embed_title && + this.showPreviewButton()} + {post.removed && ( {I18NextService.i18n.t("removed")} )} + {post.deleted && ( { )} + {post.locked && ( { )} + {post.featured_community && ( { )} + {post.featured_local && ( { )} + {post.nsfw && ( {I18NextService.i18n.t("nsfw")} @@ -634,27 +636,6 @@ export class PostListing extends Component { ); } - showPreviewButton() { - const post_view = this.postView; - const body = post_view.post.body; - - return ( - - ); - } - postActions() { // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button. // Possible enhancement: Make each button a component. @@ -666,14 +647,7 @@ export class PostListing extends Component { {this.saveButton} {this.crossPostButton} - {/** - * If there is a URL, or if the post has a body and we were told not to - * show the body, show the MetadataCard/body toggle. - */} - {(post.url || (post.body && !this.props.showBody)) && - this.showPreviewButton()} - - {this.showBody && post_view.post.body && this.viewSourceButton} + {this.props.showBody && post_view.post.body && this.viewSourceButton}
); } @@ -1421,9 +1398,6 @@ export class PostListing extends Component { {/* If it has a thumbnail, do a right aligned thumbnail */} {this.mobileThumbnail()} - {/* Show a preview of the post body */} - {this.showBodyPreview()} - {this.commentsLine(true)} {this.userActionsLine()} {this.duplicatesLine()} @@ -1436,24 +1410,25 @@ export class PostListing extends Component {
{!this.props.viewOnly && ( - +
+ +
)} -
-
{this.thumbnail()}
-
-
+
-
+
+
{this.thumbnail()}
+
+
{this.postTitleLine()} {this.createdLine()} - {this.showBodyPreview()} {this.commentsLine()} {this.duplicatesLine()} {this.userActionsLine()} diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index 1aaf50d5..3c0015ec 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -348,7 +348,7 @@ export class Post extends Component { const res = this.state.postRes.data; return (
-
+
{ {this.state.commentViewType == CommentViewType.Flat && this.commentsFlat()}
-
diff --git a/src/shared/config.ts b/src/shared/config.ts index c56c64b0..97b28d25 100644 --- a/src/shared/config.ts +++ b/src/shared/config.ts @@ -21,7 +21,7 @@ export const markdownFieldCharacterLimit = 50000; export const maxUploadImages = 20; export const concurrentImageUpload = 4; export const updateUnreadCountsInterval = 30000; -export const fetchLimit = 40; +export const fetchLimit = 20; export const relTags = "noopener nofollow"; export const emDash = "\u2014"; diff --git a/webpack.config.js b/webpack.config.js index dcb88c52..4d95a80c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,8 +6,7 @@ const CopyPlugin = require("copy-webpack-plugin"); const RunNodeWebpackPlugin = require("run-node-webpack-plugin"); 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 @@ -156,6 +155,8 @@ const createClientConfig = (_env, mode) => { }); if (mode === "none") { + const BundleAnalyzerPlugin = + require("webpack-bundle-analyzer").BundleAnalyzerPlugin; config.plugins.push(new BundleAnalyzerPlugin()); }