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

Merge branch 'main' into feat/pureblack-theme

Browse source
This commit is contained in:
Alec Armbruster 2023-06-27 11:31:07 -04:00 committed by GitHub
commit 93e015393c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 564 additions and 455 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "lemmy-ui", "name": "lemmy-ui",
"version": "0.18.0", "version": "0.18.1-rc.1",
"description": "An isomorphic UI for lemmy", "description": "An isomorphic UI for lemmy",
"repository": "https://github.com/LemmyNet/lemmy-ui", "repository": "https://github.com/LemmyNet/lemmy-ui",
"license": "AGPL-3.0", "license": "AGPL-3.0",

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

@ -198,9 +198,9 @@ blockquote {
.thumbnail { .thumbnail {
object-fit: cover; object-fit: cover;
min-height: 60px; aspect-ratio: 4/3;
max-height: 80px;
width: 100%; width: 100%;
max-height: 6rem;
} }
.thumbnail svg { .thumbnail svg {
@ -360,8 +360,9 @@ br.big {
} }
.img-icon { .img-icon {
width: 2rem; width: calc(var(--bs-body-line-height) * 1em);
height: 2rem; height: calc(var(--bs-body-line-height) * 1em);
border-radius: 0.25em;
} }
.tribute-container ul { .tribute-container ul {

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

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

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

@ -726,7 +726,11 @@ progress {
.container, .container,
.container-fluid, .container-fluid,
.container-lg { .container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
width: 100%; width: 100%;
@ -736,11 +740,31 @@ progress {
margin-left: auto; 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) { @media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container { .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; max-width: 1140px;
} }
} }
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
:root { :root {
--bs-breakpoint-xs: 0; --bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px; --bs-breakpoint-sm: 576px;
@ -3867,7 +3891,11 @@ textarea.form-control-lg {
} }
.navbar > .container, .navbar > .container,
.navbar > .container-fluid, .navbar > .container-fluid,
.navbar > .container-lg { .navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
display: flex; display: flex;
flex-wrap: inherit; flex-wrap: inherit;
align-items: center; align-items: center;

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

@ -726,7 +726,11 @@ progress {
.container, .container,
.container-fluid, .container-fluid,
.container-lg { .container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
width: 100%; width: 100%;
@ -736,11 +740,31 @@ progress {
margin-left: auto; 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) { @media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container { .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; max-width: 1140px;
} }
} }
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
:root { :root {
--bs-breakpoint-xs: 0; --bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px; --bs-breakpoint-sm: 576px;
@ -3867,7 +3891,11 @@ textarea.form-control-lg {
} }
.navbar > .container, .navbar > .container,
.navbar > .container-fluid, .navbar > .container-fluid,
.navbar > .container-lg { .navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
display: flex; display: flex;
flex-wrap: inherit; flex-wrap: inherit;
align-items: center; align-items: center;

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

@ -725,7 +725,11 @@ progress {
.container, .container,
.container-fluid, .container-fluid,
.container-lg { .container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
width: 100%; width: 100%;
@ -735,11 +739,31 @@ progress {
margin-left: auto; 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) { @media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container { .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; max-width: 1140px;
} }
} }
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
:root { :root {
--bs-breakpoint-xs: 0; --bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px; --bs-breakpoint-sm: 576px;
@ -3866,7 +3890,11 @@ textarea.form-control-lg {
} }
.navbar > .container, .navbar > .container,
.navbar > .container-fluid, .navbar > .container-fluid,
.navbar > .container-lg { .navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
display: flex; display: flex;
flex-wrap: inherit; flex-wrap: inherit;
align-items: center; align-items: center;

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

@ -725,7 +725,11 @@ progress {
.container, .container,
.container-fluid, .container-fluid,
.container-lg { .container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
--bs-gutter-x: 1.5rem; --bs-gutter-x: 1.5rem;
--bs-gutter-y: 0; --bs-gutter-y: 0;
width: 100%; width: 100%;
@ -735,11 +739,31 @@ progress {
margin-left: auto; 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) { @media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container { .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; max-width: 1140px;
} }
} }
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
:root { :root {
--bs-breakpoint-xs: 0; --bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px; --bs-breakpoint-sm: 576px;
@ -3866,7 +3890,11 @@ textarea.form-control-lg {
} }
.navbar > .container, .navbar > .container,
.navbar > .container-fluid, .navbar > .container-fluid,
.navbar > .container-lg { .navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
display: flex; display: flex;
flex-wrap: inherit; flex-wrap: inherit;
align-items: center; align-items: center;

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

@ -79,256 +79,246 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
const siteView = this.props.siteRes?.site_view; const siteView = this.props.siteRes?.site_view;
const person = UserService.Instance.myUserInfo?.local_user_view.person; const person = UserService.Instance.myUserInfo?.local_user_view.person;
return ( return (
<nav <div className="shadow-sm">
className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg" <nav
id="navbar" className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
> id="navbar"
<NavLink
id="navTitle"
to="/"
title={siteView?.site.description ?? siteView?.site.name}
className="d-flex align-items-center navbar-brand me-md-3"
onMouseUp={linkEvent(this, handleCollapseClick)}
> >
{siteView?.site.icon && showAvatars() && ( <NavLink
<PictrsImage src={siteView.site.icon} icon /> id="navTitle"
)} to="/"
{siteView?.site.name} title={siteView?.site.description ?? siteView?.site.name}
</NavLink> className="d-flex align-items-center navbar-brand me-md-3"
{person && ( onMouseUp={linkEvent(this, handleCollapseClick)}
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none"> >
<li id="navMessages" className="nav-item nav-item-icon"> {siteView?.site.icon && showAvatars() && (
<NavLink <PictrsImage src={siteView.site.icon} icon />
to="/inbox" )}
className="p-1 nav-link border-0 nav-messages" {siteView?.site.name}
title={I18NextService.i18n.t("unread_messages", { </NavLink>
count: Number(this.state.unreadApplicationCountRes.state), {person && (
formattedCount: numToSI(this.unreadInboxCount), <ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
})} <li id="navMessages" className="nav-item nav-item-icon">
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="bell" />
{this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadInboxCount)}
</span>
)}
</NavLink>
</li>
{this.moderatesSomething && (
<li className="nav-item nav-item-icon">
<NavLink <NavLink
to="/reports" to="/inbox"
className="p-1 nav-link border-0" className="p-1 nav-link border-0 nav-messages"
title={I18NextService.i18n.t("unread_reports", { title={I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadReportCount), count: Number(this.state.unreadApplicationCountRes.state),
formattedCount: numToSI(this.unreadReportCount), formattedCount: numToSI(this.unreadInboxCount),
})} })}
onMouseUp={linkEvent(this, handleCollapseClick)} onMouseUp={linkEvent(this, handleCollapseClick)}
> >
<Icon icon="shield" /> <Icon icon="bell" />
{this.unreadReportCount > 0 && ( {this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light"> <span className="mx-1 badge text-bg-light">
{numToSI(this.unreadReportCount)} {numToSI(this.unreadInboxCount)}
</span> </span>
)} )}
</NavLink> </NavLink>
</li> </li>
)} {this.moderatesSomething && (
{amAdmin() && ( <li className="nav-item nav-item-icon">
<li className="nav-item nav-item-icon">
<NavLink
to="/registration_applications"
className="p-1 nav-link border-0"
title={I18NextService.i18n.t(
"unread_registration_applications",
{
count: Number(this.unreadApplicationCount),
formattedCount: numToSI(this.unreadApplicationCount),
}
)}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="clipboard" />
{this.unreadApplicationCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadApplicationCount)}
</span>
)}
</NavLink>
</li>
)}
</ul>
)}
<button
className="navbar-toggler border-0 p-1"
type="button"
aria-label="menu"
data-tippy-content={I18NextService.i18n.t("expand_here")}
data-bs-toggle="collapse"
data-bs-target="#navbarDropdown"
aria-controls="navbarDropdown"
aria-expanded="false"
ref={this.collapseButtonRef}
>
<Icon icon="menu" />
</button>
<div
className="collapse navbar-collapse my-2"
id="navbarDropdown"
ref={this.mobileMenuRef}
>
<ul id="navbarLinks" className="me-auto navbar-nav">
<li className="nav-item">
<NavLink
to="/communities"
className="nav-link"
title={I18NextService.i18n.t("communities")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("communities")}
</NavLink>
</li>
<li className="nav-item">
{/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
<NavLink
to={{
pathname: "/create_post",
search: "",
hash: "",
key: "",
state: { prevPath: this.currentLocation },
}}
className="nav-link"
title={I18NextService.i18n.t("create_post")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("create_post")}
</NavLink>
</li>
{this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
<li className="nav-item">
<NavLink
to="/create_community"
className="nav-link"
title={I18NextService.i18n.t("create_community")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("create_community")}
</NavLink>
</li>
)}
<li className="nav-item">
<a
className="nav-link d-inline-flex align-items-center d-md-inline-block"
title={I18NextService.i18n.t("support_lemmy")}
href={donateLemmyUrl}
>
<Icon icon="heart" classes="small" />
<span className="d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("support_lemmy")}
</span>
</a>
</li>
</ul>
<ul id="navbarIcons" className="navbar-nav">
<li id="navSearch" className="nav-item">
<NavLink
to="/search"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
title={I18NextService.i18n.t("search")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="search" />
<span className="d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("search")}
</span>
</NavLink>
</li>
{amAdmin() && (
<li id="navAdmin" className="nav-item">
<NavLink
to="/admin"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
title={I18NextService.i18n.t("admin_settings")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="settings" />
<span className="d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("admin_settings")}
</span>
</NavLink>
</li>
)}
{person ? (
<>
<li id="navMessages" className="nav-item">
<NavLink <NavLink
className="nav-link d-inline-flex align-items-center d-md-inline-block" to="/reports"
to="/inbox" className="p-1 nav-link border-0"
title={I18NextService.i18n.t("unread_messages", { title={I18NextService.i18n.t("unread_reports", {
count: Number(this.unreadInboxCount), count: Number(this.unreadReportCount),
formattedCount: numToSI(this.unreadInboxCount), formattedCount: numToSI(this.unreadReportCount),
})} })}
onMouseUp={linkEvent(this, handleCollapseClick)} onMouseUp={linkEvent(this, handleCollapseClick)}
> >
<Icon icon="bell" /> <Icon icon="shield" />
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0"> {this.unreadReportCount > 0 && (
{I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadInboxCount),
formattedCount: numToSI(this.unreadInboxCount),
})}
</span>
{this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light"> <span className="mx-1 badge text-bg-light">
{numToSI(this.unreadInboxCount)} {numToSI(this.unreadReportCount)}
</span> </span>
)} )}
</NavLink> </NavLink>
</li> </li>
{this.moderatesSomething && ( )}
<li id="navModeration" className="nav-item"> {amAdmin() && (
<li className="nav-item nav-item-icon">
<NavLink
to="/registration_applications"
className="p-1 nav-link border-0"
title={I18NextService.i18n.t(
"unread_registration_applications",
{
count: Number(this.unreadApplicationCount),
formattedCount: numToSI(this.unreadApplicationCount),
}
)}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="clipboard" />
{this.unreadApplicationCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadApplicationCount)}
</span>
)}
</NavLink>
</li>
)}
</ul>
)}
<button
className="navbar-toggler border-0 p-1"
type="button"
aria-label="menu"
data-tippy-content={I18NextService.i18n.t("expand_here")}
data-bs-toggle="collapse"
data-bs-target="#navbarDropdown"
aria-controls="navbarDropdown"
aria-expanded="false"
ref={this.collapseButtonRef}
>
<Icon icon="menu" />
</button>
<div
className="collapse navbar-collapse my-2"
id="navbarDropdown"
ref={this.mobileMenuRef}
>
<ul id="navbarLinks" className="me-auto navbar-nav">
<li className="nav-item">
<NavLink
to="/communities"
className="nav-link"
title={I18NextService.i18n.t("communities")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("communities")}
</NavLink>
</li>
<li className="nav-item">
{/* TODO make sure this works: https://github.com/infernojs/inferno/issues/1608 */}
<NavLink
to={{
pathname: "/create_post",
search: "",
hash: "",
key: "",
state: { prevPath: this.currentLocation },
}}
className="nav-link"
title={I18NextService.i18n.t("create_post")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("create_post")}
</NavLink>
</li>
{this.props.siteRes && canCreateCommunity(this.props.siteRes) && (
<li className="nav-item">
<NavLink
to="/create_community"
className="nav-link"
title={I18NextService.i18n.t("create_community")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("create_community")}
</NavLink>
</li>
)}
<li className="nav-item">
<a
className="nav-link d-inline-flex align-items-center d-md-inline-block"
title={I18NextService.i18n.t("support_lemmy")}
href={donateLemmyUrl}
>
<Icon icon="heart" classes="small" />
<span className="d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("support_lemmy")}
</span>
</a>
</li>
</ul>
<ul id="navbarIcons" className="navbar-nav">
<li id="navSearch" className="nav-item">
<NavLink
to="/search"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
title={I18NextService.i18n.t("search")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="search" />
<span className="d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("search")}
</span>
</NavLink>
</li>
{amAdmin() && (
<li id="navAdmin" className="nav-item">
<NavLink
to="/admin"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
title={I18NextService.i18n.t("admin_settings")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="settings" />
<span className="d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("admin_settings")}
</span>
</NavLink>
</li>
)}
{person ? (
<>
<li id="navMessages" className="nav-item">
<NavLink <NavLink
className="nav-link d-inline-flex align-items-center d-md-inline-block" className="nav-link d-inline-flex align-items-center d-md-inline-block"
to="/reports" to="/inbox"
title={I18NextService.i18n.t("unread_reports", { title={I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadReportCount), count: Number(this.unreadInboxCount),
formattedCount: numToSI(this.unreadReportCount), formattedCount: numToSI(this.unreadInboxCount),
})} })}
onMouseUp={linkEvent(this, handleCollapseClick)} onMouseUp={linkEvent(this, handleCollapseClick)}
> >
<Icon icon="shield" /> <Icon icon="bell" />
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0"> <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("unread_reports", { {I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadReportCount), count: Number(this.unreadInboxCount),
formattedCount: numToSI(this.unreadReportCount), formattedCount: numToSI(this.unreadInboxCount),
})} })}
</span> </span>
{this.unreadReportCount > 0 && ( {this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light"> <span className="mx-1 badge text-bg-light">
{numToSI(this.unreadReportCount)} {numToSI(this.unreadInboxCount)}
</span> </span>
)} )}
</NavLink> </NavLink>
</li> </li>
)} {this.moderatesSomething && (
{amAdmin() && ( <li id="navModeration" className="nav-item">
<li id="navApplications" className="nav-item"> <NavLink
<NavLink className="nav-link d-inline-flex align-items-center d-md-inline-block"
to="/registration_applications" to="/reports"
className="nav-link d-inline-flex align-items-center d-md-inline-block" title={I18NextService.i18n.t("unread_reports", {
title={I18NextService.i18n.t( count: Number(this.unreadReportCount),
"unread_registration_applications", formattedCount: numToSI(this.unreadReportCount),
{ })}
count: Number(this.unreadApplicationCount), onMouseUp={linkEvent(this, handleCollapseClick)}
formattedCount: numToSI(this.unreadApplicationCount), >
} <Icon icon="shield" />
)} <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
onMouseUp={linkEvent(this, handleCollapseClick)} {I18NextService.i18n.t("unread_reports", {
> count: Number(this.unreadReportCount),
<Icon icon="clipboard" /> formattedCount: numToSI(this.unreadReportCount),
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0"> })}
{I18NextService.i18n.t( </span>
{this.unreadReportCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadReportCount)}
</span>
)}
</NavLink>
</li>
)}
{amAdmin() && (
<li id="navApplications" className="nav-item">
<NavLink
to="/registration_applications"
className="nav-link d-inline-flex align-items-center d-md-inline-block"
title={I18NextService.i18n.t(
"unread_registration_applications", "unread_registration_applications",
{ {
count: Number(this.unreadApplicationCount), count: Number(this.unreadApplicationCount),
@ -337,97 +327,111 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
), ),
} }
)} )}
</span> onMouseUp={linkEvent(this, handleCollapseClick)}
{this.unreadApplicationCount > 0 && ( >
<span className="mx-1 badge text-bg-light"> <Icon icon="clipboard" />
{numToSI(this.unreadApplicationCount)} <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t(
"unread_registration_applications",
{
count: Number(this.unreadApplicationCount),
formattedCount: numToSI(
this.unreadApplicationCount
),
}
)}
</span> </span>
)} {this.unreadApplicationCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadApplicationCount)}
</span>
)}
</NavLink>
</li>
)}
{person && (
<li id="dropdownUser" className="dropdown">
<button
type="button"
className="btn dropdown-toggle"
aria-expanded="false"
data-bs-toggle="dropdown"
>
{showAvatars() && person.avatar && (
<PictrsImage src={person.avatar} icon />
)}
{person.display_name ?? person.name}
</button>
<ul
className="dropdown-menu"
style={{ "min-width": "fit-content" }}
>
<li>
<NavLink
to={`/u/${person.name}`}
className="dropdown-item px-2"
title={I18NextService.i18n.t("profile")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="user" classes="me-1" />
{I18NextService.i18n.t("profile")}
</NavLink>
</li>
<li>
<NavLink
to="/settings"
className="dropdown-item px-2"
title={I18NextService.i18n.t("settings")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="settings" classes="me-1" />
{I18NextService.i18n.t("settings")}
</NavLink>
</li>
<li>
<hr className="dropdown-divider" />
</li>
<li>
<button
className="dropdown-item btn btn-link px-2"
onClick={linkEvent(this, handleLogOut)}
>
<Icon icon="log-out" classes="me-1" />
{I18NextService.i18n.t("logout")}
</button>
</li>
</ul>
</li>
)}
</>
) : (
<>
<li className="nav-item">
<NavLink
to="/login"
className="nav-link"
title={I18NextService.i18n.t("login")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("login")}
</NavLink> </NavLink>
</li> </li>
)} <li className="nav-item">
{person && ( <NavLink
<li id="dropdownUser" className="dropdown"> to="/signup"
<button className="nav-link"
type="button" title={I18NextService.i18n.t("sign_up")}
className="btn dropdown-toggle" onMouseUp={linkEvent(this, handleCollapseClick)}
aria-expanded="false"
data-bs-toggle="dropdown"
> >
{showAvatars() && person.avatar && ( {I18NextService.i18n.t("sign_up")}
<PictrsImage src={person.avatar} icon /> </NavLink>
)}
{person.display_name ?? person.name}
</button>
<ul
className="dropdown-menu"
style={{ "min-width": "fit-content" }}
>
<li>
<NavLink
to={`/u/${person.name}`}
className="dropdown-item px-2"
title={I18NextService.i18n.t("profile")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="user" classes="me-1" />
{I18NextService.i18n.t("profile")}
</NavLink>
</li>
<li>
<NavLink
to="/settings"
className="dropdown-item px-2"
title={I18NextService.i18n.t("settings")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="settings" classes="me-1" />
{I18NextService.i18n.t("settings")}
</NavLink>
</li>
<li>
<hr className="dropdown-divider" />
</li>
<li>
<button
className="dropdown-item btn btn-link px-2"
onClick={linkEvent(this, handleLogOut)}
>
<Icon icon="log-out" classes="me-1" />
{I18NextService.i18n.t("logout")}
</button>
</li>
</ul>
</li> </li>
)} </>
</> )}
) : ( </ul>
<> </div>
<li className="nav-item"> </nav>
<NavLink </div>
to="/login"
className="nav-link"
title={I18NextService.i18n.t("login")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("login")}
</NavLink>
</li>
<li className="nav-item">
<NavLink
to="/signup"
className="nav-link"
title={I18NextService.i18n.t("sign_up")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{I18NextService.i18n.t("sign_up")}
</NavLink>
</li>
</>
)}
</ul>
</div>
</nav>
); );
} }

