Collapse sidebar on mobile. Fixes #335

This commit is contained in:
Dessalines 2021-07-17 23:51:17 -04:00
parent fccfe10307
commit 68a389af89
3 changed files with 176 additions and 31 deletions

View file

@ -1,4 +1,4 @@
import { Component } from "inferno";
import { Component, linkEvent } from "inferno";
import {
AddModToCommunityResponse,
BanFromCommunityResponse,
@ -71,6 +71,7 @@ interface State {
dataType: DataType;
sort: SortType;
page: number;
showSidebarMobile: boolean;
}
interface CommunityProps {
@ -101,6 +102,7 @@ export class Community extends Component<any, State> {
sort: getSortTypeFromProps(this.props),
page: getPageFromProps(this.props),
siteRes: this.isoData.site_res,
showSidebarMobile: false,
};
constructor(props: any, context: any) {
@ -246,32 +248,60 @@ export class Community extends Component<any, State> {
<Spinner large />
</h5>
) : (
<div class="row">
<div class="col-12 col-md-8">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={cv.community.description}
image={cv.community.icon}
/>
{this.communityInfo()}
{this.selects()}
{this.listings()}
<Paginator
page={this.state.page}
onChange={this.handlePageChange}
/>
<>
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
description={cv.community.description}
image={cv.community.icon}
/>
<div class="row">
<div class="col-12 col-md-8">
{this.communityInfo()}
<div class="d-block d-md-none">
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSidebarMobile)}
>
{i18n.t("sidebar")}{" "}
<Icon
icon={
this.state.showSidebarMobile
? `minus-square`
: `plus-square`
}
classes="icon-inline"
/>
</button>
{this.state.showSidebarMobile && (
<Sidebar
community_view={cv}
moderators={this.state.communityRes.moderators}
admins={this.state.siteRes.admins}
online={this.state.communityRes.online}
enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
/>
)}
</div>
{this.selects()}
{this.listings()}
<Paginator
page={this.state.page}
onChange={this.handlePageChange}
/>
</div>
<div class="d-none d-md-block col-md-4">
<Sidebar
community_view={cv}
moderators={this.state.communityRes.moderators}
admins={this.state.siteRes.admins}
online={this.state.communityRes.online}
enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
/>
</div>
</div>
<div class="col-12 col-md-4">
<Sidebar
community_view={cv}
moderators={this.state.communityRes.moderators}
admins={this.state.siteRes.admins}
online={this.state.communityRes.online}
enableNsfw={this.state.siteRes.site_view.site.enable_nsfw}
/>
</div>
</div>
</>
)}
</div>
);
@ -309,7 +339,7 @@ export class Community extends Component<any, State> {
communityInfo() {
let community = this.state.communityRes.community_view.community;
return (
<div>
<div class="mb-2">
<BannerIconHeader banner={community.banner} icon={community.icon} />
<h5 class="mb-0">{community.title}</h5>
<CommunityLink
@ -319,7 +349,6 @@ export class Community extends Component<any, State> {
muted
hideAvatar
/>
<hr />
</div>
);
}
@ -365,6 +394,11 @@ export class Community extends Component<any, State> {
window.scrollTo(0, 0);
}
handleShowSidebarMobile(i: Community) {
i.state.showSidebarMobile = !i.state.showSidebarMobile;
i.setState(i.state);
}
updateUrl(paramUpdates: UrlParams) {
const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
const sortStr = paramUpdates.sort || this.state.sort;

View file

@ -72,6 +72,9 @@ interface HomeState {
trendingCommunities: CommunityView[];
siteRes: GetSiteResponse;
showEditSite: boolean;
showSubscribedMobile: boolean;
showTrendingMobile: boolean;
showSidebarMobile: boolean;
loading: boolean;
posts: PostView[];
comments: CommentView[];
@ -103,6 +106,9 @@ export class Home extends Component<any, HomeState> {
trendingCommunities: [],
siteRes: this.isoData.site_res,
showEditSite: false,
showSubscribedMobile: false,
showTrendingMobile: false,
showSidebarMobile: false,
loading: true,
posts: [],
comments: [],
@ -283,15 +289,81 @@ export class Home extends Component<any, HomeState> {
{this.state.siteRes.site_view?.site && (
<div class="row">
<main role="main" class="col-12 col-md-8">
<div class="d-block d-md-none">{this.mobileView()}</div>
{this.posts()}
</main>
<aside class="col-12 col-md-4">{this.mySidebar()}</aside>
<aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
</div>
)}
</div>
);
}
mobileView() {
return (
<div class="row">
<div class="col-12">
{UserService.Instance.localUserView &&
this.state.subscribedCommunities.length > 0 && (
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSubscribedMobile)}
>
{i18n.t("subscribed")}{" "}
<Icon
icon={
this.state.showSubscribedMobile
? `minus-square`
: `plus-square`
}
classes="icon-inline"
/>
</button>
)}
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowTrendingMobile)}
>
{i18n.t("trending")}{" "}
<Icon
icon={
this.state.showTrendingMobile ? `minus-square` : `plus-square`
}
classes="icon-inline"
/>
</button>
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSidebarMobile)}
>
{i18n.t("sidebar")}{" "}
<Icon
icon={
this.state.showSidebarMobile ? `minus-square` : `plus-square`
}
classes="icon-inline"
/>
</button>
{this.state.showSubscribedMobile && (
<div class="col-12 card border-secondary mb-3">
<div class="card-body">{this.subscribedCommunities()}</div>
</div>
)}
{this.state.showTrendingMobile && (
<div class="col-12 card border-secondary mb-3">
<div class="card-body">{this.trendingCommunities()}</div>
</div>
)}
{this.state.showSidebarMobile && (
<div class="col-12 card border-secondary mb-3">
<div class="card-body">{this.sidebar()}</div>
</div>
)}
</div>
</div>
);
}
mySidebar() {
return (
<div>
@ -656,6 +728,21 @@ export class Home extends Component<any, HomeState> {
this.setState(this.state);
}
handleShowSubscribedMobile(i: Home) {
i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
i.setState(i.state);
}
handleShowTrendingMobile(i: Home) {
i.state.showTrendingMobile = !i.state.showTrendingMobile;
i.setState(i.state);
}
handleShowSidebarMobile(i: Home) {
i.state.showSidebarMobile = !i.state.showSidebarMobile;
i.setState(i.state);
}
handlePageChange(page: number) {
this.updateUrl({ page });
window.scrollTo(0, 0);

View file

@ -58,7 +58,7 @@ import {
import { CommentForm } from "../comment/comment-form";
import { CommentNodes } from "../comment/comment-nodes";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
import { Icon, Spinner } from "../common/icon";
import { Sidebar } from "../community/sidebar";
import { PostListing } from "./post-listing";
@ -73,6 +73,7 @@ interface PostState {
loading: boolean;
crossPosts: PostView[];
siteRes: GetSiteResponse;
showSidebarMobile: boolean;
}
export class Post extends Component<any, PostState> {
@ -89,6 +90,7 @@ export class Post extends Component<any, PostState> {
loading: true,
crossPosts: [],
siteRes: this.isoData.site_res,
showSidebarMobile: false,
};
constructor(props: any, context: any) {
@ -280,13 +282,30 @@ export class Post extends Component<any, PostState> {
postId={this.state.postId}
disabled={pv.post.locked}
/>
<div class="d-block d-md-none">
<button
class="btn btn-secondary d-inline-block mb-2 mr-3"
onClick={linkEvent(this, this.handleShowSidebarMobile)}
>
{i18n.t("sidebar")}{" "}
<Icon
icon={
this.state.showSidebarMobile
? `minus-square`
: `plus-square`
}
classes="icon-inline"
/>
</button>
{this.state.showSidebarMobile && this.sidebar()}
</div>
{this.state.postRes.comments.length > 0 && this.sortRadios()}
{this.state.commentViewType == CommentViewType.Tree &&
this.commentsTree()}
{this.state.commentViewType == CommentViewType.Chat &&
this.commentsFlat()}
</div>
<div class="col-12 col-sm-12 col-md-4">{this.sidebar()}</div>
<div class="d-none d-md-block col-md-4">{this.sidebar()}</div>
</div>
)}
</div>
@ -422,6 +441,11 @@ export class Post extends Component<any, PostState> {
i.setState(i.state);
}
handleShowSidebarMobile(i: Post) {
i.state.showSidebarMobile = !i.state.showSidebarMobile;
i.setState(i.state);
}
commentsTree() {
return (
<div>