[Glitch] Fix search not being easily findable on smaller screens in web UI

Port 2b78c07ef1 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/62/head
Eugen Rochko 2023-06-26 05:26:41 +02:00 committed by Claire
parent 80a5c16ae1
commit 2f996375e5
2 changed files with 16 additions and 7 deletions

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 } 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,6 +10,7 @@ import { connect } from 'react-redux';
import { openModal } from 'flavours/glitch/actions/modal'; import { openModal } from 'flavours/glitch/actions/modal';
import { fetchServer } from 'flavours/glitch/actions/server'; import { fetchServer } from 'flavours/glitch/actions/server';
import { Avatar } from 'flavours/glitch/components/avatar'; import { Avatar } from 'flavours/glitch/components/avatar';
import { Icon } from 'flavours/glitch/components/icon';
import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo'; import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
import Permalink from 'flavours/glitch/components/permalink'; import Permalink from 'flavours/glitch/components/permalink';
import { registrationsOpen, me } from 'flavours/glitch/initial_state'; import { registrationsOpen, me } from 'flavours/glitch/initial_state';
@ -22,6 +23,10 @@ const Account = connect(state => ({
</Permalink> </Permalink>
)); ));
const messages = defineMessages({
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',
}); });
@ -45,7 +50,8 @@ class Header extends PureComponent {
openClosedRegistrationsModal: PropTypes.func, openClosedRegistrationsModal: PropTypes.func,
location: PropTypes.object, location: PropTypes.object,
signupUrl: PropTypes.string.isRequired, signupUrl: PropTypes.string.isRequired,
dispatchServer: PropTypes.func dispatchServer: PropTypes.func,
intl: PropTypes.object.isRequired,
}; };
componentDidMount () { componentDidMount () {
@ -55,14 +61,15 @@ class Header extends PureComponent {
render () { render () {
const { signedIn } = this.context.identity; const { signedIn } = this.context.identity;
const { location, openClosedRegistrationsModal, signupUrl } = this.props; const { location, openClosedRegistrationsModal, signupUrl, intl } = this.props;
let content; let content;
if (signedIn) { if (signedIn) {
content = ( content = (
<> <>
{location.pathname !== '/publish' && <Link to='/publish' className='button'><FormattedMessage id='compose_form.publish_form' defaultMessage='Publish' /></Link>} {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>}
<Account /> <Account />
</> </>
); );
@ -85,6 +92,7 @@ class Header extends PureComponent {
content = ( content = (
<> <>
{location.pathname !== '/search' && <Link to='/search' className='button button-secondary' aria-label={intl.formatMessage(messages.search)}><Icon id='search' /></Link>}
{signupButton} {signupButton}
<a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a> <a href='/auth/sign_in' className='button button-tertiary'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' /></a>
</> </>
@ -107,4 +115,4 @@ class Header extends PureComponent {
} }
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header)); export default injectIntl(withRouter(connect(mapStateToProps, mapDispatchToProps)(Header)));

View File

@ -108,12 +108,13 @@
text-transform: none; text-transform: none;
background: transparent; background: transparent;
padding: 6px 17px; padding: 6px 17px;
border: 1px solid $ui-primary-color; border: 1px solid lighten($ui-base-color, 12%);
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
border-color: lighten($ui-primary-color, 4%); background: lighten($ui-base-color, 4%);
border-color: lighten($ui-base-color, 16%);
color: lighten($darker-text-color, 4%); color: lighten($darker-text-color, 4%);
text-decoration: none; text-decoration: none;
} }