commit: 65f30f65a2816d5b25c096be0f237bbca17608e5 parent: e0ef7f9d79ce0bd8307e6bf77a4dd77d83214809 Author: Akihiko Odaki <akihiko.odaki.4i@stu.hosei.ac.jp> Date: Wed, 27 Dec 2017 11:31:30 +0900 Move the mastodon on Getting Started column to drawer column (#6109) Getting Started column obtained many links, and it became much taller. Because of its height, Getting Started column required long scrolling on devices with small screen, such as 4 inch phones and 10 inch laptops. This change moves the mastodon which took large space on the column to drawer column. The drawer column has only the compose form and has more space.Diffstat:
6 files changed, 19 insertions(+), 22 deletions(-)
diff --git a/app/javascript/images/mastodon-drawer.png b/app/javascript/images/mastodon-drawer.png Binary files differ. diff --git a/app/javascript/images/mastodon-getting-started.png b/app/javascript/images/mastodon-getting-started.png Binary files differ. diff --git a/app/javascript/images/wave-drawer.png b/app/javascript/images/wave-drawer.png Binary files differ. diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js @@ -94,6 +94,7 @@ export default class Compose extends React.PureComponent { <div className='drawer__inner' onFocus={this.onFocus}> <NavigationContainer onClose={this.onBlur} /> <ComposeFormContainer /> + <div className='mastodon' /> </div> <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}> diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js @@ -98,19 +98,17 @@ export default class GettingStarted extends ImmutablePureComponent { <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' /> </div> - <div className='getting-started__footer scrollable optionally-scrollable'> - <div className='static-content getting-started'> - <p> - <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.faq' defaultMessage='FAQ' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a> - </p> - <p> - <FormattedMessage - id='getting_started.open_source_notice' - defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.' - values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }} - /> - </p> - </div> + <div className='static-content getting-started'> + <p> + <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.faq' defaultMessage='FAQ' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a> + </p> + <p> + <FormattedMessage + id='getting_started.open_source_notice' + defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.' + values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }} + /> + </p> </div> </Column> ); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss @@ -1758,7 +1758,7 @@ position: absolute; top: 0; left: 0; - background: lighten($ui-base-color, 13%); + background: lighten($ui-base-color, 13%) url('../images/wave-drawer.png') no-repeat bottom / 100% auto; box-sizing: border-box; padding: 0; display: flex; @@ -1771,6 +1771,11 @@ &.darker { background: $ui-base-color; } + + > .mastodon { + background: url('../images/mastodon-drawer.png') no-repeat left bottom / contain; + flex: 1; + } } .pseudo-drawer { @@ -2072,15 +2077,8 @@ overflow-y: auto; } -.getting-started__footer { - display: flex; - flex-direction: column; -} - .getting-started { - box-sizing: border-box; - padding-bottom: 235px; - background: url('../images/mastodon-getting-started.png') no-repeat 0 100%; + background: $ui-base-color; flex: 1 0 auto; p {