specter/mastodon
1
0
Fork 0
forked from fedi/mastodon
Code Pull requests Activity

fix the nav

Browse source
This commit is contained in:
secretspecter 2024-05-07 01:48:46 +00:00
parent bdb6650ebc
commit bd6ad94915
2 changed files with 37 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/javascript/mastodon/features/ui/components/header.jsx
View file

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { PureComponent } from 'react'; import { PureComponent } from 'react';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl'; import { FormattedMessage, /* defineMessages, */ injectIntl } from 'react-intl';
import { Link, withRouter } from 'react-router-dom'; import { Link, withRouter } from 'react-router-dom';
@ -10,10 +10,12 @@ import { connect } from 'react-redux';
import { openModal } from 'mastodon/actions/modal'; import { openModal } from 'mastodon/actions/modal';
import { fetchServer } from 'mastodon/actions/server'; import { fetchServer } from 'mastodon/actions/server';
import { Avatar } from 'mastodon/components/avatar'; import { Avatar } from 'mastodon/components/avatar';
import { Icon } from 'mastodon/components/icon'; //import { Icon } from 'mastodon/components/icon';
import { WordmarkLogo, SymbolLogo } from 'mastodon/components/logo'; import { WordmarkLogo, SymbolLogo } from 'mastodon/components/logo';
import { registrationsOpen, me, sso_redirect } from 'mastodon/initial_state'; import { registrationsOpen, me, sso_redirect } from 'mastodon/initial_state';
import NavigationPanel from './navigation_panel';
const Account = connect(state => ({ const Account = connect(state => ({
account: state.getIn(['accounts', me]), account: state.getIn(['accounts', me]),
}))(({ account }) => ( }))(({ account }) => (
@ -22,9 +24,9 @@ const Account = connect(state => ({
</Link> </Link>
)); ));
const messages = defineMessages({ //const messages = defineMessages({
search: { id: 'navigation_bar.search', defaultMessage: 'Search' }, // search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
}); //});
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up', signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
@ -60,14 +62,13 @@ class Header extends PureComponent {
render () { render () {
const { signedIn } = this.context.identity; const { signedIn } = this.context.identity;
const { location, openClosedRegistrationsModal, signupUrl, intl } = this.props; const { location, openClosedRegistrationsModal, signupUrl, /* intl */ } = this.props;
let content; let content;
if (signedIn) { if (signedIn) {
content = ( content = (
<> <>
{location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
{location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>} {location.pathname !== '/publish' && <Link to='/publish' className='button button-secondary'><FormattedMessage id='compose_form.publish_form' defaultMessage='New post' /></Link>}
<Account /> <Account />
</> </>
@ -112,6 +113,7 @@ class Header extends PureComponent {
</Link> </Link>
<div className='ui__header__links'> <div className='ui__header__links'>
<NavigationPanel />
{content} {content}
</div> </div>
</div> </div>

28
app/javascript/styles/application.scss
View file

@ -24,3 +24,31 @@
@import 'mastodon/rtl'; @import 'mastodon/rtl';
@import 'mastodon/accessibility'; @import 'mastodon/accessibility';
@import 'mastodon/rich_text'; @import 'mastodon/rich_text';
// The following "fixes" the mobile layout
// in conjunction with the edits in `features/ui/components/header.jsx`
// NOTE: $no-gap-breakpoint is when the UI becomes 3 columns
.navigation-panel__logo,
.ui__header__logo {
display: none;
}
@media screen and (max-width: $no-gap-breakpoint) {
.columns-area__panels__pane--navigational,
.navigation-panel__sign-in-banner,
.navigation-panel__legal > hr,
.column-link > span {
display: none;
}
.navigation-panel {
flex-direction: row;
}
.ui__header__links {
flex-shrink: unset;
}
.ui__header {
justify-content: center;
}
}