Merge pull request #1590 from jsit/fix/wider-max-width-1536

fix(UI): Make max-width wider, and make sidebar narrower on wide screens (#1536)
This commit is contained in:
SleeplessOne1917 2023-06-26 20:34:32 -04:00 committed by GitHub
commit 8766c5cf8e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 455 additions and 338 deletions

View file

@ -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 {

View file

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

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -79,256 +79,246 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
const siteView = this.props.siteRes?.site_view;
const person = UserService.Instance.myUserInfo?.local_user_view.person;
return (
<nav
className="navbar navbar-expand-md navbar-light shadow-sm 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)}
<div className="shadow-sm">
<nav
className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
id="navbar"
>
{siteView?.site.icon && showAvatars() && (
<PictrsImage src={siteView.site.icon} icon />
)}
{siteView?.site.name}
</NavLink>
{person && (
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
<li id="navMessages" className="nav-item nav-item-icon">
<NavLink
to="/inbox"
className="p-1 nav-link border-0 nav-messages"
title={I18NextService.i18n.t("unread_messages", {
count: Number(this.state.unreadApplicationCountRes.state),
formattedCount: numToSI(this.unreadInboxCount),
})}
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
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() && (
<PictrsImage src={siteView.site.icon} icon />
)}
{siteView?.site.name}
</NavLink>
{person && (
<ul className="navbar-nav d-flex flex-row ms-auto d-md-none">
<li id="navMessages" className="nav-item nav-item-icon">
<NavLink
to="/reports"
className="p-1 nav-link border-0"
title={I18NextService.i18n.t("unread_reports", {
count: Number(this.unreadReportCount),
formattedCount: numToSI(this.unreadReportCount),
to="/inbox"
className="p-1 nav-link border-0 nav-messages"
title={I18NextService.i18n.t("unread_messages", {
count: Number(this.state.unreadApplicationCountRes.state),
formattedCount: numToSI(this.unreadInboxCount),
})}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="shield" />
{this.unreadReportCount > 0 && (
<Icon icon="bell" />
{this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadReportCount)}
{numToSI(this.unreadInboxCount)}
</span>
)}
</NavLink>
</li>
)}
{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">
{this.moderatesSomething && (
<li className="nav-item nav-item-icon">
<NavLink
className="nav-link d-inline-flex align-items-center d-md-inline-block"
to="/inbox"
title={I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadInboxCount),
formattedCount: numToSI(this.unreadInboxCount),
to="/reports"
className="p-1 nav-link border-0"
title={I18NextService.i18n.t("unread_reports", {
count: Number(this.unreadReportCount),
formattedCount: numToSI(this.unreadReportCount),
})}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="bell" />
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadInboxCount),
formattedCount: numToSI(this.unreadInboxCount),
})}
</span>
{this.unreadInboxCount > 0 && (
<Icon icon="shield" />
{this.unreadReportCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadInboxCount)}
{numToSI(this.unreadReportCount)}
</span>
)}
</NavLink>
</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
className="nav-link d-inline-flex align-items-center d-md-inline-block"
to="/reports"
title={I18NextService.i18n.t("unread_reports", {
count: Number(this.unreadReportCount),
formattedCount: numToSI(this.unreadReportCount),
to="/inbox"
title={I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadInboxCount),
formattedCount: numToSI(this.unreadInboxCount),
})}
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">
{I18NextService.i18n.t("unread_reports", {
count: Number(this.unreadReportCount),
formattedCount: numToSI(this.unreadReportCount),
{I18NextService.i18n.t("unread_messages", {
count: Number(this.unreadInboxCount),
formattedCount: numToSI(this.unreadInboxCount),
})}
</span>
{this.unreadReportCount > 0 && (
{this.unreadInboxCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadReportCount)}
{numToSI(this.unreadInboxCount)}
</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",
{
count: Number(this.unreadApplicationCount),
formattedCount: numToSI(this.unreadApplicationCount),
}
)}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="clipboard" />
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t(
{this.moderatesSomething && (
<li id="navModeration" className="nav-item">
<NavLink
className="nav-link d-inline-flex align-items-center d-md-inline-block"
to="/reports"
title={I18NextService.i18n.t("unread_reports", {
count: Number(this.unreadReportCount),
formattedCount: numToSI(this.unreadReportCount),
})}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="shield" />
<span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
{I18NextService.i18n.t("unread_reports", {
count: Number(this.unreadReportCount),
formattedCount: numToSI(this.unreadReportCount),
})}
</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",
{
count: Number(this.unreadApplicationCount),
@ -337,97 +327,111 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
),
}
)}
</span>
{this.unreadApplicationCount > 0 && (
<span className="mx-1 badge text-bg-light">
{numToSI(this.unreadApplicationCount)}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
<Icon icon="clipboard" />
<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>
)}
{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>
</li>
)}
{person && (
<li id="dropdownUser" className="dropdown">
<button
type="button"
className="btn dropdown-toggle"
aria-expanded="false"
data-bs-toggle="dropdown"
<li className="nav-item">
<NavLink
to="/signup"
className="nav-link"
title={I18NextService.i18n.t("sign_up")}
onMouseUp={linkEvent(this, handleCollapseClick)}
>
{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>
{I18NextService.i18n.t("sign_up")}
</NavLink>
</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>
</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>
</>
)}
</ul>
</div>
</nav>
</div>
);
}

View file

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

View file

@ -317,7 +317,10 @@ export class Community extends Component<
/>
<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)}
<div className="d-block d-md-none">
<button
@ -340,7 +343,7 @@ export class Community extends Component<
{this.listings(res)}
<Paginator page={page} onChange={this.handlePageChange} />
</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)}
</aside>
</div>

View file

@ -387,7 +387,7 @@ export class Home extends Component<any, HomeState> {
/>
{site_setup && (
<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 && (
<div
id="tagline"
@ -397,7 +397,7 @@ export class Home extends Component<any, HomeState> {
<div className="d-block d-md-none">{this.mobileView}</div>
{this.posts}
</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}
</aside>
</div>

View file

@ -1426,21 +1426,23 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<div className="d-none d-sm-block">
<article className="row post-container">
{!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 flex-grow-0">
<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>
)}
<div className="col-sm-2 pe-0 post-media">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12 col-sm-9">
<div className="col flex-grow-1">
<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.createdLine()}
{this.showBodyPreview()}

View file

@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
const res = this.state.postRes.data;
return (
<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
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -416,7 +416,7 @@ export class Post extends Component<any, PostState> {
{this.state.commentViewType == CommentViewType.Flat &&
this.commentsFlat()}
</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()}
</aside>
</div>