diff options
Diffstat (limited to 'app/javascript')
5 files changed, 74 insertions, 8 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/header.js b/app/javascript/flavours/glitch/features/ui/components/header.js index 891f7fc07..d9ad94961 100644 --- a/app/javascript/flavours/glitch/features/ui/components/header.js +++ b/app/javascript/flavours/glitch/features/ui/components/header.js @@ -7,6 +7,7 @@ import Avatar from 'flavours/glitch/components/avatar'; import Permalink from 'flavours/glitch/components/permalink'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; +import { openModal } from 'flavours/glitch/actions/modal'; const Account = connect(state => ({ account: state.getIn(['accounts', me]), @@ -16,7 +17,14 @@ const Account = connect(state => ({ </Permalink> )); -export default @withRouter +const mapDispatchToProps = (dispatch) => ({ + openClosedRegistrationsModal() { + dispatch(openModal('CLOSED_REGISTRATIONS')); + }, +}); + +export default @connect(null, mapDispatchToProps) +@withRouter class Header extends React.PureComponent { static contextTypes = { @@ -24,12 +32,13 @@ class Header extends React.PureComponent { }; static propTypes = { + openClosedRegistrationsModal: PropTypes.func, location: PropTypes.object, }; render () { const { signedIn } = this.context.identity; - const { location } = this.props; + const { location, openClosedRegistrationsModal } = this.props; let content; @@ -41,10 +50,26 @@ class Header extends React.PureComponent { </> ); } else { + let signupButton; + + if (registrationsOpen) { + signupButton = ( + <a href='/auth/sign_up' className='button button-tertiary'> + <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /> + </a> + ); + } else { + signupButton = ( + <button className='button button-tertiary' onClick={openClosedRegistrationsModal}> + <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /> + </button> + ); + } + content = ( <> <a href='/auth/sign_in' className='button'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a> - <a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a> + {signupButton} </> ); } diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 71edf7fb3..42a591931 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -65,6 +65,7 @@ $ui-header-height: 55px; z-index: 2; justify-content: space-between; align-items: center; + overflow: hidden; &__logo { display: inline-flex; @@ -81,10 +82,15 @@ $ui-header-height: 55px; align-items: center; gap: 10px; padding: 0 10px; + overflow: hidden; .button { flex: 0 0 auto; } + + .button-tertiary { + flex-shrink: 1; + } } } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index ab8609170..8ba8bec10 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -1306,7 +1306,8 @@ img.modal-warning { width: 600px; background: $ui-base-color; border-radius: 8px; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; position: relative; display: block; padding: 20px; diff --git a/app/javascript/mastodon/features/ui/components/header.js b/app/javascript/mastodon/features/ui/components/header.js index bbb0ca1c6..1384bebda 100644 --- a/app/javascript/mastodon/features/ui/components/header.js +++ b/app/javascript/mastodon/features/ui/components/header.js @@ -6,6 +6,7 @@ import { registrationsOpen, me } from 'mastodon/initial_state'; import Avatar from 'mastodon/components/avatar'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; +import { openModal } from 'mastodon/actions/modal'; const Account = connect(state => ({ account: state.getIn(['accounts', me]), @@ -15,7 +16,14 @@ const Account = connect(state => ({ </Link> )); -export default @withRouter +const mapDispatchToProps = (dispatch) => ({ + openClosedRegistrationsModal() { + dispatch(openModal('CLOSED_REGISTRATIONS')); + }, +}); + +export default @connect(null, mapDispatchToProps) +@withRouter class Header extends React.PureComponent { static contextTypes = { @@ -23,12 +31,13 @@ class Header extends React.PureComponent { }; static propTypes = { + openClosedRegistrationsModal: PropTypes.func, location: PropTypes.object, }; render () { const { signedIn } = this.context.identity; - const { location } = this.props; + const { location, openClosedRegistrationsModal } = this.props; let content; @@ -40,10 +49,26 @@ class Header extends React.PureComponent { </> ); } else { + let signupButton; + + if (registrationsOpen) { + signupButton = ( + <a href='/auth/sign_up' className='button button-tertiary'> + <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /> + </a> + ); + } else { + signupButton = ( + <button className='button button-tertiary' onClick={openClosedRegistrationsModal}> + <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /> + </button> + ); + } + content = ( <> <a href='/auth/sign_in' className='button'><FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Sign in' /></a> - <a href={registrationsOpen ? '/auth/sign_up' : 'https://joinmastodon.org/servers'} className='button button-tertiary'><FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' /></a> + {signupButton} </> ); } diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 8a2f64526..3650e3ec8 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -2217,6 +2217,7 @@ $ui-header-height: 55px; z-index: 2; justify-content: space-between; align-items: center; + overflow: hidden; &__logo { display: inline-flex; @@ -2233,10 +2234,15 @@ $ui-header-height: 55px; align-items: center; gap: 10px; padding: 0 10px; + overflow: hidden; .button { flex: 0 0 auto; } + + .button-tertiary { + flex-shrink: 1; + } } } @@ -7138,10 +7144,12 @@ noscript { .verified { border: 1px solid rgba($valid-value-color, 0.5); + margin-top: -1px; &:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; + margin-top: 0; } &:last-child { @@ -7973,7 +7981,8 @@ noscript { width: 600px; background: $ui-base-color; border-radius: 8px; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; position: relative; display: block; padding: 20px; |