[Glitch] Fix logged-out web UI on smaller screens

Port e2b561e3a5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko
2022-10-04 20:13:23 +02:00
committed by Claire
parent 14ddb85c3b
commit 206e9593ac
17 changed files with 354 additions and 339 deletions

View File

@@ -84,11 +84,12 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
static contextTypes = {
router: PropTypes.object.isRequired,
identity: PropTypes.object,
};
static propTypes = {
intl: PropTypes.object.isRequired,
myAccount: ImmutablePropTypes.map.isRequired,
myAccount: ImmutablePropTypes.map,
columns: ImmutablePropTypes.list,
multiColumn: PropTypes.bool,
fetchFollowRequests: PropTypes.func.isRequired,
@@ -104,10 +105,10 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
}
componentDidMount () {
const { fetchFollowRequests, multiColumn } = this.props;
const { fetchFollowRequests } = this.props;
const { signedIn } = this.context.identity;
if (!multiColumn && window.innerWidth >= NAVIGATION_PANEL_BREAKPOINT) {
this.context.router.history.replace('/home');
if (!signedIn) {
return;
}
@@ -121,7 +122,7 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
let listItems = [];
if (multiColumn) {
if (!columns.find(item => item.get('id') === 'HOME')) {
if (signedIn && !columns.find(item => item.get('id') === 'HOME')) {
navItems.push(<ColumnLink key='home' icon='home' text={intl.formatMessage(messages.home_timeline)} to='/home' />);
}
@@ -142,41 +143,47 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
navItems.push(<ColumnLink key='explore' icon='hashtag' text={intl.formatMessage(messages.explore)} to='/explore' />);
}
if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) {
navItems.push(<ColumnLink key='conversations' icon='envelope' text={intl.formatMessage(messages.direct)} to='/conversations' />);
if (signedIn) {
if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) {
navItems.push(<ColumnLink key='conversations' icon='envelope' text={intl.formatMessage(messages.direct)} to='/conversations' />);
}
if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) {
navItems.push(<ColumnLink key='bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />);
}
if (myAccount.get('locked') || unreadFollowRequests > 0) {
navItems.push(<ColumnLink key='follow_requests' icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
}
navItems.push(<ColumnLink key='getting_started' icon='ellipsis-h' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);
listItems = listItems.concat([
<div key='9'>
<ColumnLink key='lists' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />
{lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list =>
<ColumnLink key={`list-${list.get('id')}`} to={`/lists/${list.get('id')}`} icon='list-ul' text={list.get('title')} />
)}
</div>,
]);
}
if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) {
navItems.push(<ColumnLink key='bookmarks' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />);
}
if (myAccount.get('locked') || unreadFollowRequests > 0) {
navItems.push(<ColumnLink key='follow_requests' icon='user-plus' text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
}
navItems.push(<ColumnLink key='getting_started' icon='ellipsis-h' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);
listItems = listItems.concat([
<div key='9'>
<ColumnLink key='lists' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />
{lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list =>
<ColumnLink key={`list-${list.get('id')}`} to={`/lists/${list.get('id')}`} icon='list-ul' text={list.get('title')} />
)}
</div>,
]);
return (
<Column bindToDocument={!multiColumn} name='getting-started' icon='asterisk' heading={intl.formatMessage(messages.heading)} label={intl.formatMessage(messages.menu)} hideHeadingOnMobile>
<div className='scrollable optionally-scrollable'>
<div className='getting-started__wrapper'>
{!multiColumn && <NavigationBar account={myAccount} />}
{!multiColumn && signedIn && <NavigationBar account={myAccount} />}
{multiColumn && <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />}
{navItems}
<ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} />
{listItems}
<ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
{ preferencesLink !== undefined && <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
<ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
{signedIn && (
<React.Fragment>
<ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} />
{listItems}
<ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
{ preferencesLink !== undefined && <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
<ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
</React.Fragment>
)}
</div>
<LinkFooter />