2
src/shared/components/common/pictrs-image.tsx
View file

@ -39,7 +39,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
"img-expanded slight-radius": "img-expanded slight-radius":
!this.props.thumbnail && !this.props.icon, !this.props.thumbnail && !this.props.icon,
"img-blur": this.props.thumbnail && this.props.nsfw, "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": "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
this.props.iconOverlay, this.props.iconOverlay,
"avatar-pushup": this.props.pushup, "avatar-pushup": this.props.pushup,

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

@ -104,7 +104,7 @@ export class VoteButtonsCompact extends Component<
render() { render() {
return ( return (
<div> <>
<button <button
type="button" type="button"
className={`btn-animate btn py-0 px-1 ${ className={`btn-animate btn py-0 px-1 ${
@ -157,7 +157,7 @@ export class VoteButtonsCompact extends Component<
)} )}
</button> </button>
)} )}
</div> </>
); );
} }
} }
@ -174,7 +174,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
render() { render() {
return ( return (
<div className="vote-bar col-1 pe-0 small text-center"> <div className="vote-bar pe-0 small text-center">
<button <button
type="button" type="button"
className={`btn-animate btn btn-link p-0 ${ className={`btn-animate btn btn-link p-0 ${

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

@ -317,7 +317,10 @@ export class Community extends Component<
/> />
<div className="row"> <div className="row">
<main className="col-12 col-md-8" ref={this.mainContentRef}> <main
className="col-12 col-md-8 col-lg-9"
ref={this.mainContentRef}
>
{this.communityInfo(res)} {this.communityInfo(res)}
<div className="d-block d-md-none"> <div className="d-block d-md-none">
<button <button
@ -340,7 +343,7 @@ export class Community extends Component<
{this.listings(res)} {this.listings(res)}
<Paginator page={page} onChange={this.handlePageChange} /> <Paginator page={page} onChange={this.handlePageChange} />
</main> </main>
<aside className="d-none d-md-block col-md-4"> <aside className="d-none d-md-block col-md-4 col-lg-3">
{this.sidebar(res)} {this.sidebar(res)}
</aside> </aside>
</div> </div>

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

@ -387,7 +387,7 @@ export class Home extends Component<any, HomeState> {
/> />
{site_setup && ( {site_setup && (
<div className="row"> <div className="row">
<main role="main" className="col-12 col-md-8"> <main role="main" className="col-12 col-md-8 col-lg-9">
{tagline && ( {tagline && (
<div <div
id="tagline" id="tagline"
@ -397,7 +397,7 @@ export class Home extends Component<any, HomeState> {
<div className="d-block d-md-none">{this.mobileView}</div> <div className="d-block d-md-none">{this.mobileView}</div>
{this.posts} {this.posts}
</main> </main>
<aside className="d-none d-md-block col-md-4"> <aside className="d-none d-md-block col-md-4 col-lg-3">
{this.mySidebar} {this.mySidebar}
</aside> </aside>
</div> </div>

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

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

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

@ -4,6 +4,7 @@ import {
Component, Component,
InfernoKeyboardEvent, InfernoKeyboardEvent,
InfernoMouseEvent, InfernoMouseEvent,
InfernoNode,
linkEvent, linkEvent,
} from "inferno"; } from "inferno";
import { import {
@ -13,6 +14,7 @@ import {
Instance, Instance,
ListingType, ListingType,
} from "lemmy-js-client"; } from "lemmy-js-client";
import deepEqual from "lodash.isequal";
import { I18NextService } from "../../services"; import { I18NextService } from "../../services";
import { Icon, Spinner } from "../common/icon"; import { Icon, Spinner } from "../common/icon";
import { ImageUploadForm } from "../common/image-upload-form"; import { ImageUploadForm } from "../common/image-upload-form";
@ -55,6 +57,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
initSiteForm(): EditSite { initSiteForm(): EditSite {
const site = this.props.siteRes.site_view.site; const site = this.props.siteRes.site_view.site;
const ls = this.props.siteRes.site_view.local_site; const ls = this.props.siteRes.site_view.local_site;
return { return {
name: site.name, name: site.name,
sidebar: site.sidebar, sidebar: site.sidebar,
@ -619,6 +622,19 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
); );
} }
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) { federatedInstanceSelect(key: InstanceKey) {
const id = `create_site_${key}`; const id = `create_site_${key}`;
const value = this.state.instance_select[key]; const value = this.state.instance_select[key];

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

@ -205,6 +205,7 @@ export class Profile extends Component<
this.handleSavePost = this.handleSavePost.bind(this); this.handleSavePost = this.handleSavePost.bind(this);
this.handlePurgePost = this.handlePurgePost.bind(this); this.handlePurgePost = this.handlePurgePost.bind(this);
this.handleFeaturePost = this.handleFeaturePost.bind(this); this.handleFeaturePost = this.handleFeaturePost.bind(this);
this.handleModBanSubmit = this.handleModBanSubmit.bind(this);
// Only fetch the data if coming from another route // Only fetch the data if coming from another route
if (FirstLoadService.isFirstLoad) { if (FirstLoadService.isFirstLoad) {
@ -691,6 +692,8 @@ export class Profile extends Component<
> >
{I18NextService.i18n.t("cancel")} {I18NextService.i18n.t("cancel")}
</button> </button>
</div>
<div className="mb-3 row">
<button <button
type="submit" type="submit"
className="btn btn-secondary" className="btn btn-secondary"
@ -987,6 +990,7 @@ export class Profile extends Component<
s.personRes.data.comments s.personRes.data.comments
.filter(c => c.creator.id == banRes.data.person_view.person.id) .filter(c => c.creator.id == banRes.data.person_view.person.id)
.forEach(c => (c.creator.banned = banRes.data.banned)); .forEach(c => (c.creator.banned = banRes.data.banned));
s.personRes.data.person_view.person.banned = banRes.data.banned;
} }
return s; return s;
}); });

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

@ -8,60 +8,54 @@ interface MetadataCardProps {
post: Post; post: Post;
} }
interface MetadataCardState { export class MetadataCard extends Component<MetadataCardProps> {
expanded: boolean;
}
export class MetadataCard extends Component<
MetadataCardProps,
MetadataCardState
> {
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
} }
render() { render() {
const post = this.props.post; const post = this.props.post;
return (
<> if (post.embed_title && post.url) {
{post.embed_title && post.url && ( return (
<div className="post-metadata-card card border-secondary mt-3 mb-2"> <div className="post-metadata-card card border-secondary mt-3 mb-2">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-12">
<div className="card-body"> <div className="card-body">
{post.name !== post.embed_title && ( {post.name !== post.embed_title && (
<> <>
<h5 className="card-title d-inline"> <h5 className="card-title d-inline">
<a className="text-body" href={post.url} rel={relTags}> <a className="text-body" href={post.url} rel={relTags}>
{post.embed_title} {post.embed_title}
</a> </a>
</h5> </h5>
<span className="d-inline-block ms-2 mb-2 small text-muted"> <span className="d-inline-block ms-2 mb-2 small text-muted">
<a <a
className="text-muted fst-italic" className="text-muted fst-italic"
href={post.url} href={post.url}
rel={relTags} rel={relTags}
> >
{new URL(post.url).hostname} {new URL(post.url).hostname}
<Icon icon="external-link" classes="ms-1" /> <Icon icon="external-link" classes="ms-1" />
</a> </a>
</span> </span>
</> </>
)} )}
{post.embed_description && ( {post.embed_description && (
<div <div
className="card-text small text-muted md-div" className="card-text small text-muted md-div"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: sanitizeHtml(post.embed_description), __html: sanitizeHtml(post.embed_description),
}} }}
/> />
)} )}
</div>
</div> </div>
</div> </div>
</div> </div>
)} </div>
</> );
); } else {
return <></>;
}
} }
} }

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

@ -49,7 +49,7 @@ import {
PurgeType, PurgeType,
VoteContentType, VoteContentType,
} from "../../interfaces"; } from "../../interfaces";
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown"; import { mdToHtml, mdToHtmlInline } from "../../markdown";
import { I18NextService, UserService } from "../../services"; import { I18NextService, UserService } from "../../services";
import { setupTippy } from "../../tippy"; import { setupTippy } from "../../tippy";
import { Icon, PurgeWarning, Spinner } from "../common/icon"; import { Icon, PurgeWarning, Spinner } from "../common/icon";
@ -105,6 +105,9 @@ interface PostListingProps {
allLanguages: Language[]; allLanguages: Language[];
siteLanguages: number[]; siteLanguages: number[];
showCommunity?: boolean; showCommunity?: boolean;
/**
* Controls whether to show both the body *and* the metadata preview card
*/
showBody?: boolean; showBody?: boolean;
hideImage?: boolean; hideImage?: boolean;
enableDownvotes?: boolean; enableDownvotes?: boolean;
@ -183,7 +186,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
addModLoading: false, addModLoading: false,
addAdminLoading: false, addAdminLoading: false,
transferLoading: false, transferLoading: false,
imageExpanded: false,
}); });
} }
} }
@ -201,7 +203,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
{this.listing()} {this.listing()}
{this.state.imageExpanded && !this.props.hideImage && this.img} {this.state.imageExpanded && !this.props.hideImage && this.img}
{post.url && this.state.showBody && post.embed_title && ( {this.showBody && post.url && post.embed_title && (
<MetadataCard post={post} /> <MetadataCard post={post} />
)} )}
{this.showBody && this.body()} {this.showBody && this.body()}
@ -397,7 +399,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const post_view = this.postView; const post_view = this.postView;
return ( return (
<span className="small"> <span className="small">
<PersonListing person={post_view.creator} muted={true} /> <PersonListing person={post_view.creator} />
{this.creatorIsMod_ && ( {this.creatorIsMod_ && (
<span className="mx-1 badge text-bg-light"> <span className="mx-1 badge text-bg-light">
{I18NextService.i18n.t("mod")} {I18NextService.i18n.t("mod")}
@ -482,26 +484,22 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
this.postLink this.postLink
)} )}
</h5> </h5>
{(url && isImage(url)) ||
(post.thumbnail_url && ( {/**
<button * If there is a URL, an embed title, and we were not told to show the
className="btn btn-sm text-monospace text-muted d-inline-block" * body by the parent component, show the MetadataCard/body toggle.
data-tippy-content={I18NextService.i18n.t("expand_here")} */}
onClick={linkEvent(this, this.handleImageExpandClick)} {!this.props.showBody &&
> post.url &&
<Icon post.embed_title &&
icon={ this.showPreviewButton()}
!this.state.imageExpanded ? "plus-square" : "minus-square"
}
classes="icon-inline"
/>
</button>
))}
{post.removed && ( {post.removed && (
<small className="ms-2 badge text-bg-secondary"> <small className="ms-2 badge text-bg-secondary">
{I18NextService.i18n.t("removed")} {I18NextService.i18n.t("removed")}
</small> </small>
)} )}
{post.deleted && ( {post.deleted && (
<small <small
className="unselectable pointer ms-2 text-muted fst-italic" className="unselectable pointer ms-2 text-muted fst-italic"
@ -510,6 +508,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="trash" classes="icon-inline text-danger" /> <Icon icon="trash" classes="icon-inline text-danger" />
</small> </small>
)} )}
{post.locked && ( {post.locked && (
<small <small
className="unselectable pointer ms-2 text-muted fst-italic" className="unselectable pointer ms-2 text-muted fst-italic"
@ -518,6 +517,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="lock" classes="icon-inline text-danger" /> <Icon icon="lock" classes="icon-inline text-danger" />
</small> </small>
)} )}
{post.featured_community && ( {post.featured_community && (
<small <small
className="unselectable pointer ms-2 text-muted fst-italic" className="unselectable pointer ms-2 text-muted fst-italic"
@ -529,6 +529,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="pin" classes="icon-inline text-primary" /> <Icon icon="pin" classes="icon-inline text-primary" />
</small> </small>
)} )}
{post.featured_local && ( {post.featured_local && (
<small <small
className="unselectable pointer ms-2 text-muted fst-italic" className="unselectable pointer ms-2 text-muted fst-italic"
@ -538,6 +539,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<Icon icon="pin" classes="icon-inline text-secondary" /> <Icon icon="pin" classes="icon-inline text-secondary" />
</small> </small>
)} )}
{post.nsfw && ( {post.nsfw && (
<small className="ms-2 badge text-bg-danger"> <small className="ms-2 badge text-bg-danger">
{I18NextService.i18n.t("nsfw")} {I18NextService.i18n.t("nsfw")}
@ -634,27 +636,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
); );
} }
showPreviewButton() {
const post_view = this.postView;
const body = post_view.post.body;
return (
<button
className="btn btn-sm btn-animate text-muted py-0"
data-tippy-content={body && mdNoImages.render(body)}
data-tippy-allowHtml={true}
onClick={linkEvent(this, this.handleShowBody)}
>
<Icon
icon="book-open"
classes={classNames("icon-inline me-1", {
"text-success": this.state.showBody,
})}
/>
</button>
);
}
postActions() { postActions() {
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button. // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
// Possible enhancement: Make each button a component. // Possible enhancement: Make each button a component.
@ -666,14 +647,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.saveButton} {this.saveButton}
{this.crossPostButton} {this.crossPostButton}
{/** {this.props.showBody && post_view.post.body && this.viewSourceButton}
* If there is a URL, or if the post has a body and we were told not to
* show the body, show the MetadataCard/body toggle.
*/}
{(post.url || (post.body && !this.props.showBody)) &&
this.showPreviewButton()}
{this.showBody && post_view.post.body && this.viewSourceButton}
<div className="dropdown"> <div className="dropdown">
<button <button
@ -1397,15 +1371,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
); );
} }
showBodyPreview() { showPreviewButton() {
const { body, id } = this.postView.post; return (
<button
return !this.showBody && body ? ( type="button"
<Link className="text-body mt-2 d-block" to={`/post/${id}`}> className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
<div className="md-div mb-1 preview-lines">{body}</div> onClick={linkEvent(this, this.handleShowBody)}
</Link> >
) : ( <Icon
<></> icon={!this.state.showBody ? "plus-square" : "minus-square"}
classes="icon-inline"
/>
</button>
); );
} }
@ -1421,9 +1398,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{/* If it has a thumbnail, do a right aligned thumbnail */} {/* If it has a thumbnail, do a right aligned thumbnail */}
{this.mobileThumbnail()} {this.mobileThumbnail()}
{/* Show a preview of the post body */}
{this.showBodyPreview()}
{this.commentsLine(true)} {this.commentsLine(true)}
{this.userActionsLine()} {this.userActionsLine()}
{this.duplicatesLine()} {this.duplicatesLine()}
@ -1436,24 +1410,25 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div className="d-none d-sm-block"> <div className="d-none d-sm-block">
<article className="row post-container"> <article className="row post-container">
{!this.props.viewOnly && ( {!this.props.viewOnly && (
<VoteButtons <div className="col flex-grow-0">
voteContentType={VoteContentType.Post} <VoteButtons
id={this.postView.post.id} voteContentType={VoteContentType.Post}
onVote={this.props.onPostVote} id={this.postView.post.id}
enableDownvotes={this.props.enableDownvotes} onVote={this.props.onPostVote}
counts={this.postView.counts} enableDownvotes={this.props.enableDownvotes}
my_vote={this.postView.my_vote} counts={this.postView.counts}
/> my_vote={this.postView.my_vote}
/>
</div>
)} )}
<div className="col-sm-2 pe-0 post-media"> <div className="col flex-grow-1">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12 col-sm-9">
<div className="row"> <div className="row">
<div className="col-12"> <div className="col-sm-3 col-lg-2 pe-0 post-media">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12 col-sm-9 col-lg-10">
{this.postTitleLine()} {this.postTitleLine()}
{this.createdLine()} {this.createdLine()}
{this.showBodyPreview()}
{this.commentsLine()} {this.commentsLine()}
{this.duplicatesLine()} {this.duplicatesLine()}
{this.userActionsLine()} {this.userActionsLine()}

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

2
src/shared/config.ts
View file

@ -21,7 +21,7 @@ export const markdownFieldCharacterLimit = 50000;
export const maxUploadImages = 20; export const maxUploadImages = 20;
export const concurrentImageUpload = 4; export const concurrentImageUpload = 4;
export const updateUnreadCountsInterval = 30000; export const updateUnreadCountsInterval = 30000;
export const fetchLimit = 40; export const fetchLimit = 20;
export const relTags = "noopener nofollow"; export const relTags = "noopener nofollow";
export const emDash = "\u2014"; export const emDash = "\u2014";

5
webpack.config.js
View file

@ -6,8 +6,7 @@ const CopyPlugin = require("copy-webpack-plugin");
const RunNodeWebpackPlugin = require("run-node-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 { ServiceWorkerPlugin } = require("service-worker-webpack");
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const banner = ` const banner = `
hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file] hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
Source code: https://github.com/LemmyNet/lemmy-ui Source code: https://github.com/LemmyNet/lemmy-ui
@ -156,6 +155,8 @@ const createClientConfig = (_env, mode) => {
}); });
if (mode === "none") { if (mode === "none") {
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
config.plugins.push(new BundleAnalyzerPlugin()); config.plugins.push(new BundleAnalyzerPlugin());
} }