bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Admin: display nav on mobile

Browse source
This commit is contained in:
Alex Gleason 2020-12-30 08:43:24 -06:00
parent 98a91bd88d
commit 560d9d642c
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 64 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/soapbox/features/ui/index.js
View file

@ -32,6 +32,7 @@ import ProfilePage from 'soapbox/pages/profile_page';
// import GroupSidebarPanel from '../groups/sidebar_panel';
import SearchPage from 'soapbox/pages/search_page';
import HomePage from 'soapbox/pages/home_page';
import AdminPage from 'soapbox/pages/admin_page';
import SidebarMenu from '../../components/sidebar_menu';
import { connectUserStream } from '../../actions/streaming';
import { Redirect } from 'react-router-dom';
@ -157,14 +158,6 @@ const LAYOUT = {
<FeaturesPanel key='0' />,
],
},
ADMIN: {
LEFT: [
<AdminNav key='0' />,
],
RIGHT: [
<LinkFooter key='1' />,
],
},
STATUS: {
TOP: null,
LEFT: null,
@ -286,8 +279,8 @@ class SwitchingColumnsArea extends React.PureComponent {
<WrappedRoute path='/soapbox/config' layout={LAYOUT.DEFAULT} component={SoapboxConfig} content={children} />
<Redirect from='/admin/dashboard' to='/admin' exact />
<WrappedRoute path='/admin' layout={LAYOUT.ADMIN} component={Dashboard} content={children} exact />
<WrappedRoute path='/admin/approval' layout={LAYOUT.ADMIN} component={AwaitingApproval} content={children} exact />
<WrappedRoute path='/admin' page={AdminPage} component={Dashboard} content={children} exact />
<WrappedRoute path='/admin/approval' page={AdminPage} component={AwaitingApproval} content={children} exact />
<WrappedRoute path='/info' layout={LAYOUT.EMPTY} component={ServerInfo} content={children} />
<WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />

40
app/soapbox/pages/admin_page.js Normal file
View file

@ -0,0 +1,40 @@
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import LinkFooter from '../features/ui/components/link_footer';
import AdminNav from 'soapbox/features/admin/components/admin_nav';
export default
class AdminPage extends ImmutablePureComponent {
render() {
const { children } = this.props;
return (
<div className='page page--admin'>
<div className='page__columns'>
<div className='columns-area__panels'>
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
<div className='columns-area__panels__pane__inner'>
<AdminNav />
</div>
</div>
<div className='columns-area__panels__main'>
<div className='columns-area columns-area--mobile'>
{children}
</div>
</div>
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
<LinkFooter />
</div>
</div>
</div>
</div>
</div>
);
}
}

21
app/styles/components/admin.scss
View file

@ -94,3 +94,24 @@
.slist .item-list article:nth-child(2n-1) .unapproved-account {
background-color: hsla(var(--accent-color_hsl), 0.07);
}
.page--admin {
@media screen and (max-width: 895px) {
.columns-area__panels {
flex-direction: column;
align-items: center;
&__pane--left {
display: block;
width: 100%;
max-width: 600px;
padding: 20px 20px 0;
box-sizing: border-box;
.columns-area__panels__pane__inner {
width: auto;
}
}
}
}
}