diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2022-10-04 20:13:23 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-10-04 20:13:23 +0200 |
commit | e2b561e3a521ff893943c0e9e32952e35934ca54 (patch) | |
tree | 0cd2710017743e4b5ed82afde3dcad0a9c675b5c /app/javascript/mastodon/features/getting_started/index.js | |
parent | 6580ac724145d7c5e0af8f9ac27c69e412ffc2f8 (diff) |
Fix logged-out web UI on smaller screens (#19263)
Diffstat (limited to 'app/javascript/mastodon/features/getting_started/index.js')
-rw-r--r-- | app/javascript/mastodon/features/getting_started/index.js | 104 |
1 files changed, 34 insertions, 70 deletions
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js index 65cee7498..d998127a2 100644 --- a/app/javascript/mastodon/features/getting_started/index.js +++ b/app/javascript/mastodon/features/getting_started/index.js @@ -1,19 +1,20 @@ import React from 'react'; -import Column from '../ui/components/column'; +import Column from 'mastodon/components/column'; +import ColumnHeader from 'mastodon/components/column_header'; import ColumnLink from '../ui/components/column_link'; import ColumnSubheading from '../ui/components/column_subheading'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { me, showTrends } from '../../initial_state'; +import { me, title, showTrends } from '../../initial_state'; import { fetchFollowRequests } from 'mastodon/actions/accounts'; import { List as ImmutableList } from 'immutable'; import NavigationContainer from '../compose/containers/navigation_container'; -import Icon from 'mastodon/components/icon'; import LinkFooter from 'mastodon/features/ui/components/link_footer'; import TrendsContainer from './containers/trends_container'; +import { Helmet } from 'react-helmet'; const messages = defineMessages({ home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' }, @@ -40,7 +41,6 @@ const messages = defineMessages({ const mapStateToProps = state => ({ myAccount: state.getIn(['accounts', me]), - columns: state.getIn(['settings', 'columns']), unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size, }); @@ -58,20 +58,18 @@ const badgeDisplay = (number, limit) => { } }; -const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); - export default @connect(mapStateToProps, mapDispatchToProps) @injectIntl class GettingStarted extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object.isRequired, + identity: PropTypes.object, }; static propTypes = { intl: PropTypes.object.isRequired, - myAccount: ImmutablePropTypes.map.isRequired, - columns: ImmutablePropTypes.list, + myAccount: ImmutablePropTypes.map, multiColumn: PropTypes.bool, fetchFollowRequests: PropTypes.func.isRequired, unreadFollowRequests: PropTypes.number, @@ -79,10 +77,10 @@ class GettingStarted extends ImmutablePureComponent { }; 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; } @@ -90,91 +88,57 @@ class GettingStarted extends ImmutablePureComponent { } render () { - const { intl, myAccount, columns, multiColumn, unreadFollowRequests } = this.props; + const { intl, myAccount, multiColumn, unreadFollowRequests } = this.props; + const { signedIn } = this.context.identity; const navItems = []; - let height = (multiColumn) ? 0 : 60; - - if (multiColumn) { - navItems.push( - <ColumnSubheading key='header-discover' text={intl.formatMessage(messages.discover)} />, - ); - height += 34; - } navItems.push( + <ColumnSubheading key='header-discover' text={intl.formatMessage(messages.discover)} />, <ColumnLink key='explore' icon='hashtag' text={intl.formatMessage(messages.explore)} to='/explore' />, + <ColumnLink key='community_timeline' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/public/local' />, + <ColumnLink key='public_timeline' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/public' />, ); - height += 48; - - if (multiColumn) { - navItems.push( - <ColumnLink key='community_timeline' icon='users' text={intl.formatMessage(messages.community_timeline)} to='/public/local' />, - <ColumnLink key='public_timeline' icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/public' />, - ); - - height += 48*2; + if (signedIn) { navItems.push( <ColumnSubheading key='header-personal' text={intl.formatMessage(messages.personal)} />, - ); - - height += 34; - } - - if (multiColumn && !columns.find(item => item.get('id') === 'HOME')) { - navItems.push( <ColumnLink key='home' icon='home' text={intl.formatMessage(messages.home_timeline)} to='/home' />, + <ColumnLink key='direct' icon='at' text={intl.formatMessage(messages.direct)} to='/conversations' />, + <ColumnLink key='bookmark' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />, + <ColumnLink key='favourites' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />, + <ColumnLink key='lists' icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />, ); - height += 48; - } - - navItems.push( - <ColumnLink key='direct' icon='at' text={intl.formatMessage(messages.direct)} to='/conversations' />, - <ColumnLink key='bookmark' icon='bookmark' text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />, - <ColumnLink key='favourites' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />, - <ColumnLink key='lists' icon='list-ul' text={intl.formatMessage(messages.lists)} to='/lists' />, - ); - height += 48*4; + 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' />); + } - 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' />); - height += 48; - } - - if (!multiColumn) { navItems.push( <ColumnSubheading key='header-settings' text={intl.formatMessage(messages.settings_subheading)} />, <ColumnLink key='preferences' icon='gears' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' />, ); - - height += 34 + 48; } return ( - <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.menu)}> - {multiColumn && <div className='column-header__wrapper'> - <h1 className='column-header'> - <button> - <Icon id='bars' className='column-header__icon' fixedWidth /> - <FormattedMessage id='getting_started.heading' defaultMessage='Getting started' /> - </button> - </h1> - </div>} - - <div className='getting-started'> - <div className='getting-started__wrapper' style={{ height }}> - {!multiColumn && <NavigationContainer />} + <Column> + {(signedIn && !multiColumn) ? <NavigationContainer /> : <ColumnHeader title={intl.formatMessage(messages.menu)} icon='bars' multiColumn={multiColumn} />} + + <div className='getting-started scrollable scrollable--flex'> + <div className='getting-started__wrapper'> {navItems} </div> {!multiColumn && <div className='flex-spacer' />} - <LinkFooter withHotkeys={multiColumn} /> + <LinkFooter /> </div> - {multiColumn && showTrends && <TrendsContainer />} + {(multiColumn && showTrends) && <TrendsContainer />} + + <Helmet> + <title>{intl.formatMessage(messages.menu)} - {title}</title> + </Helmet> </Column> ); } |