mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix tabs bar bottom

Browse Source
This commit is contained in:
YoheiZuho 2024-01-02 10:35:47 +00:00
parent 7183eeb36b
commit 80980bb5d4
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/mastodon/features/ui/components/columns_area.jsx
View File

@ -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 {

12
app/javascript/mastodon/features/ui/components/tabs_bar.jsx
View File

@ -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>
);
}

4
app/javascript/styles/plugin.scss
View File

@ -18,6 +18,10 @@
display: none;
}
.column-link--transparent{
justify-content: center;
}
@media screen and (max-width: 630px) {
.tab-ber-bottom .timeline{
width:100%;