Merge pull request #128 from Y-zu-don-maintenance-org/features/main
fix tabs bar bottom
This commit is contained in:
commit
03e6239278
@ -34,6 +34,8 @@ import { Link } from 'react-router-dom';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import TabsBar from './tabs_bar';
|
||||
|
||||
import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
|
||||
|
||||
const componentMap = {
|
||||
'COMPOSE': Compose,
|
||||
'HOME': HomeTimeline,
|
||||
@ -164,12 +166,12 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__main timeline'>
|
||||
<div className='tabs-bar__wrapper'><div id='tabs-bar__portal' /></div>
|
||||
<div className='tabs-bar__wrapper'><TabsBarPortal /></div>
|
||||
<div className='columns-area columns-area--mobile'>{children}</div>
|
||||
</div>
|
||||
|
||||
<div className='columns-area__panels__main navber'>
|
||||
{location.pathname !== '/publish' && <Link to='/publish' className='button bottom_right'><Icon id='pencil' fixedWidth /></Link>}
|
||||
{location.pathname !== '/publish' && <Link to='/publish' icon='Edit' className='button bottom_right'><EditIcon fill="white"/></Link>}
|
||||
<TabsBar key='tabs' />
|
||||
</div>
|
||||
|
||||
@ -178,7 +180,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
||||
<NavigationPanel />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
@ -4,6 +4,10 @@ import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ColumnLink from './column_link';
|
||||
import NotificationsCounterIcon from './notifications_counter_icon';
|
||||
|
||||
import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
|
||||
import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
|
||||
import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
|
||||
import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
|
||||
|
||||
const messages = defineMessages({
|
||||
home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
|
||||
@ -41,11 +45,11 @@ class TabsBar extends Component {
|
||||
|
||||
return (
|
||||
<div className='tabs-bar__wrapper'>
|
||||
<ColumnLink transparent to='/home' icon='home' text={intl.formatMessage(messages.home)} />
|
||||
<ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} text={intl.formatMessage(messages.home)} />
|
||||
<ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
|
||||
<ColumnLink transparent to='/public/local' isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
|
||||
<ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} />
|
||||
<ColumnLink transparent to='/getting-started' icon='bars' text={intl.formatMessage(messages.gettingStarted)} />
|
||||
<ColumnLink transparent to='/public/local' iconComponent={PublicIcon} isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
|
||||
<ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
|
||||
<ColumnLink transparent to='/getting-started' icon='bars' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.gettingStarted)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -18,6 +18,10 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.column-link--transparent{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 630px) {
|
||||
.tab-ber-bottom .timeline{
|
||||
width:100%;
|
||||
|
Loading…
Reference in New Issue
Block a user