mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-08 09:34:16 +00:00
Collapse sidebar on mobile. Fixes #335
This commit is contained in:
parent
fccfe10307
commit
68a389af89
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue